책 씹어먹는 즐거움

CSS의 박스 모델을 알았으니 이제 HTML 요소의 전체 크기를 계산할 수 있다.

아래의 그림을 다시 보자. 

너무 기니까 간단하게 요약하면 다음과 같다. 

역시 너무 기니까 간단하게 요약하면 다음과 같다. 

그럼 실제 요소들의 높이와 너비를 직접 계산해보도록 하자.

문제 1) 다음 CSS로 설정된 <div> 요소의 너비와 높이를 계산해보자. 

위의 <div> 요소의 너비는 130px, 높이는 80px이다. 계산 형식은 아래와 같다.

문제 2) 다음 CSS로 설정된 <div> 요소의 너비와 높이를 계산해보자. 

위의 <div> 요소의 너비는 140px, 높이는 120px이다. 계산 형식은 아래와 같다.

문제 3) 다음 CSS로 설정된 <div> 요소의 너비와 높이를 계산해보자. 

위의 <div> 요소의 너비는 130px, 높이는 90px이다. 계산 형식은 아래와 같다.

문제 4) 다음 CSS로 설정된 <div> 요소의 너비와 높이를 계산해보자. 

위의 <div> 요소의 너비는 118px, 높이는 77px이다. 계산 형식은 아래와 같다.

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0056 HTML 요소(element)의 크기 계산하기.apkg

CSS에서는 HTML 요소 하나하나를 네모난 박스(box)로 취급한다. CSS는 HTML 요소가 문단, 제목, 블록 인용구, 리스트, 리스트 항목 등 어떤 요소이든 박스로 다루어지고 <em>과 같은 인라인 요소라고 해도 마찬가지로 박스로 취급한다.

따라서 CSS 박스 모델(box model)이란 HTML 요소가 어떤 모양의 박스(box)인지를 제시하는 모델이다. 그리고 이 박스 모델을 알아야 HTML 요소들의 레이아웃(layout), 크기와 간격 등을 섬세하게 조절할 수 있게 된다.

HTML 요소를 이루고 있는 박스는 마진(margin), 테두리(border), 패딩(padding), 그리고 내용(content)으로 아래의 그림과 같이 구성된다.

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0050 CSS 박스 모델(box model).apkg

<div>와 <span> 요소는 인접한 HTML 요소와 텍스트들을 묶는 역할을 하는 요소다. 인접한 요소들을 묶어 구분된 영역인 섹션을 만들어낸다는 점이 클래스 속성(class attribute)과 다르다. 

<div> 요소와 <span> 요소는 다른 HTML 요소들을 묶는 역할만 하기 때문에 보통 여러 요소들을 담는 용기(container)로 이해할 수 있다는 점에서 서로 거의 동일하다. 단지, <div> 요소는 블록 요소이고 <span> 요소는 인라인 요소라는 것이 서로 다를 뿐이다.

<div> 요소

<div> 요소는 HTML 문서에서 섹션이나 영역을 정의하는 블록 요소다.

<div> 요소에 아이디(id), 클래스(class) 속성(attribute) 등을 자유롭게 부여할 수 있다. 

다음과 같이 0049_div.html 파일을 만들어 <div> 요소를 실제 사용해보자. 

실행해보면 다음과 같이 2개의 섹션으로 나누어진 HTML 문서를 볼 수 있다. 

위의 사례에서 <div> 요소는 <h3>와 <p> 요소를 담고 있으며 아이디(id) 속성으로 구분되어 별도의 CSS를 적용하고 있다. 

<div> 요소에 담겨 있는 <h3>와 <p> 요소는 모두 <div> 요소에 적용된 CSS가 그대로 상속되어 적용되는 것을 확인할 수 있다.

<span> 요소

<span> 요소는 인라인 요소로 다른 인라인 요소나 텍스트들을 묶는 용도로 사용된다.

인라인 요소라는 점을 제외하면 <span> 요소는 <div> 요소와 동일하다. 

다음과 같이 0049_span.html 파일을 만들어 <span> 요소를 실제 사용해보자. 

실행 결과는 다음과 같다. 

위의 사례에서 <span> 요소의 내부에 텍스트와 <strong> 요소, <em> 요소 등이 중첩(nesting)되어도 문제없이 작동하는 것을 확인할 수 있다. 

