Rev. 2.73

오늘은 역사적인 날입니다. 구글이 웹기반 운영체제를 만들겠다고 설래발 친 결과를 발표한 날이기 때문입니다. 구글 크롬 OS는 대부분의 시간을 웹에서 보내는 사람들을 위해 만들어진 운영체제입니다. 간단하게 조작하고 정말 빠르며 안전한 컴퓨팅 환경을 제공할 계획이라고 합니다. 그 일환으로 구글은 지금까지 개발된 크롬 운영체제 프로젝트의 진행경과를 보고하고 오픈소스로 전환했습니다. 이와 동시에 코드가 올라가 있는 저장소사용자 인터페이스 문서 그리고 자세한 설계문서를 공개했습니다. 참고로 보다 자세한 발표 내용을 광파리님께서 포스팅해 주셨네요. 시간나면 직접 돌려봐야 겠습니다.

Comments

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