스타트업 개발자다 보니 회사에서 별걸 다 개발하는데, 웹 부분 섹션 스크롤링 구현하는데 희한하게 div 사이에 공백이 생겨서 스크롤링이 희한하게 일어나는것이다......
(티스토리 오류 같은데, 움짤이 이상하게 올라갑니다. 클릭하면 정상 동작하니 동작 오류와 해결책을 불편하시겠지만 클릭해서 확인해주세요.)
아니 대체 이게 뭐시여 ㅠ 하고 찾아보다가 깨달은것은.......
div가 사실 html 문서라 시각적 구현할 때 section을 지정한 div 사이에 엔터가 보이면서 생기는 현상이라는 것이다 (머리 부여잡은 토기짤)
그래서, 섹션 div에 클래스를 부여하고, 그 클래스에 font-size : 0px로 지정했다.
.section {
width: 100%;
height: 100%;
position: relative;
margin: 0;
font-size: 0px;
}
그랬더니 거짓말처럼 공백이 사라지는 것이다..
근데 이 방법은 텍스트 처리가 부담스러워서 (자식한테도 font-size가 상속되는 듯 하다)
다음과 같이 그냥 마지막 태그를 아래로 내리는 방식이 제일 부드러운 것 같다. 앞선 개발자들 너무 천재인 것 같다..
이렇게 나누면 그렇게 가독성 떨어지는 것 같지도 않고...
<body>
<div class="section" id="section1">
<div>
</div>
</div
><div class="section" id="section2"></div
><div class="section" id="section3"></div
><div class="section" id="section4"></div>
</body>
정말 거짓말처럼 스크롤링이 부드럽게 처리되어서 놀랍다.. 진짜 뭘까 웹개발.....
반응형
'HTML+CSS+Javascript > CSS3' 카테고리의 다른 글
| 7. 마우스 커서 (0) | 2020.03.10 |
|---|---|
| 6. 시각적 스타일 (0) | 2020.03.09 |
| 5. 배경 (0) | 2020.03.09 |
| 4. 박스 스타일 (0) | 2020.03.09 |
| 3. 색과 텍스트 꾸미기 (0) | 2020.03.09 |