<span> 요소도 <div> 처럼 아이디(id) 속성을 이용하여 CSS를 적용하고 있는데 <div>와 마찬가지로 아이디(id), 클래스(class) 속성(attribute) 등을 자유롭게 부여할 수 있다. 

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:   0049 div 요소와 span 요소.apkg

바로 앞의 0038 클래스(class) 속성 포스팅에서 클래스(class) 속성에 대해서 알아보았으니 이제 이를 간단하게 사용해보자. 

다음은 같이 전 세계의 주요 여행지들 중에서 가고 싶은 곳을 추려 가나다순으로 나열해 놓은 0039_1.html

실행한 결과는 다음과 같다. 

여행지를 찾기 좋게 가나다순으로 나열해 놓았지만 조금 심심해 보인다. 만일 여행지를 고른다면 각 여행지가 도시인지 아니면 아름다운 자연과 전통적인 문화를 즐길 수 있는 시골인지에 따라 다를 것 같다. 

따라서 일단 도시인 "urban"과 시골인 "rural"로 나누어 나타내고 싶다. 그렇다면 이를 어떻게 HTML 요소에 반영할 수 있을까?

단순히 HTML로만 만든다고 한다면 중첩된 목록(nested list)을 이용하여 전체 여행지들을 도시인 "urban"과 시골인 "rural"로 나누어 다음과 같이 만들어 볼 수 있을 것이다. 0039_2(중첩된목록).html 참조

그런데 이렇게 분류해보니 조금 부족해 보인다. 일단, 가나다순으로 나열하겠다는 원칙이 무너진 것도 그렇고, 시골(rural)인 곳도 3군데 밖에 없어 좋은 분류가 아닌 것 같다. 차라리 원래의 가나다순으로 돌려놓고 각각의 여행지들 별로 특색을 표시해보는 것이 좋을 것 같다. 

바로 이런 경우에 필요한 것이 클래스(class) 속성이다. 전체 여행지들을 urban 클래스(class)와 rural 클래스(class)로 분류하여 다음과 같이 0039_3.html을 만들어 보자. 

아직, CSS를 만들지 않았으므로 바로 다음과 같이 0039.css 파일을 작성하여 0039_3.html 파일과 같은 디렉터리에 저장한다.

CSS는 간단하게 도시(urban)는 파란색 글씨로, 시골(rural)은 녹색 글씨로 스타일을 적용해보았다. 

이제 실행해보면, 경주, 교토, 오사카의 글자색이 녹색(green)으로 바뀐 것을 확인할 수 있다. 

구별해놓고 보니 온통 파란색으로 여행지가 전부 도시(urban) 일색이다. 그렇다면 도시의 종류를 조금 나누어 보자. 도시 중에는 각국의 수도인 서울, 워싱턴 같은 곳들도 있고, 그저 번화한 도시인 곳들도 있다. 이번에는 각국의 수도에 경계선(boder)을 주어 다른 도시와 구별해보도록 하자. 

우선, 각국의 수도인 여행지는 "main" 클래스(class)에 속하도록 다음과 같이 0039_4.html 파일을 작성한다. CSS를 적용할 파일도 변경할 것이므로 <link /> 요소의 href 속성도 "0039_1.css"로 수정한다. 

그리고 다음과 같이 0039_1.css 파일을 작성하여 0039_4.html 파일과 같은 디렉터리에 저장한다. 

실행 결과는 다음과 같다.

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0039 클래스(class) 속성 사용해보기.apkg

이제 클래스(class)를 다루어보자. 

1. HTML에서 클래스(class)

클래스(class)는 요소(element)들을 특정 클래스(class)로 묶는 속성(attribute)이다. 

HTML에서 클래스(class) 속성(attribute)은 주로 동일한 클래스에 속한 요소들에게 동일한 스타일을 적용하는 용도로 사용된다. 

HTML 요소(element)에 클래스(class)를 부여하는 형식은 다음과 같다. 

실제 사용례는 다음과 같다.

클래스(class) 속성은 아이디(id) 속성처럼 모든 요소에 부가될 수 있는 전역 속성(global attribute)이므로 <p>와 <li>와 <h2> 요소 등 서로 다른 요소들이 동일한 클래스로 묶일 수 있다. 

