고급 텍스트 서식 지정
Attributions and copyright licensing (opens in a new tab) by Mozilla Contributors (opens in a new tab) is licensed under CC-BY-SA 2.5 (opens in a new tab).
설명 목록
Description lists(설명 목록)은 다른 타입의 리스트와 다르게 <dl> 태그를 사용합니다. 또한 각 용어는 <dt> (description term) 요소를 사용하고, 각 설명은 <dd> (description definition) 요소를 사용합니다.
하나의 용어에 대한 다중 설명
<dl>
<dt>aside</dt>
<dd>
드라마에서 캐릭터가 유머러스하거나 극적인 효과를 위해 청중에게만 의견을
공유하는 경우. 일반적으로 느낌, 생각 또는 추가 배경 정보입니다.
</dd>
<dd>
서면에서는 현재 주제와 관련되어 있지만 콘텐츠의 주요 흐름에 직접 들어가지
않으므로 근처에 표시됩니다 (종종 옆의 상자에 표시됨.)
</dd>
</dl>인용구
블록 인용구
블록 레벨 컨텐츠의 섹션(문단, 여러 단락, 리스트 등)이 인용된 경우, 이를 나타내는 <blockquote> 요소로 감싸야합니다. 그리고 cite 속성에 출처를 표기합니다. 아래의 예시는 MDN <blockquote> 요소 페이지를 인용한 것 입니다.
<p>
<strong>HTML <code><blockquote></code> 요소</strong> (또는
<em>HTML 인용 블록 요소</em>)는 안쪽의 텍스트가 긴 인용문임을 나타냅니다.
</p><p>다음은 블록 인용구입니다.</p>
<blockquote
cite="https://developer.mozilla.org/ko/docs/Web/HTML/Element/blockquote">
<p>
<strong>HTML <code><blockquote></code> 요소</strong> (또는
<em>HTML 인용 블록 요소</em>)는 안쪽의 텍스트가 긴 인용문임을 나타냅니다.
</p>
</blockquote>인라인 인용구
<q>를 사용합니다.
인용
페이지에서 인용 출처를 화면에 나타나게 하고 싶다면 링크나 다른 적절한 방법을 통해 텍스트에서 볼 수 있게 만들어야 합니다.
<cite> 요소가 있지만 이는 인용되는 자료의 제목(예: 책 이름)을 포함하기 위한 것입니다. 그러나 <cite> 안에 있는 텍스트를 어떤 식으로든 인용 출처에 연결하지 못할 이유는 없습니다.
<p>
<a href="/ko/docs/Web/HTML/Element/blockquote">
<cite>MDN 블록 인용구 페이지</cite></a>에 따르면
</p>
<blockquote
cite="https://developer.mozilla.org/ko/docs/Web/HTML/Element/blockquote">
<p>
<strong>HTML <code><blockquote></code> 요소</strong> (또는
<em>HTML 인용 블록 요소</em>)는 안쪽의 텍스트가 긴 인용문임을 나타냅니다.
</p>
</blockquote>
<p>
인용구 요소 — <code><q></code> — 는
<q cite="https://developer.mozilla.org/ko/docs/Web/HTML/Element/q">
단락 나누기가 필요 없는 짧은 인용구를 위한 것입니다.
</q>
— <a href="/ko/docs/Web/HTML/Element/q"><cite>MDN q 페이지</cite></a>.
</p>약어
약어나 약어를 포함할 때는 처음 사용할 때 약어를 표시하는 <abbr>과 함께 해당 용어의 전체 내용을 일반 텍스트로 제공하세요.
사용자 에이전트에게 콘텐츠를 공지/표시하는 방법에 대한 힌트를 제공하는 동시에 모든 사용자에게 약어가 무엇을 의미하는지 알릴 수 있습니다.
약어 외에 확장어를 제공하는 것이 의미가 없고 약어 또는 약어가 상당히 단축된 용어인 경우에는 해당 용어의 전체 확장어를 title 속성의 값으로 제공합니다.
<p>
웹 문서를 구성하는 데는 하이퍼텍스트 마크업 언어인 <abbr>HTML</abbr>을
사용합니다.
</p>
<p>
제 생각에는 그린 <abbr title="목사">목사</abbr>가 전기톱으로 부엌에서 한 것
같아요.
</p>연락처 세부 사항 표시
<address> 요소를 이용해서 연락처 세부 정보를 표시할 수 있습니다.
위 첨자와 아래 첨자
<sup>과 <sub> 요소
컴퓨터 코드
<code>: 일반적인 컴퓨터 코드를 표시합니다.<pre>: 공백(일반적으로 코드 블록)을 유지하기 위해 사용합니다. 택스트 내에서 들여 쓰기 또는 초과 공백을 사용하면 브라우저가 이를 무시하고 렌더링 된 페이지에 공백을 표시하지 않습니다. 그러나<pre></pre>태그로 텍스트를 감싸면 공백이 텍스트 편집기에서 보는 것과 동일하게 렌더링 됩니다.<var>: 변수 이름을 명확하게 표시합니다.<kbd>: 컴퓨터에 입력 된 키보드 (및 기타 유형) 입력을 표시합니다.<samp>: 컴퓨터 프로그램의 출력을 표시합니다.
시간과 날짜 표시
계가 읽을 수 있는 형식(machine-readable)으로 시간과 날짜를 표시하기 위한 <time> 요소를 제공합니다.
<!-- Standard simple date -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- Just year and month -->
<time datetime="2016-01">January 2016</time>
<!-- Just month and day -->
<time datetime="01-20">20 January</time>
<!-- Just time, hours and minutes -->
<time datetime="19:30">19:30</time>
<!-- You can do seconds and milliseconds too! -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- Date and time -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- Date and time with timezone offset -->
<time datetime="2016-01-20T19:30+01:00">
7.30pm, 20 January 2016 is 8.30pm in France
</time>
<!-- Calling out a specific week number -->
<time datetime="2016-W04">The fourth week of 2016</time>