Web Designer Wall의 Nick La씨는 잘 사용되지 않지만 유용한 5가지 CSS2 속성들에 대한 포스팅 다음으로 <div> HTML 요소가 남용되고 있는 상황에 대하여 지적하고 말끔하면서도 시맨틱한 HTML 마크업을 할 수 있도록 <div> 요소를 최소화 하는데 중점을 두어 여러가지 예시를 작성하였습니다. 혹시 다른사람이 작성한 템플릿을 수정하다가 미쳐 광분해 본 경험이 있으신가요? 여러 사람이 참여하는 규모가 큰 프로젝트에서는 군더더기 없는 템플릿의 마크업은 매우 중요하며 무엇보다도 이를 지키는 본인에게 가장 큰 혜택이 돌아가게 될 것입니다.
1. 불필요한 <div> 태그는 제거하세요.
<form>, <ul> 요소를 감싸는 <div> 요소를 우리는 어렵지 않게 목격할 수 있습니다. 도대체 왜 쓸데없이 추가적인 <div> 요소를 생성하는 것인가요?
예시 1:
이 예시는 <div> 요소를 제거하기위해 CSS 셀렉터를 조금 수정한 것입니다.
예시 2:
때때로 <div> 요소를 단순히 여백(margin)을 할당하기 위한 목적으로 사용하는 경우를 발견할 수 있습니다. 왼쪽 코드들 중에 <div class="box"> 요소가 바로 여백을 주기위한 것입니다. 이것은 <h4> 요소에 여백을 사용하면 됩니다.
2. 시맨틱한 마크업을 사용하세요.
우리는 항상 시맨틱한 마크업을 사용하여 HTML 문서의 코드를 작성해야합니다. 예를 들면 <h1> 요소에는 머릿말을, <p> 요소에는 문단 또는 단락을, <ul> 요소는 목록을 표현하는 목적을 두고 만들어진 요소들 입니다. 이러한 마크업을 준수하면 CSS가 지원되지 않는 접속환경에서도 알아볼 수 있는 HTML 문서를 제공할 수 있는 등의 혜택이 따르기 때문입니다.
예시:
<div> 요소만을 이용해서 마크업한 것과 그렇지 않은 마크업입니다. CSS가 지원되지 않는 환경에서 렌더링의 차이를 비교할 수 있습니다.
3. <div> 요소를 최소화하세요.
<div> 요소가 무분별하게 사용된 템플릿을 보고 돌아버릴 뻔 한 적이 있나요? 조금 더 구체적인 질문을 하자면 <div> 요소의 닫는 태그가 누락되거나 시작 지점을 찾느라 고생해 본 경험이 있나요? 아마도 대부분의 개발자가 이러한 경험이 있을 것이라고 확신합니다. 그래서 우리는 항상 <div> 요소를 최소화하여 사용해야 합니다. 그리하면 디버깅이나 유지보수 작업이 훨씬 쉬워질 것입니다.
예시 1:
여기에 사용된 <div> 요소는 자잘한 네비게이션 링크들(예를 들면 태그)을 위해 존재합니다. 이것을 더욱 의미있는 <p> 요소로 변경했습니다.
예시 2:
이 예시에서는 CSS를 이용해서 두개의 <div> 요소를 덜어내고 하나의 <span> 요소를 사용해서 같은 출력 결과를 만드는 과정을 설명합니다.
4. 들여쓰기(Indent) 규칙을 꼭 지키세요.
HTML을 마크업할 때 들여쓰기는 꼭 지켜야 합니다. 그래야 사람이 읽기 편하고 디버깅이 쉬워지니까요. 만약 Adobe Dreamweaver를 사용하고 있다면 Commands > Apply Source Formatting 명령으로 쉽게 들여쓰기가 완성 되도록 할 수 있습니다.
5. 닫힌 태그(</div>)에 주석을 달아 주세요.
보통 하나의 템플릿은 header, sidebar, footer 등 여러가지 구성요소로 구분되어 완성됩니다. 그래서 구성요소의 구분이 끝나는 </div> 태그에 주석을 달아두면 두번다시 찾아 해메이는 일은 없을 것입니다. 코드중에 </div><!-- /wrapper -->라는 주석을 발견했다면, 이것이 의미하는 것은 <div id="wrapper"> 요소가 이곳에서 클로즈 된 것임을 알 수 있는 것이죠.
예시:
일반적으로 구조를 종료하는 닫힌 태그(</div>)우측에 종료의 의미를 알리는 역슬래시를 표기하여 HTML 주석으로 표현합니다.
Web Designer Wall을 운영하는 Nick La씨는 평소 즐겨 사용되지 않지만 유용한 5가지 CSS 속성들의 사용방법을 소개합니다. 이 5가지 속성은 clip, min-height, white-space, cursor 그리고 display 입니다. 모두 CSS2에 명시되어 있는 속성들로 이미 모든 브라우저들이 이를 지원하고 있으며, 어떻게 응용하느냐에 따라서는 그 목적이 확연히 달라질 수 있음을 설명하고 있습니다.
1. CSS Clip
"clip"속성은 마치 마스크(mask)와 같습니다. 특정한 영역에 직사각형 모양의 컨텐츠를 삽입할 수 있습니다. clip 속성은 반드시 position속성을 absolute로 지정해야합니다. 그리고 top, right, bottom, left 값을 지정합니다.
이 예제에서는 썸네일 갤러리에 사용하기 위해 이미지의 크기를 변경하고 불필요한 영역을 잘라내 보겠습니다. 원본 200 x 140픽셀인 직사각형 이미지의 크기를 50%로 줄이고 정사각형 모양으로 잘라낸 후 잘려나간 만큼 left값을 -15px로 지정하여 마치 클리핑 된 것처럼 했습니다.
display 속성값들 중 block이 무엇을 의미하는지 잘 알고 있나요? block으로 설정된 요소는 구조 요소 처럼 변환됩니다. 즉 <div>, <h1> 그리고 <p> 요소가 가진 특성을 가지는 것이죠. inline은 그 반대입니다. 구조 요소를 <em>, <span> 그리고 <strong> 요소와 같은 문자 요소의 특성을 가지게 됩니다.
.block em {
display: block;
}
.inline h4, .inline p {
display: inline;
}
Comments