inflearn logo
강의

Course
Instructor

Flex Responsive Website Portfolio (The World's Best Cities)

Detailed Publishing (Smooth scrolling with jQuery and Pure CSS)

x scroll 이 왜 생기는 걸까요?

870

dkfmwpsxm

73 asked

1

강좌 따라할때 처음 

header 만들고 main만들 때부터 생겼었어요

나중에 없애는거 알려주겟지 하면서 보고있는데

샘꺼는 어느순간 해결이 되있더라고요

저로서는 아직 이게 왜 생기는건지,,

overflow-x: hidden; 으로 없애고 싶다기보다

근본적인 원인을 알고싶습니다!!

box-sizing:border-box;는 적용되어있는 상태입니다

물론 코드를 봐야 아시겠지만 

혹시 짐작가시는 부분이 있다면 부탁드리겠습니다.

 

고민중인데 해결이 안되는군요 

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
html {
    box-sizing: border-box;
     scroll-behavior: smooth;
     margin: 0;
     padding: 0;
}

*, *::before, *::after {
    box-sizing: border-box;
    font-family: 'Noto Sans KR', sans-serif;
    font-style: normal;
}

body {
  color: #222;

  width: 100vw;
  height: 100vh !important;
  margin: 0;
  padding: 0;

  display: flex;
  justify-content: center;
  align-items: center;
  /* overflow: auto; */
}

dl, menu, li {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal; font-size: 28px;
    margin: 0;
    padding: 0;
}

a {color: #222; text-decoration: none;}
a:hover {color: #390;}

button { cursor: pointer; outline: none; }
input , textarea , select { outline: none; }
button, input , textarea , select { font-family: 'Noto Sans KR',sans-serif; }
`;

export default GlobalStyle;
const RootLayout = styled.div`
  width: 100vw;
  height: 100vh;
  /* min-width: 100vw; */
  /* min-height: 100vh; */
  /* position: relative; */
`;

function App() {
  return (
    <ThemeProvider theme={Theme}>
      <GlobalStyle />
      <RootLayout>
        <Resume />
      </RootLayout>
    </ThemeProvider>
  );
}

저 <Resume/>가 강의 내용의 css가 담겨있습니다 상위 엘리먼트에서 css 설정에 문제가 있을까요..?

반응형-웹 flex

Answer 1

1

codingworks

슬릭 슬라이더를 사용한 경우 이런 현상이 생깁니다.

 Next Prev 버튼이 흰색이어서 눈으로 확인이 안될거에요.

이것 때문에 가로 스크롤이 미세하게 생깁니다.

이걸 개발자 도구에서 선택자로 찾아서 display: none 해주시거나

제이쿼리 옵션에서 arrows: false 넣어주세요.

이게 문제가 아니면 전체 소스를 봐아할 것 같습니다.

0

dkfmwpsxm

답변 감사합니다 확인해보겠습니다.

가로스크롤

1

459

1

상위 태그 영역 무시 하는 방법

1

843

2

반응형 적응형 구분

2

804

2

flex가 적용되면 하위에 있는 인라인의 속성은?

1

360

1

슬릭 슬라이더 버튼

1

370

1

slick 모바일로 변환했을때..

1

607

1

영상 16분 field margin-left 문제 (다운로드 교재도 동일한 문제)

1

249

1

모바일에서 이미지 짤림 현상

1

2743

2

질문 있습니다

1

242

1

안녕하세요

1

259

1

모바일버전에서 스크롤이 생겨서요 ㅜㅜ

1

289

1

반응형 헤더 네비게이션 공부중인데요. 궁금한것이 있어서요.

1

387

2

슬라이딩 스크롤이 이상하게 먹혀요!

1

408

2

slick slider 하는데 패딩이 안먹혀요

1

764

2

제이쿼리 부드럽게 스크롤할때 제이쿼리에 밑줄오류가 있습니다.

1

317

1

혹시 이 강의 싸이트를 혼자의 힘으로 만들수 있으면 어느정도 실력정도 되나요?

1

250

1

소스랑 자료 다운로는 어디서 받을 수 있나요?

1

300

1

반응형 헤더 네비게이션 강의 질문있습니다.

1

203

1

그 반응형 질문 있습니다

1

225

1

질문드립니다 강사님

1

290

2

flex 레이아웃 배치 질문있습니다.

1

221

1

미디어쿼리 반응형 만들때 사이즈 질문있습니다.

1

202

1

인라인요소인 label 에 margin-bottom 이 되다니... 어렵습니다.

1

973

1

태블릿부분에서 사진이 삐져나오는 부분 질문

2

238

1