쏭군은 열정 드리머

이제는 HTML마크업과 CSS프레젠테이션을 분리하여 프론트엔드 웹페이지를 만들 수 있는 분들이 많아진 것 같습니다. 확실히 이제는 이렇게 하는것이 표준이 되었고 자리를 잡았네요. 다행이라고 생각합니다.

그럼에도 불구하고 협업을 하다보면 기본적인 부분들을 놓치시는 프론트앤드 개발자분들이 많으신 것 같아서, 기본적인 것임에도 많은 분들이 놓치고 있는 것들을 간간히 포스팅 하고자 합니다.

오늘은 CSS의 clear 속성에 관한 이야기 입니다.


위의 레이아웃을 보시면 LNB는 float: left로, 그리고 우측의 콘텐츠 영역은 float: right로 정렬했고, 하단에 있는 푸터 부분은 clear속성을 이용해서 플로팅 되어 있는 HTML요소들을 클리어 리셋합니다. 어느 사이트를 만들때나 거의 항상 사용하는 기본 레이아웃이라고도 할 수 있습니다.

푸터 부분에 clear:both; 속성을 사용할때, 간혹 HTML마크업을 이용하시는 분들이 계시는 것 같습니다. 예를 들면 다음과 같이 말이죠.<div class="lnb"> ... blah blah ... </div> <div class="content"> ... blah blah ... </div> <div class="cb"></div> <div class="footer"> ... blah blah ... </div> .lnb {width:200px;float:left;} .content {width:600px;float:right;} .cb {clear:both;} .footer {width:850px;} 많은 분들이 이런식으로 코드를 만드시는데 무엇이 문제일까요? 바로 클래스명 'cb'부분입니다. 플로팅 된 요소를 클리어 리셋하기 위해서 아무 내용도 없는 빈 DIV가 마크업에 추가되었고, CSS에도 별도로 클리어를 위한 클래스가 만들어져 있습니다. 혹시 이런 습관을 가지고 있다면 좋은 습관이 아니라고 생각됩니다. 물론, 이 방법이 잘못되었다고는 할 수 없습니다만 권장되는 방법은 아닙니다. 이 방법이 좋지 않다고 생각되는 제 개인적인 이유는 다음과 같습니다.

1. HTML마크업은 문서에 꼭 필요한 요소들만 들어가야 하기에, 저런 의미없는 태그들은 들어가지 않도록 하는게 맞습니다.
2. 간혹, 저런 의미 없는 태그들 때문에 이유없이 브라우저 랜더링 버그를 만난다던가 레이아웃이 깨지는 현상을 겪기도 합니다.
3. 저렇게 사용하는 것이 코드가 더 길어지고 작업 시간도 길고 번거롭습니다.

이렇게 사용하셨던 분들은 앞으로는 푸터 컨테이너를 컨트롤 하는 CSS에 다음과 같이 clear:both만 추가해주는게 어떨까요?<div class="lnb"> ... blah blah ... </div> <div class="content"> ... blah blah ... </div> <div class="footer"> ... blah blah ... </div> .lnb {width:200px;float:left;} .content {width:600px;float:right;} .footer {clear:both;width:850px;} 이렇게 클리어 리셋이 필요한 부분에 clear속성을 직접 기술하는 것이 마크업도 깔끔해지고, 되려 CSS를 관리할때도 더 편리합니다.

LNB, Content, Footer 레이아웃을 예로 설명 드렸지만 이와 같이 플로팅된 요소들을 clear할 일이 있으시다면 앞으로는 이렇게 코딩해 보세요^^

날씨가 덥습니다~ 모두 건강 조심하세요^^