1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
---
title: Semantics
slug: Glossary/Semantics
tags:
- 의미론
- 의미론적 요소
translation_of: Glossary/Semantics
---
<p><span class="seoSummary">프로그래밍에서,<strong>시맨틱</strong>은 코드 조각의 <em>의미</em>를 나타냅니다 — 예를 들어 ("이게 어떻게 시각적으로 보여질까?" 보다)"이 Javascript 라인을 실행하는 것은 어떤 효과가 있는가?", 혹은 "이 HTML 엘리먼트가 가진 목적이나 역할은 무엇인가?"</span></p>
<h2 id="JavaScript_시맨틱">JavaScript 시맨틱</h2>
<div class="hidden">
<p>In JavaScript, consider a function that takes a string parameter, and returns an {{htmlelement("li")}} element with that string as its <code>textContent</code>. Would you need to look at the code to understand what the function did if it was called <code>build('Peach')</code>, or <code>createLiWithContent('Peach')</code>?</p>
</div>
<p>JavaScript의 경우입니다. <code>textContent</code> 문자열을 매개변수로 하고 {{htmlelement("li")}} 요소를 반환하는 함수를 생각해봅시다. 코드 볼 때, 함수를 <code>build('Peach')</code> 로 부르거나 <code>createLiWithContent('Peach')</code> 부르는 것 중 어느 것이 이 함수의 기능 파악하기에 쉬울까요?</p>
<h2 id="CSS_시맨틱">CSS 시맨틱</h2>
<div class="hidden">
<p>In CSS, consider styling a list with <code>li</code> elements representing different types of fruits. Would you know what part of the DOM is being selected with <code>div > ul > li</code>, or <code>.fruits__item</code>?</p>
</div>
<p>CSS의 경우입니다. 다양한 종류의 과일을 나타내기 위해서는 리스트 태그 <code>li</code> 가 있다고 가정해봅시다. <code>div> ul> li</code> 와 <code>.fruits__item </code> 둘 중 어떤 것이 어떤 DOM부분이 선택되었는지 잘 알려줄까요?</p>
<h2 id="HTML_시맨틱">HTML 시맨틱</h2>
<div class="hidden">
<p>In HTML, for example, the {{htmlelement("h1")}} element is a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page."</p>
</div>
<p>예를 들어 HTML에서는 {{htmlelement("h1")}} 은 시맨틱 요소입니다. "이 페이지에서 최상위 제목" 인 텍스트를 감싸는 역할(또는 의미)를 나타냅니다.</p>
<pre class="brush: html"><h1>This is a top level heading</h1></pre>
<div class="hidden">
<p>By default, most browser's <a href="/en-US/docs/Web/CSS/Cascade#User-agent_stylesheets">user agent stylesheet</a> will style an {{htmlelement("h1")}} with a large font size to make it <em>look </em>like a heading (although you could style it to look like anything you wanted).</p>
<p>On the other hand, you could make any element <em>look</em> like a top level heading. Consider the following:</p>
</div>
<p>기본적으로 대부분의 브라우저의 <a href="/en-US/docs/Web/CSS/Cascade#User-agent_stylesheets">사용자 에이전트 스타일시트</a> {{htmlelement("h1")}} 가 제목(heading) 처럼 <em>보이도록</em> 큰사이즈 폰트로 스타일을 만듭니다(당신이 원하는 대로 스타일을 바꿀 수도 있지만요).</p>
<p>반면에 모든 요소를 '최상위 제목'처럼 <em>보이게</em> 할 수 있습니다. 다음을 고려하세요:</p>
<pre class="brush: html"><span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span></pre>
<div class="hidden">
<p>This will render it to look like a top level heading, but it has no semantic value, so it will not get any extra benefits as described above. It is therefore a good idea to use the right HTML element for the right job.</p>
</div>
<p>이렇게 하면 top level heading 처럼 보이지만 의미적 가치(semantic value)가 없으므로 위에서 설명한 것처럼 추가적인 이점은 얻을 수 없습니다. 따라서 작업에 적합한 HTML 요소를 사용하는 것이 좋습니다.</p>
<div class="hidden">
<p>HTML should be coded to represent the <em>data</em> that will be populated and not based on its default presentation styling. Presentation (how it should look), is the sole responsibility of <a href="/en-US/docs/Web/CSS">CSS</a>.</p>
</div>
<p>HTML은 채워질 <em>데이터</em>를 나타내도록 코딩해야합니다. 기본 프리젠테이션 스타일기반이 아니라요. 프레젠테이션(어떻게 보여져야만 하는가)은 <a href="/en-US/docs/Web/CSS">CSS</a>만의 단독 역할입니다.</p>
<div class="hidden">
<p>Some of the benefits from writing semantic markup are as follows:</p>
<ul>
<li>Search engines will consider its contents as important keywords to influence the page's search rankings (see {{glossary("SEO")}})</li>
<li>Screen readers can use it as a signpost to help visually impaired users navigate a page</li>
<li>Finding blocks of meaningful code is significantly easier than searching though endless <code>div</code>s with or without semantic or namespaced classes</li>
<li>Suggests to the developer the type of data that will be populated</li>
<li>Semantic naming mirrors proper custom element/component naming</li>
</ul>
</div>
<p>의미론적인 마크업을 사용하면 아래와 같은 이점이 있습니다:</p>
<ul>
<li>검색 엔진은 의미론적 마크업 을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주합니다 ({{glossary ( "SEO")}} 참조).</li>
<li>시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있습니다.</li>
<li>의미없고 클래스 이름이 붙여져있거나 그렇지 않은 끊임없는 <code>div</code> 들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉽습니다.</li>
<li>개발자에게 태그 안에 채워질 데이터 유형을 제안합니다</li>
<li>의미있는 이름짓기(Semantic naming)는 적절한 사용자 정의 요소 / 구성 요소의 이름짓기(namimg)를 반영합니다.</li>
</ul>
<div class="hidden">
<p>When approaching which markup to use, ask yourself, "What element(s) best describe/represent the data that I'm going to populate?" For example, is it a list of data?; ordered, unordered?; is it an article with sections and an aside of related information?; does it list out definitions?; is it a figure or image that needs a caption?; should it have a header and a footer in addition to the global site-wide header and footer?; etc</p>
</div>
<p>사용할 마크업에 접근할 때 스스로에게 물어보세요. "내가 채울 데이터를 가장 잘 설명하고 나타내는 요소는 무엇일까?" 예를 들어, 그 데이터는 정렬된 목록입니까? 정렬되지 않은 목록입니까?, 관련된 정보가 제외된 섹션이 있는 아티클(article)입니까?, 정의의 나열입니까?, 캡션이 필요한 그림 또는 이미지입니까?, 사이트 전체 머리글(header) 및 바닥글(footer) 외에 또 다른 머리글과 바닥글이 있어야합니까? 등등</p>
<ul>
</ul>
<h2 id="의미론적_요소element들">의미론적 요소(element)들</h2>
<ul>
</ul>
<div class="hidden">
<p>These are <em>some</em> of the roughly 100 semantic <a href="/en-US/docs/Web/HTML/Element">elements</a> available:</p>
</div>
<p>사용가능한 백 여개 정도의 요소(<a href="/en-US/docs/Web/HTML/Element">elements</a>)들이 있습니다.</p>
<ul>
<li>{{htmlelement("article")}}</li>
<li>{{htmlelement("aside")}}</li>
<li>{{htmlelement("details")}}</li>
<li>{{htmlelement("figcaption")}}</li>
<li>{{htmlelement("figure")}}</li>
<li>{{htmlelement("footer")}}</li>
<li>{{htmlelement("header")}}</li>
<li>{{htmlelement("main")}}</li>
<li>{{htmlelement("mark")}}</li>
<li>{{htmlelement("nav")}}</li>
<li>{{htmlelement("section")}}</li>
<li>{{htmlelement("summary")}}</li>
<li>{{htmlelement("time")}}</li>
</ul>
<h2 id="Learn_more">Learn more</h2>
<ul>
<li><a href="/en-US/docs/Web/HTML/Element#Inline_text_semantics">HTML element reference</a> on MDN</li>
<li><a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Problems_solved_by_HTML5">Using HTML sections and outlines</a> on MDN</li>
<li>{{interwiki("wikipedia", "Semantics#Computer_science", "The meaning of semantics in computer science")}} on Wikipedia</li>
</ul>
<section id="Quick_links">
<ul>
<li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
<ul>
<li>{{Glossary("SEO")}}</li>
</ul>
</li>
<li>Some of semantic elements in HTML
<ul>
<li>{{htmlelement("article")}}</li>
<li>{{htmlelement("aside")}}</li>
<li>{{htmlelement("details")}}</li>
<li>{{htmlelement("figcaption")}}</li>
<li>{{htmlelement("figure")}}</li>
<li>{{htmlelement("footer")}}</li>
<li>{{htmlelement("header")}}</li>
<li>{{htmlelement("main")}}</li>
<li>{{htmlelement("mark")}}</li>
<li>{{htmlelement("nav")}}</li>
<li>{{htmlelement("section")}}</li>
<li>{{htmlelement("summary")}}</li>
<li>{{htmlelement("time")}}</li>
</ul>
</li>
</ul>
</section>
|
