문자 콘텐츠

1. <ol>, <ul>, <li>

• 각 항목(<li>)의 정렬된 목록(<ol>)이나 정렬되지 않은 목록(<ul>)을 설정하는 태그입니다.

• ol과 ul 태그는 자식 요소로 li 태그만 포함할 수 있으며, li 태그는 ol, ul 태그를 자식 요소로 포함할 수 있습니다(li 태그안에는 ol, ul 이외에도 다른 태그들도 작성할 수 있다). 이는 중첩된 목록을 표현합니다.

• li 태그는 단독으로 사용할 수 없으며 ol이나 ul 태그의 자식 요소로만 사용합니다.

• 정렬된 목록(<ol>)의 항목 순서는 중요도를 의미할 수 있습니다.

1.1 <ol> </ol>

• 정렬된 목록을 설정(display: block;).

• 자식으로는 li 태그만을 가질 수 있습니다.

• 순서가 중요한 리스트 목록을 만들 때 사용합니다. 순서가 중요하지 않은 리스트 목록을 만들 때는 ul 태그로 목록을 마크업합니다.

• 속성	의미	값
  start	항목에 매겨지는 번호의 시작 값	숫자
  type	항목에 매겨지는 번호의 유형	1(기본값), a, A, i, I
  reversed	역순으로 항목을 매긴다	불린 속성

• start 속성의 기본값은 1입니다.

• reversed 속성의 값은 reversed이므로 값을 생략할 수 있습니다. 이런 속성을 불린 속성이라고 합니다. 불린 속성은 속성만 작성하면 동작하게 됩니다.

1.2 <li> </li>

• 항목을 설정하는 태그입니다(display: list-item;).

• li 태그는 단독으로 사용할 수 없으며, 반드시 ol이나 ul 태그의 자식으로 사용하는 태그입니다.

• 속성	의미	값
  value	항목의 순서를 설정	숫자

• value 속성으로 해당 항목의 순서를 명시적으로 설정할 수 있습니다. 이때 해당 li 태그 이하의 li 태그들의 순서가 다시 지정됩니다.

2. <dl>, <dt>, <dd>

• 용어(<dt>)와 정의(<dd>) 쌍들의 영역(<dl>)을 설정하는 태그입니다. 즉, 용어는 dt 태그로 용어에 대한 설명은 dd 태그로 설정하며, 용어와 용어의 설명 전체 집합은 dl 태그로 나타냅니다(display: block;).

• dl 태그는 dt와 dd 태그, div 태그만 자식 요소로 포함할 수 있습니다.
  dt, dd 태그는 단독으로 사용할 수 없고 반드시 dl 태그의 자식 요소로만 사용할 수 있습니다.

• 키(key)-값(value) 형태를 표현할 때 유용하게 사용합니다.
  즉, 해당 태그는 용어를 정의할 때, key-value로 정보를 제공할 때 사용할 수 있습니다.

• dt 태그를 작성하면 반드시 뒤에 설명을 의미하는 dd 태그를 작성해주어야 합니다.

---

<!-- 1. 용어: 정의 -->
<dl>
    <div>
        <!-- 용어 -->
        <dt>HTML<dt>
        <!-- 설명 -->
        <dd>HTML is ,,,<dd>
    </div>          
	<div>
        <!-- 용어 -->
        <dt>CSS<dt>
        <!-- 설명 -->
        <dd>CSS is ,,,<dd>
    </div>
</dl>

<!-- 2. key: value -->
<dl>
    <!-- key -->
    <dt>Name<dt>
    <!-- value -->
    <dd>KimDongHyun<dd>
    
    <!-- key -->
    <dt>Age<dt>
    <!-- value -->
    <dd>20<dd>
</dl>

3. <p> </p>

• 하나의 문단을 설정하는 태그입니다(display: block;).

• p 태그는 텍스트의 집합 뿐만 아니라 이미지나 입력 폼 등 서로 관련있는 콘텐츠를 담을 수 있습니다. 즉, 서로 연관성 있는 콘텐츠라면 p 태그의 Content로 작성 가능합니다.

• p 태그의 경우 기본적으로 한 줄의 간격으로 위와 아래에 여백에 존재하게 됩니다. 여백 또한 CSS의 margin 속성으로 변경이 가능합니다.

• 일반적으로 정보통신보조기기 등은 다음 문단으로 넘어갈 수 있는 단축기를 제공합니다.

• 주의할 점으로 p 태그의 Content로 block 요소를 작성할 수 없습니다. 만약 자식으로 block 요소를 작성하게 된다면 작성된 p 태그가 자동적으로 닫히게 됩니다. 즉, 자식으로 작성된 block 요소의 여는 태그 앞에 닫히는 p 태그가 작성된 것처럼 동작하기 때문에 p 태그 내 block 요소를 작성해서는 안됩니다.

4. <hr />

• 주제에 의한 문단의 분리를 위해 사용하는 태그입니다. 빈 태그로 사용합니다(display: block;).

• 대부분의 경우 수평선(border)으로 표시(표현적 관점)되나 의미적인 관점으로만 사용해야 합니다.

---

기본적으로 표시되는 수평선은 CSS를 통해 없앨 수 있습니다.

hr {
	border-style: none;
}

hr 태그는 눈으로 보면 선처럼 보이지만 hr 태그 또한 블록 요소이므로 사각형입니다. 그러므로 1px로 설정하면 실제로는 위, 아래 선이 합쳐 2px로 출력됩니다.

그러므로 1px로 출력하려면 다음과 같이 CSS를 작성합니다.

hr {
	border: none;
    border-top: 1px solid black;
}

hr 태그를 수평선을 만들기 위한 시각적인 용도로 사용해서는 안됩니다. 의미적인 관점(주제에 의한 문단 분리)으로만 사용해야 합니다.

5. <pre> </pre>

• 서식이 미리 지정된 텍스트를 설정하는 태그입니다(display: block;).

• 기본적으로 글꼴이 Monospace 계열로 표시됩니다(Monospace 글꼴이란 모든 글자의 가로 너비가 동일한 글꼴입니다).

• HTML 문서에서 텍스트에 공백을 여러 번 사용해도 한 번만 공백이 적용되어 페이지에 렌더링됩니다. 줄바꿈 또한 태그(<br />)로 설정하지 않으면 한 번의 공백으로 적용되어 페이지에 출력됩니다.

• pre 태그를 사용하면 우리가 작성한 여러 번 작성된 공백, 줄바꿈 등과 같은 것들이 그대로 적용되어 페이지에 렌더링됩니다. 즉, 우리가 원하는 서식, 양식을 그대로 출력하게 해주는 태그입니다.

6. <blockquote> </blockquote>

• 일반적인 인용문을 설정하는 태그입니다. 인용문이란 책이나 사이트 등에서 가져온 내용을 말합니다(display: block;).

• 속성	의미	값
  cite	인용된 정보의 출처 URL	URL

• 인용된 정보의 출처의 URL 경로를cite 속성을 통해 인용문의 URL을 작성할 수 있습니다.

• 출처가 사이트가 아닌 일반적인 텍스트(저자, 인물 등)인 경우<cite> 태그를 통해 인용된 정보를 작성해줍니다.