시멘틱 마크업

2011.09.15 19:34개인/글

시멘틱 웹?
월드와이드웹의 발명자인 팀 버너슬리의 아이디어로 사용자 요구를 만족시키는 방법에 대하여 보다 지능적으로 또한 형편에 따라서는 보다 직관적으로 만들어질 수 있지 않겠느냐는 차세대 웹에 관한 생각

시멘틱 웹 사례(??라고 하기엔 그닥 시멘틱하진 않음)

<사례1 다음 - 메타태그를 3중으로 하여 타이틀을 표시했으나 스크린리더에선 좀 불편할듯... 소스만봐도 문서구조도를 어느정도 알 수 있는점은 좋음>
 

<사례2 구글 - 잦은 div가 사용됨, 스크린리더사용자에 대한 배려 돋보임, 소스만봐서는 구조 파악 힘듬>
* 막상 사례를 찾으려니 시멘틱 이라고 할만한 웹사이트는 별로 없네요,, 더 찾아서 업뎃해야할듯
 


간단하게 지킬 수 있는 군더더기없고 시멘틱한 템플릿 만들기
 
1. 불필요한 <div> 태그는 제거하세요.
<form>, <ul> 요소를 감싸는 <div> 요소를 우리는 어렵지 않게 목격할 수 있습니다. 도대체 왜 쓸데없이 추가적인 <div> 요소를 생성하는 것인가요? 

2. 시맨틱한 마크업을 사용하세요.
우리는 항상 시맨틱한 마크업을 사용하여 HTML 문서의 코드를 작성해야합니다. 예를 들면 <h1> 요소에는 머릿말을, <p> 요소에는 문단 또는 단락을, <ul> 요소는 목록을 표현하는 목적을 두고 만들어진 요소들 입니다. 이러한 마크업을 준수하면 CSS가 지원되지 않는 접속환경에서도 알아볼 수 있는 HTML 문서를 제공할 수 있는 등의 혜택이 따르기 때문입니다.

3. <div> 요소를 최소화하세요.
<div> 요소가 무분별하게 사용된 템플릿을 보고 돌아버릴 뻔 한 적이 있나요? 조금 더 구체적인 질문을 하자면 <div> 요소의 닫는 태그가 누락되거나 시작 지점을 찾느라 고생해 본 경험이 있나요? 아마도 대부분의 개발자가 이러한 경험이 있을 것이라고 확신합니다. 그래서 우리는 항상 <div> 요소를 최소화하여 사용해야 합니다. 그리하면 디버깅이나 유지보수 작업이 훨씬 쉬워질 것입니다.

4. 들여쓰기(Indent) 규칙을 꼭 지키세요.
HTML을 마크업할 때 들여쓰기는 꼭 지켜야 합니다. 그래야 사람이 읽기 편하고 디버깅이 쉬워지니까요. 만약 Adobe Dreamweaver를 사용하고 있다면 Commands > Apply Source Formatting 명령으로 쉽게 들여쓰기가 완성 되도록 할 수 있습니다.

5. 닫힌 태그(</div>)에 주석을 달아 주세요.
보통 하나의 템플릿은 header, sidebar, footer 등 여러가지 구성요소로 구분되어 완성됩니다. 그래서 구성요소의 구분이 끝나는 </div> 태그에 주석을 달아두면 두번다시 찾아 해메이는 일은 없을 것입니다. 코드중에 </div><!-- /wrapper -->라는 주석을 발견했다면, 이것이 의미하는 것은 <div id="wrapper"> 요소가 이곳에서 클로즈 된 것임을 알 수 있는 것이죠.

시멘틱웹 시장 아직은 없다
http://esconsult.egloos.com/838008

잘 쓰이지 않지만 유용한 css2 속성들
http://firejune.com/1489 

'개인 > ' 카테고리의 다른 글

이메일 레포트  (0) 2012.11.15
웹 접근성&웹 표준 완벽 가이드 부록 B  (0) 2012.02.21
시멘틱 마크업  (0) 2011.09.15
2011 디자인 레포트  (0) 2011.09.01
관계 디자인  (0) 2011.07.28
인레이  (0) 2010.10.26
1 2 3 4 5 6