그런데 이렇게 요소들을 클래스로 묶다 보면 하나의 요소가 여러 클래스에 속할 때가 있기 마련이다. 그런 경우 해당 요소의 클래스는 여러 개의 클래스명을 속성값으로 갖는다. 이런 경우에는 순서에 상관없이 클래스명을 공백으로 띄어서 구분해주기만 하면 된다. 

2. CSS에서 클래스(class)

CSS에서 클래스(class)에 따라서 요소를 선택하려면 요소와 클래스를 점(.)으로 이어 다음과 같은 형식으로 클래스 선택자를 만들면 된다. 

클래스(class)에 속한 요소 중에서 특정 요소만 선택할 경우에는 요소명.클래스명 형식으로 선택하고, 특정 클래스에 속한 요소들을 모두 선택할 경우에는 앞의 요소명을 생략하여 .클래스명 형식으로 작성하면 된다. 

실제 사용례는 다음과 같다.

클래스(class) 속성(attribute)은 아이디(id) 속성과 마찬가지로 대소문자를 가리므로 선택자를 작성할 때는 대소문자를 정확하게 기입해주어야 한다. 

3. 클래스(class)와 아이디(id)의 차이

아이디(id)와 클래스(class)는 모두 HTML 요소(element)들을 구분하고 분류하여 특정하는 용도로 사용되는 속성들이지만 두 가지 큰 차이점이 있다는 점을 다시 한번 상기하도록 하자. 

첫 번째는 아이디(id)는 요소 1개만 고유하게 특정하지만 클래스(class)는 여러 요소들을 묶는다는 것이다.

두 번째는 요소는 단 한 개의 아이디(id)만 가지지만 여러 개의 클래스(class)를 가질 수 있다는 점이다. 

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0038 클래스(class) 속성.apkg

앞서, 요소 선택자(element selector)를 이용하여 CSS 규칙을 요소에 적용시켜 보았다. 하지만 이러한 요소 선택자는 해당 요소들을 가리지 않고 일괄적으로 모두 선택하는 문제가 있다. 

다음과 같이 0037_1.html 파일을 작성하여 실행해보자.

이것을 실행하면 다음과 같이 나타난다. 

요소 선택자로 <p> 요소를 선택하여 스타일을 적용했기 때문에, 4개의 <p> 요소 모두 동일한 스타일의 적용을 받는다.

하지만 우리는 동일한 요소들에게 각각 서로 다른 스타일을 적용하고 싶다. 어떻게 해야 하나?

이때, 각각의 요소를 고유하게 만들어주는 아이디(id) 속성을 이용하면 된다. 

아이디(id) 속성에 대해서는 0019 HyperText 링크를 제공하는 앵커(anchor)의 a요소 01 사용법 및 href 속성에서 <a> 요소를 이용하여 특정 아이디(id)를 가진 요소로 이동할 수 있다는 내용으로 다룬바 있다. 

아이디(id) 속성(attribute)은 HTML 요소에 고유한 아이디(id)를 부여하는 속성이다. 따라서 그 속성상 당연히 하나의 웹페이지에서 각각의 아이디(id)는 중복되지 말고 고유해야 한다. 아이디(id)가 하나의 웹페이지에서 중복되면 웹 표준 위반이다. 

이러한 아이디(id) 속성을 이용하여 요소(element)가 고유해지면 CSS는 이 고유한 요소(element)를 선택하여 꾸미거나 필요한 작업을 수행할 수 있게 된다.

