Rev. 2.73

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 주석으로 표현합니다.

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar