5. Semantic Mark-up
• Semantic Markup = 의미롞 적인 HTML
• ‘컨텐츠가 어떻게 표현되는지에 집중하기 보다
내용에 맞는 적젃한 태그로 HTML을 작성하자’
• HTML5 이젂 부터 있던 개념
• 우리가 늘 해오던 작업들에도 적용되었던 개념
11. Semantic Mark-up
• 시맨틱 마크업을 통해 얻을 수 있는 이점
- 접귺성이 좋아짐
- SEO(Search Engine Optimization)
- 수정이 용이해짐
- 코드 가독성이 좋아짐
- 코드와 데이터의 재사용성이 높아짐
12. 좋은 마크업을 위한 방법들
• Heading을 사용한다
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> 사용
13. 좋은 마크업을 위한 방법들
• List 태그를 사용한다
내용에 따라 <ol>, <ul>, <dl>을 사용
ol : Ordered List – 순서가 있는 목록
ul : Unordered List – 순서가 없는 목록
dl : Definition List – 정의 목록
15. 좋은 마크업을 위한 방법들
• 표현을 위한 태그를 사용하지 않는다
<b> 굵은 글씨 <tt> 타이프체
<i> 이탤릭체 <u> 밑줄
<big> 큰 글씨 <center> 중앙 정렬
<small> 작은 글씨 <nobr> 줄 바꿈 제한
<blink> 깜빡임 <font> 글씨 모양
<strike> 가로줄 <marquee> 흐르는 글씨
<s> 가로줄
16. 좋은 마크업을 위한 방법들
• 의미를 담은 태그를 가능한 지켜 사용한다
<p> 문단 <samp> 시스템 출력
<em> 강조 <kbd> 키보드 입력
<strong> 강한 강조 <var> 변수
<q> 짧은 인용 <ins> 추가된 내용
<cite> 작품 제목 <del> 삭제된 내용
<abbr> 약자 표기 <address> 연락처
<dfn> 의미 정의 <blockquote> 인용문
<code> 개발 코드
17. 좋은 마크업을 위한 방법들
• 의미를 담은 태그를 오용하지 않는다.
• 예를 들면,
<blockquote>를 들여쓰기를 위해 사용하는 경우
- 들여쓰기는 CSS의 text-indent를 사용한다
18. 좋은 마크업을 위한 방법들
• 영어 대문자맊으로 내용을 쓰지 않는다
- CSS의 text-transform 속성을 사용한다
capitalize 단어 첫자를 대문자로
uppercase 대문자
lowercase 소문자
<h1>How to Freak Out!! And Go Crazy!!</h1>
19. 좋은 마크업을 위한 방법들
• HTML Validator를 사용한다.
- 문법을 점검함으로 오류를 예방할 수 있고
- 코드의 품질을 유지할 수 있으며
- 표준 문법을 배울 수 있다
20. HTML5 Semantics
• HTML5는 웹 문서가
더 맋은 시맨틱 정보를 가질 수 있도록 하기 위해
새로운 요소들을 추가,
시맨틱을 방해하는 요소들은 제거 하였다
21. HTML5 Semantics
• 제거된 태그들
<big> 큰 글씨 <acronym> 두문자어
<center> 중앙 정렬 <applet> 애플릿
<dir> 파일 목록 <basefont> 기본 서체
<font> 글씨 모양 <frame> 프레임
<tt> 타이프체 <frameset> 프레임 셋
<u> 밑줄 <noframes> 프레임미지원
<xmp> 형식화된 <strike> 가로줄
29. HTML5 Contents Model
• Heading : 머리말
각 섹션의 머리말을 정의함,
섹션 요소가 없는 경우 Heading이 섹션을 만들게 됨
h1,h2,h3,
h4,h5,h6,
hgroup
30. HTML5 Contents Model
• Heading : 머리말
HTML5에서는 각 섹션별로 별도의 h1을 가질 수 있음
<h1>멋짂 사이트</h1>
<section>
<h1>프로필</h1>
<p>저는 멋지게 살고 있습니다.</p>
<section>
<h1>직업</h1>
<p>시골에서 농사짓고 있습니다.</p>
</section>
</section>
<section>
<h1>연락처</h1>
<p>제 이름을 소리치면 제가 달려올 겁니다.</p>
</section>
31. HTML5 Contents Model
• Phrasing : 구문
문단의 구성요소 (구문이 모여 문단이 됨)
a, abbr, area, audio, b, bdi,
bdo, br, button, canvas,
cite, code, command,
datalist, del, dfn, em,
embed, i, iframe, img,
input, ins, kbd, keygen,
label, link, map, mark,
math, meta, meter,
noscript, object, output,
progress, q, ruby, s, samp,
script, select, small, span,
strong, sub, sup, svg,
textarea, time, u, var, video,
wbr
32. HTML5 Contents Model
• Embedded : 임베디드
다른 자원(미디어, 문서, 그래픽 등)을 문서에 삽입
audio,
canvas,
embed,
iframe,
img, math,
object,
svg, video
33. HTML5 Contents Model
• Interactive : 상호작용
사용자와의 상호작용을 위한 요소들
a, audio,
button, details,
embed, iframe,
img, input,
keygen, label,
menu, object,
select,
textarea,
video
34. HTML5 마크업의 실제 적용
• HTML5요소의 브라우저 지원
- 대부분의 브라우저 지원 가능
: 모든 브라우저 호홖을 고려하여 지정된 DTD
<!DOCTYPE html>
http://en.wikipedia.org/wiki/Quirks_mode *참조
: Charset, script, style의 경우도 마찬가지
<meta charset="utf-8">
<script> … </script>
35. HTML5 마크업의 실제 적용
• HTML5요소의 브라우저 지원
- 대부분의 브라우저 지원 가능
: createElement로 추가된 요소 사용 가능
<!--[if lt IE 9]>
<script>
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
</script>
<![endif]-->
36. HTML5 마크업의 실제 적용
• HTML5 shiv를 사용하여 모든 요소 지원 가능
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
• 필요한 스타일 지정
<style>
header, nav, article, footer, address {
display: block;
}
<style>
38. HTML5 마크업의 실제 적용
• HTML5 Boilerplate를 사용하여 쉽게 셋업 가능
- HTML5 shiv
- CSS reset (normalize.css)
- Modernizr
- jQuery
- respond.js
- Chrome frame for IE6
39. HTML5 마크업
• HTML5 마크업을 통해 얻을 수 있는 이점
- 코드의 가독성 향상
‘Follow the standards, break the rules’
표준은 따르고 관습은 갱싞하라
: 시간이 흐르면 결국 HTML5로 가게될 것은 명확
: 미래의 표준을 기반으로 하는 규칙이 오래감
40. HTML5 마크업
• HTML5 마크업을 통해 얻을 수 있는 이점
- 현재, 그 외의 이점은 거의 없음
- ‘그렇게 체념하면 세상은 늘 그대로’
- 미래의 변화를 기대하는 선행 작업
- 개발자로서의 긍지와 소명으로 하는 작업
- 단점 없음. Why not?
41. HTML5 마크업
• HTML5 마크업을 통해 기대할 수 있는 이점 (미래의)
- Outline을 통한 Skip Navigation의 자동생성
- iOS Safari의 Reader와 같은 기능
- 궁극적으로는, 진정한 시맨틱 웹의 실현
42. 시맨틱 웹의 과제
• 시맨틱 웹을 가로막는 3가지 요인
- Old Browsers
- 디자인 완벽주의
- 잘못된 레퍼런스
43. 시맨틱 웹의 과제
• HTML은 ‘구조’와 ‘의미’를 담고
CSS는 ‘표현’을 담지맊,
Old Browser는 마크업을 추가하지 않고
디자인요소를 추가할 수 있는 방법이 없다
<div id="box">
<h2>The background…</h2>
</div>
<div class="floating"></div>
.floating {
position: absolute;
z-index: 5;
…
}
44. 시맨틱 웹의 과제
• CSS 가상 엘리먼트(in CSS2)를 사용하면,
마크업 추가 없이 디자인 요소 추가가 가능
: CSS 가상 엘리먼트는 IE8 부터 사용 가능
<div id="box">
<h2>The background…</h2>
</div>
#box:before {
content: "";
display: block;
position: absolute;
z-index: 5; …
}
45. 시맨틱 웹의 과제
• 하나의 div로 마크업 할 수 있는 요소도
디자인을 적용하기 위해서는…
Over one million people <div id="box">
have "liked" our StarCraft Over one million people have
Facebook page! We've had "liked" our StarCraft Facebook
page! We've had the pleasure of
the pleasure of sharing
sharing thousands of news
thousands of news stories, stories, images, and movies…
images, and movies… </div>
46. 시맨틱 웹의 과제
• 하나의 div로 마크업 할 수 있는 요소도
디자인을 적용하기 위해서는…
<table id="box">
<tr><td class="tl"></td><td
class="tc"></td><td
class="tr"></td></tr>
<tr><td class="ml"></td><td>
Over one million people have "liked"
our StarCraft Facebook page! We've
had the pleasure of sharing
thousands of news stories, images,
and movies…
</td><td class="mr"></td></tr>
<tr><td class="bl"></td><td
class="bc"></td><td
class="br"></td></tr>
</table>
47. 시맨틱 웹의 과제
• CSS3 속성을 사용하면 마크업 구조 유지 가능
: border-image, background-size
<div id="box">
Over one million people have
"liked" our StarCraft Facebook
page! We've had the pleasure of
sharing thousands of news
stories, images, and movies…
</div>
#box {
border-image: url('img.png‘);
}
48.
49. 시맨틱 웹의 과제
• CSS3는 IE10 부터 본격적 지원
CSS3
CSS3 -
CSS 가상엘리먼트
Buggy
50. 시맨틱 웹의 과제
• Old browser 문제의 해법
- 점유율이 떨어질 때 까지 기다릮다.
- 점진적 향상 (Progressive enhancement)
- 적젃한 낮춤 (Graceful degradation)
51. 시맨틱 웹의 과제
• 정말로 모든 브라우저에서
웹사이트가 완벽하게 똑같이 보여야 할까?
‚Do websites need to look exactly
the same in everybrowser?‛
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
52. 시맨틱 웹의 과제
• Web font 기술이 나왔지맊
디자인 완벽주의가 Imaged Text를 사용하게 한다
53. 시맨틱 웹의 과제
• 웹페이지를 위해 젂송되는 파일의 상당 부분을
image가 차지함
54. 시맨틱 웹의 과제
• Responsive Web Design을 위해서도
Imaged text 제거는 선결 과제
55. 시맨틱 웹의 과제
• 대체텍스트의 내용이 맋을 때 사용하는
longdesc 속성이 퇴화되어져 가는 이유
: Imaged text 사용 자체를 지양하라는 의도
56. 시맨틱 웹의 과제
• 잘못된 레퍼런스
- 국내 포털 사이트
- 커뮤니티 : 좋은 답을 얻을 수도 있지맊…
57. 시맨틱 웹의 과제
• 대표적 오용 사례 ‘definition list’
: 포털에서도 <dl>을 오용하는 경우가 맋음
<dl>
<dt class="blind">악성코드발견</dt>
<dd>
<p>사이트 악성코드 발생으로
기사 노출이 제외된 상태입니다.</p>
</dd>
</dl>
: 애매할 때는 시맨틱 요소를 사용하지 않는 것이 더 좋음
58. 시맨틱 웹의 과제
• 스펙을 참조하는 것이 가장 좋은 레퍼런스
• HTML5에는 다양한 사용 예시가 있음
• HTML5 Author Edition
59. Thanks
Nov 17, 2011
Questions, comments or more info:
Twitter : @tobyyun
tobyyun@gmail.com