CSS에서는 특정 아이디(id)의 요소를 선택하기 위해서는 해쉬(#) 문자를 아이디(id) 속성값 앞에 붙여 해당 아이디(id)를 가진 요소를 선택하는 선택자를 만들 수 있다.

이제 다음과 같이 수정해서 0037_2.html보자. 

처음 작성한 0037.html 파일과 달리 각각의 <p> 블록에 아이디(id) 속성들이 주어졌고, 이러한 아이디(id)를 가진 요소를 선택하기 위하여 CSS에서는 #first, #second, #third, #fourth로 각각의 아이디(id) 속성을 가진 요소들에게 개별적으로 스타일을 적용하고 있다.

실행해보면 다음과 같이 동일했던 <p> 블록들이 각자 서로 다른 <p> 블록들로 나타난다.

아이디(id) 속성은 모든 HTML 요소에 사용할 수 있는 전역속성(global attribute)이다. 아이디(id)의 속성값은 최소 1개의 문자가 있어야 하며 스페이스나 탭 등의 공백(whitespace)은 허용되지 않는다. 이 때, 아이디(id)의 속성값은 대소문자를 가리므로 선택자를 작성할 때 주의해야 한다. 

2019. 1. 2일 아이디(id) 속성값에 대하여 다음과 같은 내용을 추가함. 

HTML 5 이후로 아이디(id) 속성값은 은 상기와 같은 규칙으로 바뀌었다고 W3C 튜토리얼에서 확인했으나 실제 아이디(id)를 숫자로 시작하거나 하이픈, 밑줄, 콜론, 마침표가 아닌 특수 문자를 쓸 경우 아이디(id) 속성이 작동하지 않는 것을 확인하고 아래와 같은 HTML 4.01 기준이 여전히 작동하고 있는 것을 확인함

다음은 아이디(id)의 속성값이 잘못 기입된 사례이다. 

아이디(id)와 비슷한 것으로 클래스(class)가 있다. 아이디(id)는 오직 하나의 고유한(unique) 요소를 식별하기 위하여 부여하는 속성이라면 클래스는 다양한 요소들을 묶어서 특정한 클래스(class)로 만들기 위한 속성이다. 클래스(class)에 대해서는 다음에 알아보도록 하자.

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:   0037 HTML 요소의 아이디(id) 속성과 CSS의 아이디(id) 선택.apkg

2019/01/02 1:19 AM 아이디(id) 속성값 작성 규칙 수정 및 Ankilog 파일 수정

이제 <link /> 요소에 대해서 알았으니 외부의 CSS 파일을 HTML 페이지에 링크하는 External 방식의 CSS 적용을 시도해보도록 하자. 

우선, 우리가 할 일은 HTML 문서를 만들고 해당 문서에 스타일을 적용하기 위한 외부의 CSS 파일을 만드는 것이다. 

우선 사용할 HTML 파일은 앞서 만든 0034_1.html과 거의 유사하지만 <head> 영역에 <style> 요소 대신에 다음과 같은 <link /> 요소를 넣어 0036.html 파일을 만들도록 하자.

0036.css 는 우리가 앞으로 만들 외부 CSS 파일 이름이다. 해당 파일을 만들고 0036.html 파일과 0036.css 파일을 같은 디렉터리에 두면 정상적으로 웹페이지에 스타일이 적용될 것이다. 

물론, <title> 요소를 수정하여 웹페이지 제목도 변경한다.

다음과 같이 0036.html을 작성해보자. 

<head> 영역 내의 <link /> 요소에서 외부 CSS 파일을 링크하고 있지만 아직 해당 CSS 파일이 만들어지지 않았으므로 어떤 CSS 규칙도 HTML에 적용되지 않은 상황이다. 실행 결과는 다음과 같다.

이젠 외부(external) CSS 파일을 만들 차례다. 

메모장이나 텍스트 에디터를 열어 다음과 같이 작성하고 0036.css 파일로 저장해보자(0036.html 파일과 같은 디렉터리에 두어야 한다.).

그리고 다시 0036.html을 새로고침 하거나 재실행해보면 그 결과는 다음과 같다. 

아래와 같이 CSS에서 주석(comment)을 다는 방법은 HTML과 다르다. 

위의 실행 결과에서 보듯이 주석은 웹페이지에 어떤 영향도 미치지 않는다. 그리고 여러 줄에 걸쳐서 주석을 달 수 있다. 

CSS의 border 속성(property)이 경계선을 주는 속성이라면 border-bottom은 밑줄을 주는 속성이다. 속성을 정의하는 방식은 border와 동일하다.

위의 boder-bottom 선언(declaration)으로 1픽셀 두께의 빨간 실선으로 밑줄이 생김

그리고 text-align 속성은 텍스트의 정렬을 설정한다. 속성값을 center로 하면 텍스트가 가운데로 정렬된다.

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0036 External 방식의 CSS 적용.apkg

선택자는 CSS의 규칙(Rule)에서 어떤 HTML 요소(element)에 규칙을 적용할지 지정하는 역할을 하는 것으로 CSS 뿐만 아니라 jQuery에서도 사용하고 있어 알아두면 매우 유용하다.

선택자는 요소의 이름, 아이디(id), 클래스(class), 속성(attribute) 등 그 외에 수많은 방식으로 HTML 요소(element)를 선택하지만 이번에는 가장 기본적인 요소 선택자(element selector)를 살펴보자. 

요소 선택자(element selector)는 요소의 이름으로 해당 요소를 선택한다. 가령, <p> 요소는 p로 <body> 요소는 body로 <h1> 요소는 h1으로 선택한다. 

규칙의 선택자를 요소로 하면 해당 웹페이지의 모든 요소들은 일괄적으로 CSS 규칙이 적용을 받는다. 동일한 요소에서 스타일을 다르게 하는 방법은 나중에 논하도록 하자. 

우선, 다음과 같이 0034_1.html을 작성해보자. 

<head> 섹션 내의 <style> 요소에는 어떤 CSS 규칙도 없는 상황이다. 실행해보면 다음과 같다.

CSS 규칙이 전혀 없어도 브라우저가 자체적인 기준으로 HTML 문서를 최소한으로 스타일링하고 있다. 즉, 글꼴(font)과 글자 크기 등이 설정되어 있다.

이번에는 요소를 선택하여 CSS 규칙을 적용해보자. 

HTML 문서에서 눈에 보이는 부분을 담당하는 영역인 <body>도 HTML의 요소이므로 이에 적용하는 CSS 규칙을 만들어 볼 수 있을 것이다. 그렇다면 요소 선택자는 body가 될 것이다. <style></style> 사이에 다음과 같이 넣고 이름을 바꿔 0034_2.html로 작성하여 실행해보자. 

위의 구문을 말로 옮기면 이렇다. <body> 요소에 배경색(background-color)은 검게(black), 글자색(color)은 하얗게(white), 글꼴(font-family)은 Arial로 적용한다.

0034_2.html 파일을 실행한 결과를 처음의 0034_1.html과 같이 놓고 비교해보았다.

<body> 요소가 보이는 영역 전체이므로 웹페이지의 모든 배경색이 전부 검게 칠해진다. <h1>, <h2>, <p> 요소 모두 배경색(background-color)이 검게(black) 칠해지고 글자색(color)은 하얗게(white) 글꼴(font-family)은 Arial로 변경되었다. 

이는 <body> 요소에 적용된 규칙이 <body> 요소 내에 중첩(nesting)된 <h1>, <h2>, <p> 요소들에게 상속되기 때문이다. 자세하게 살피면 상속되는 속성이 있고 상속되지 않는 속성이 있지만 일단, 위의 예문에서 <body> 요소에 적용된 규칙은 모두 상속되고 있다.

만일, 상속된 속성을 사용하지 않고 각각의 <h1>, <h2>, <p> 요소들을 <body> 요소와 다르게 스타일링을 하고 싶다면 해당 요소를 선택자로 가진 규칙을 작성하여 상속을 재정의 하면 된다. 

이번에는 <h1>, <h2>, <p> 요소에 CSS 규칙을 작성하여 <style></style> 사이에 다음과 같이 넣고 0034_3.html로 작성하여 실행해보자. 

실행 결과는 다음과 같다. 

<h1>과 <h2> 요소는 배경색(background-color)이 검은색에서 하얀색(white)으로 바뀌었고 글자색(color)은 흰색에서 검은색(black)으로 변했다. 글꼴(font)은 별도로 지정한 바가 없으므로 <body> 요소의 Arial을 그대로 유지하고 있다. 

<p> 요소는 배경색(background-color)이 노랗게(yellow) 바뀌었고 글자색(color)은 파랗게(blue) 변했으며 글꼴(font)은 serif로 변경되었다. 

즉, <body> 요소에 적용된 규칙이 <body> 요소 내부의  <h1>, <h2>, <p>에 적용된 규칙과 같은 속성(property)에서 서로 다른  속성값을 갖는 경우 각각의 요소에 적용된 규칙의 속성이 우선적으로 적용되는데 이것을 이용하여 상속을 재정의 한다.

위에서 <h1>과 <h2> 요소의 CSS 규칙이 동일하다. 이런 경우에는 다음과 같이 요소들끼리 쉼표로 구분하여 규칙을 한꺼번에 작성할 수 있다. 

CSS에서 border 속성(property)은 블록 주위에 경계선을 넣는 속성으로 다음과 같이 쓴다.

작성한 0034_4.html파일을 실행하면 다음과 같다. 

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0034 CSS 요소 선택자(element selector).apkg

HTML과 CSS는 서로 매우 긴밀하게 연계되어 있다. 따라서 HTML에서는 CSS 적용을 염두에 두고 요소(element)와 속성(attribute)을 만들어 두었고 CSS는 HTML의 구조 위에서 디자인을 하도록 설계되어 있어 서로 함께 공부해야만 이해할 수 있는 내용들이 많다. 따라서 앞으로 HTML과 CSS를 함께 다루기 위하여 지금 CSS의 기본 개념과 사용법을 익혀두고자 한다. 

CSS는 Cascading Style Sheets의 약자다. CSS를 이용하여 다양한 기기(device)의 서로 다른 크기의 화면에서 웹페이지의 디자인, 레이아웃(layout) 등  보이는 스타일을 설정할 수 있다.

그렇다면 왜 CSS를 쓰는가? 얼핏 생각하기에는 HTML에서 한꺼번에 처리하면 좋을 것 같은데, 갑자기 이질적인 새로운 형식의 언어를 배워서 웹페이지를 꾸며야 한다니 뭔가 이상하다.

우선, CSS의 등장 배경에 관해서는 다음과 같이 요약할 수 있다. 

HTML은 처음부터 웹페이지의 내용(content)를 구조화하기 위한 언어로 설계되었을 뿐 웹페이지의 디자인을 설정하기 위한 용도로 만들어진 언어가 아니고 그런 의도를 가진 적도 없다. 

당연히 HTML에서 스타일링을 하는 방식의 실험도 있었다. 가령, HTML 3.2에서 <font> 같은 태그가 표준명세에 첨가되었는데, 이런 방식은 거대한 웹 사이트에 속한 수많은 개별 웹페이지의 글꼴(font)과 색깔(color)을 일일이 설정해야 했기 때문에 개발과정은 길어지고 그에 따른 비용은 늘어났으며 해당 작업을 하는 웹 개발자들에겐 지루하고 힘든 악몽같은 경험을 선사하는 최악의 상황이 만들어졌다.

이런 문제들을 해결하기 위해서 W3C에서 CSS를 만들어 HTML 페이지에서 스타일 설정을 대체하도록 했고 덕분에  이제는 하나의 스타일 시트 파일(.css)을 수정하면 전체 웹 사이트의 비주얼을 세련되고 효과적으로 수정할 수 있게 되었다. 

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0032 CSS 소개.apkg

HTML에는 순서가 있는(ol), 순서가 없는(ul), 정의(description) 목록(list)이 있다. 앞서 순서가 있는 목록과 순서가 없는 목록은 다루었으니 이번에는 정의 목록(list)을 다룰 차례다.

정의 목록(description list)은 용어나 명칭을 그 설명과 함께 제시한 목록(list)를 말한다.

정의 목록(description list)은 <dl> 요소로 목록을 정의하고 <dt> 요소로 용어나 명칭을 정의하며 <dd> 요소에 구체적인 설명을 작성하게끔 되어 있어 함께 사용해야만 각자 제역할을 할 수 있도록 만들어졌다.

사용 형식은 아래와 같다.

다음과 같이 영단어의 내용을 정의 목록으로 만들어 0029.html

실행 결과는 다음과 같다. 

<dl>, <dt>, <dd> 요소 모두 블록 요소인 것을 알 수 있다. 

정의 목록이라는 명칭은 HTML 4.01까지 사용되던 definition list에서 나온 명칭이고 HTML 5부터는 definition list가 아니라 description list로 이름이 바뀌었다.

description list를 한국어로 단순 번역하면 서술 목록이나 설명 목록으로 번역하게 되는데 정의 목록이라는 말과 큰 차이가 없고 그 내용을 살펴보면 오히려 정의 목록이라는 말이 더 잘 어울리는 것 같다. 또, 여전히 많은 사람들이 이 목록 요소를 정의 목록이라고 부르고 있으므로 description list를 definition list에서와 동일하게 정의 목록이라고 지칭한다.

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:   0029 정의 목록(description list) 요소 다루기.apkg