➊ 우선 <html>, <body>, <h1> ~ <h6>, <p> 태그는 margin과 padding 속성이 기본값으로 적용된 상태이므로 속성값을 0으로 초기화하는 작업을 해야 합니다.
➋ <body> 태그에 있는 overflow-x: hidden;은 ‘브라우저 창의 너비를 벗어나는 모든 콘텐츠는 감추겠다’는 뜻입니다. 콘텐츠를 브라우저 창 밖에 배치하면 브라우저에 가로 스크롤이 생깁니다. 브라우저 영역을 벗어난 콘텐츠를 감추고 가로 스크롤도 나타나지 않게 하려면 <body> 태그에 overflow-x: hidden;을 꼭 입력해야 합니다.
➌ <button> 태그는 버튼을 만들 때 사용하는 HTML5 신조어입니다. CSS 기본 속성값은 검은색 테두리와 회색 배경입니다. 마찬가지로 초기화 작업을 해야 하므로 테두리를 제거하는 border: none;과 배경색을 투명하게 하는 background-color: transparent;을 적용합니다.
잠 깐 만 요
overflow-x: hidden을 적용하기 전과 후
overflow는 ‘넘치다’ 또는 ‘초과하다’, hidden은 ‘감추다’ 또는 ‘숨기다’라는 의미입니다. 즉, overflow-x: hidden은 글자 그대로 x축을 초과하는 요소는 숨기겠다는 뜻입니다.
왼쪽과 오른쪽의 노란색 박스는 overflow-x: hidden을 적용하기 전과 후의 이미지입니다. 왼쪽 이미지는 파란색 박스가 노란색 박스 공간을 벗어나도 그 형태를 온전히 유지합니다. 반면 오른쪽 이미지는 파란색 박스가 노란색 박스 공간을 벗어나면 벗어난 부분만큼 잘린 형태로 표시합니다. 이처럼 overflow-x: hidden을 사용하면 공간의 너비를 기준으로 너비를 벗어나는 모든 요소를 감춥니다(hidden).
