---
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 &gt; ul &gt; li</code>, or <code>.fruits__item</code>?</p>
</div>

<p>CSS의 경우입니다. 다양한 종류의 과일을 나타내기 위해서는 리스트 태그 <code>li</code> 가 있다고 가정해봅시다.   <code>div&gt; ul&gt; 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">&lt;h1&gt;This is a top level heading&lt;/h1&gt;</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">&lt;span style="font-size: 32px; margin: 21px 0;"&gt;Is this a top level heading?&lt;/span&gt;</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>