0029 정의 목록(description list) 요소 다루기


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

    

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

     

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

   

dl = description list

dt = description term

dd = description description


사용 형식은 아래와 같다.

     

<dl>

 <dt>설명이 필요한 용어나 명칭</dd>

  <dd>용어나 명칭에 대한 설명을 서술</dt>

 <dt>설명이 필요한 용어나 명칭</dd>

  <dd>용어나 명칭에 대한 설명을 서술</dt>

</dl>


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

   

<dl>

 <dt>description /dɪˈskrɪpʃən/</dt>

  <dd>기술하기</dd>

  <dd>서술하기</dd>

 <dt>definition /dèfəníʃən/</dt>

  <dd>정의</dd>

  <dd>한정</dd>

  <dd>선명도</dd>

</dl>


실행 결과는 다음과 같다. 



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

    

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

    

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


Anki 파일


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


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






저작자표시 비영리 변경금지

'Anki로 공부하기 > HTML공부' 카테고리의 다른 글

0031 약어(character entity)로 특수문자 표시하기  (0) 2018.12.03
0030 HTML 주석(comment) 달기  (0) 2018.12.02
0028 HTML 순서가 있는(ordered) 목록의 글머리 기호 바꾸기  (0) 2018.11.30
0027 HTML 순서가 없는(unordered) 목록의 글머리 기호 바꾸기  (0) 2018.11.29
0026 HTML 목록(list) 요소 만들기  (0) 2018.11.28

0028 HTML 순서가 있는(ordered) 목록의 글머리 기호 바꾸기


순서가 있는(ordered) 목록은 개별 항목(item)들이 순서대로 나타나므로 글머리 기호도 어떤 순서가 있는 숫자나 알파벳이 기호가 되어야 한다. 따라서 디폴트로 설정되어 있는 글머리 기호도 숫자(1. 2. 3. 4. ...)인 것이다.

      

순서가 있는(ordered) 목록의 글머리 기호는  순서가 없는(unordered) 목록과는 달리 CSS를 이용하지 않고 <ol> 요소의 type 속성(attribute)을 이용하여 글머리 기호를 바꾼다. 

      

다음과 같은 형식으로 작성한다. 

    

<ol type="속성값">

  <li>항목들(items)</li>

   …

</ol>


type 속성(attribute)의 속성값 변화에 따른 개별 항목의 글머리 기호는 다음과 같다.

    

type="1" → 숫자(1. 2. 3. …) (기본 설정)

type="A" → 알파벳 대문자(A. B. C. …)

type="a" → 알파벳 소문자(a. b. c. …)

type="I" → 로마자 수 대문자(Ⅰ. Ⅱ. Ⅲ. Ⅳ. …)

type="i" → 로마자 수 소문자(ⅰ. ⅱ. ⅲ. ⅳ. …)


하나하나 사용해보자. 



순서가 있는(ordered) 목록에서는 <ol> 요소에 start 속성을 사용하여 목록의 글머리 기호가 어떤 숫자로 시작하는지 설정할 수 있다. 

     

<ol type="속성값" start="숫자">

<li>항목들(items)</li>

…

</ol>


사용례는 다음과 같다. 



위에서 제시한 HTML 사례는 0028.html로 작성하였으니 참조하기 바란다.


Anki 파일


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


Ankilog 파일:  0028 HTML 순서가 있는(ordered) 목록의 글머리 기호 바꾸기.apkg






저작자표시 비영리 변경금지

'Anki로 공부하기 > HTML공부' 카테고리의 다른 글

0030 HTML 주석(comment) 달기  (0) 2018.12.02
0029 정의 목록(description list) 요소 다루기  (0) 2018.12.01
0027 HTML 순서가 없는(unordered) 목록의 글머리 기호 바꾸기  (0) 2018.11.29
0026 HTML 목록(list) 요소 만들기  (0) 2018.11.28
0025 HTML style 속성(attribute) 및 배경색 설정  (0) 2018.11.27

0026 HTML 목록(list) 요소 만들기


메뉴나 물건 리스트처럼 종종 리스트나 목록을 쓰는 경우가 있다. 그런 경우 그냥 <p> 요소로 리스트를 나열해서 보여줄 수 있지만 적합한 구조에 맞는 요소를 선택해서 사용해야 한다는 HTML의 마크업적인 측면을 고려하면 목록(list)에 맞는 요소를 사용해주어야 한다. 

    

HTML의 목록은 순서가 있는 목록(ordered list)과 순서가 없는 목록(unordered list)의 두 가지가 있다. 그리고 목록에 속하는 개별 항목(item)들은 <li>요소로 만든다. 

    

순서가 없는 목록 → <ul></ul>

순서가 있는 목록 → <ol></ol>

개별 항목(item) → <li></li>


실제로 작성할 때는 다음과 같은 형식으로 작성한다.

    

<ol> or <ul>

 <li>항목(item)</li>

 <li>항목(item)</li>

 <li>항목(item)</li>

</ol> or </ul>


순서가 없는(unordered) 목록을 작성한 것은 다음과 같다. 



순서가 있는(ordered) 목록은 다음과 같이 작성한다. 


<ol>, <ul>, <li> 모두 줄바꿈(linebreak)이 있는 블록 요소이므로 각각 독립적으로 배치된다. 

    

<ol> 요소는 목록(list)의 앞에 목록 번호가 순서대로 주어지고 <ul> 요소는 목록(list)의 앞에 순서가 없는 글머리 기호가 붙는다.

    

<li> 요소는 각 항목을 식별하는 데 사용되며, <ol>이나 <ul> 요소는 그 항목들을 묶는 데 사용되는 것으로 반드시 같이 사용되어야 한다. 

    

<ol>이나 <ul> 요소 안에 다른 요소를 넣고 싶다면 아래와 같이 <li> 요소 안에 중첩시켜 넣어야 하고 <li> 요소가 아닌 텍스트나 다른 요소를 넣지 말아야 한다. 

    

<ol> or <ul>

 <li><strong>항목(item)</strong></li>

 <li><em>항목(item)</em></li>

 <li><a href="URL">항목(item)</a></li>

 <img src="sun.jpg" /> 

</ol> or </ul>


물론, 목록(list)를 아래와 같이 중첩해서 넣을 수는 있다. 이런 것을 중첩(nested) 목록이라고 한다.


목록을 중첩할 경우에는 내부에 중첩된 목록이 각각 하나의 <li> 요소 안에 중첩되는 것을 주의해야 한다. 


위에서 제시한 HTML 들은 0026.html로 작성하였으니 참조하기 바란다.


Anki 파일


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


Ankilog 파일:   0026 HTML 목록(list) 요소 만들기.apkg





저작자표시 비영리 변경금지

'Anki로 공부하기 > HTML공부' 카테고리의 다른 글

0028 HTML 순서가 있는(ordered) 목록의 글머리 기호 바꾸기  (0) 2018.11.30
0027 HTML 순서가 없는(unordered) 목록의 글머리 기호 바꾸기  (0) 2018.11.29
0025 HTML style 속성(attribute) 및 배경색 설정  (0) 2018.11.27
0024 블록(block) 요소와 인라인(inline) 요소  (0) 2018.11.26
0023 HTML에서 인용하기(Quotation)  (0) 2018.11.25

0025 HTML style 속성(attribute) 및 배경색 설정


스타일링이라 함은 폰트, 크기, 테두리, 색깔 등을 이용하여 예쁘게 꾸미는 것을 말하고 HTML 문서를 스타일링 할 때는 CSS(Cascading Style Sheet)라는 별도의 언어체계를 이용한다.

    

이 때,  HTML의 개별 요소(element) 하나를 CSS를 이용하여 꾸미고 싶을 때에는 style 속성을 사용하면 된다.

   

HTML의 style 속성은 다음과 같은 구문으로 사용된다. 

    

<태그명 style="속성:속성값;">


위 구문에서 속성은 CSS에서 사용하는 속성(property)이고, 속성값도 CSS에서 사용하고 있는 속성값(value)이다. 즉, style 속성은 개별 요소에 CSS를 적용하기 위한 속성인 것이다. 

    

따라서 이 style 속성을 다루면서 익히게 될 속성(property)과 속성값(value)은 모두 CSS에서도 그대로 사용할 수 있다.

    

또, 당연히 style은 모든 요소에 적용할 수 있는 전역 속성(global attribute)이다.

    

추후에 CSS를 공부하면서 상세하게 다룰 내용이지만 참고적으로 간단히 언급하면 CSS를 적용하는 것은 아래와 같이 세 가지 방법이 있는데 그 중 마지막 방법이 이 style 요소를 사용하는 방법이다.

    

하나는 <head> 요소 내부에 중첩된 <style> 요소에 CSS를 작성하는 것이다. 

둘은 <link> 요소를 이용하여 외부에서 CSS 파일을 불러 읽는 것이다.

마지막은 개별 요소에 style 속성을 부가하여 CSS를 이용하는 것이다.


보통 첫 번째와 두 번째 방법으로 CSS를 사용하지만 이러한 방법은 일괄적으로 HTML 페이지의 스타일을 설정하기 때문에 이에 대한 예외적인 스타일이 적용되어야할 요소(element)들은 개별 요소에 style 속성을 이용하여 CSS를 부여하기도 한다(이는 CSS 상속과 적용 범위의 문제이므로 나중에 다시 보도록 하자.).

    

앞서 0017 이미지를 보여주는 img 요소 02 대체할 문구 및 크기 결정에서 <img> 요소의 크기를 style 속성으로 결정하는 예문을 아래와 같이 다루면서 최근 style 속성을 사용하여 이미지의 크기를 결정하는 이유를 CSS 스타일 시트에서 일괄적으로 이미지의 크기를 조작할 때 그 적용을 피하기 위해서라고 언급한 바 있는데 이것이 바로 위와 같은 이유이다.

    

<img src="sun.jpg" style="width:100px;height:100px" alt="떠오르는 태양" />


위의 예문에서 style 속성으로 CSS 속성인 width와 height를 이용하고 있고 속성값으로 픽셀수(px)를 이용하고 있다. 



배경색(Background Color)


HTML 요소의 배경색을 결정하는 CSS 속성은 background-color 속성이다. 요소의 배경색을 이용하여 앞서 공부한 블록 요소와 인라인 요소의 차이점을 다시 한번 살펴보자.

       

background-color 속성은 다음과 같이 사용한다.

     

<태그명 style="background-color:색상이름;">


색상이름은 red, blue, purple, yellow, white, black, powderblue 등 영문의 색상이름이 그대로 적용되고 더 디테일한 색상을 다룰 때에는 색상의 일련번호로 집어넣을 수도 있다.


다음과 같이  0025.html 파일을 만들어 실행해보자.


<!DOCTYPE html>

    

<html>

<head><title>배경색</title></head>

<body style="background-color:black;">

<h1 style="background-color:red;">h1 요소</h1>

<p style="background-color:white;"> 

  p요소<br />

 <strong style="background-color:yellow;">중요한 텍스트</strong><br />

 <em style="background-color:purple;">강조 텍스트</em><br />

  a 요소 <a href="https://deliciouslearning.tistory.com/" style="background-color:blue;">책 씹어먹는 즐거움</a>

</p>

</body>

</html>


<body> 요소에 중첩된 각각의 요소에 전부 배경색을 다르게 설정해보았다. 그리고 실행해보면 다음과 같이 나타난다. 



블록 요소와 인라인 요소에 따라서 배경색이 다르게 설정되어 있는 것을 알 수 있다. 블록 요소는 해당 행의 가로폭을 전부 차지하는 요소이므로 실제 내용이 얼마 안되더라도 해당 행의 전체에 배경색이 칠해진다. 반면, 인라인 요소는 배경색이 꼭 필요한 부분으로 한정되는 것을 알 수 있다. 

    

CSS에서 사용하고 있는 다양한 속성과 속성값을 이 자리에서 전부 살펴보는 것은 적합하지 않은 것 같다. 우선 배경색만 살펴보고. 또, 다른 요소들을 다루면서 관련된 스타일 속성은 그때그때 알아보도록 하자.


Anki 파일


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


Ankilog 파일:  0025 HTML style 속성(attribute) 및 배경색 설정.apkg





저작자표시 비영리 변경금지

'Anki로 공부하기 > HTML공부' 카테고리의 다른 글

0027 HTML 순서가 없는(unordered) 목록의 글머리 기호 바꾸기  (0) 2018.11.29
0026 HTML 목록(list) 요소 만들기  (0) 2018.11.28
0024 블록(block) 요소와 인라인(inline) 요소  (0) 2018.11.26
0023 HTML에서 인용하기(Quotation)  (0) 2018.11.25
0022 HTML로 글자의 형식 정하기  (0) 2018.11.23

0024 블록(block) 요소와 인라인(inline) 요소


이제 기본적인 태그와 요소들에 대해서 상당수 알게 되었다. 그런데 요소들 화면에 표시할 때 브라우저가 하는 특이한 행동 하나가 눈에 띈다. 그것은 <body> 요소에서 <h1~6>요소, <p>, <blockquote> 요소들은 브라우저가 화면에 표시할 때 반드시 줄바꿈(linebreak)이 앞뒤로 나타나 행 전체를 차지한다. 반면, <img>, <a>, <strong>, <em>, <q> 등의 요소들은 줄바꿈 없이 나타나 행 전체를 차지하지 않고 딱 해당 요소의 내용이 차지하는 공간만큼만 공간을 차지한다. 

    

요소(element) 중에서 화면에 표시(display)될 때 항상 새로운 행에서 시작하고 요소가 위치한 가로폭을 전부 차지하는 요소를 블록(block) 요소라고 하고 새로운 행에서 시작하지 않고 딱 요소의 내용이 차지한 가로폭만큼만 차지하는 요소를 인라인(inline) 요소라고 한다. 그리고 모든 HTML 요소는 화면표시(display)를 함에 있어 블록 요소인지 인라인 요소인지가 기본값으로 설정되어 있다. 

    

가령, 다음처럼  0024.html파일을 만들어 보자.

    

<!DOCTYPE html>

    

<html>

<head><title>Block과 inline</title></head>

<body>

<h1>h1 요소</h1>

<p>

  단락을 결정하는 p요소는 위 아래로 줄바꿈이 발생한 것을 확인할 수 있다. 

 (줄바꿈)을 했지만 브라우저에는 줄바꿈을 하지 않은 것으로 나타난다. 한편 <strong>중요한 텍스트</strong>, <em>강조 텍스트</em>를 사용해도 줄바꿈은 일어나지 않고 있다. img <img src="sun.jpg"> 요소를 집어넣으면 어떨까? 하이퍼텍스트 링크인 a요소를 이렇게 넣어보자. <a href="https://deliciouslearning.tistory.com/">책 씹어먹는 즐거움</a> 이처럼 줄바꿈이 일어나지 않는 것을 확인할 수 있다. 하지만 다시 <p>p요소를 내부에 중첩킨 것</p>은 줄바꿈이 일어나는 것을 확인할 수 있다. 

</p>

</body>

</html>


<img> 요소로 웹페이지에 넣을 사진은 다음과 같다. 



그럼 다음과 같이 나타난다. 




위에 보이는 것처럼 블록 요소는 항상 앞과 뒤에 줄바꿈를 가진 것처럼 표시되며, 인라인 요소는 웹페이지에 있는 텍스트의 흐름에 포함되어 ‘라인 위에(in line)’ 나타난다.

    

블록 요소와 인라인 요소의 구분이 상당히 중요한 것 같다. 어떤 요소들은 구조적으로는 동일한 구조적 기능을 하지만 블록 요소와 인라인 요소라는 차이점만 존재하는 것 같은 요소들이 있다. 가령 앞서 0023 HTML에서 인용하기(Quotation)에서 공부한 <blockquote>와 <q> 요소는 인용구를 블록 요소로 할 것인가 인라인 요소로 할 것인가 하는 부분이 가장 핵심적인 차이로 보인다. 

    

또, 앞으로 CSS와 함께 정말 자주 사용하게 될 <div>와 <span> 같은 요소들은 HTML문서에서 섹션을 나누고 해당 섹션의 요소들을 묶는 컨테이너(container) 같은 기능만 하는 요소들인데 이 둘의 차이점은 오직 <div>는 블록 요소이고 <span>은 인라인 요소라는 것뿐이다.

    

그렇다면 왜 요소들을 블록과 인라인으로 구분하는 것이 중요한 것일까?

    

여기저기 뒤져본 결과로 개인적으로 추론해본건대, HTML 개발하면서, 블록 요소로 전체 윤곽(lay out)을 구성하고 인라인 요소로 페이지를 세련되게 다듬는 식의 웹페이지 구축 방법론을 채택한 것으로 보인다. 


그리고 블록 요소와 인라인 요소라는 특성 때문에 HTML에 다음과 같은 규칙들이 생기게 되었다.

    

거의 대부분 블록 요소는 내부에 블록 요소를 중첩(nesting)시킬 수 있다. 

거의 대부분의 인라인 요소는 인라인 요소를 내부에 중첩시킬 수 있다. 

거의 대부분 블록 요소는 내부에 인라인 요소를 중첩시킬 수 있다. 

하지만 인라인 요소는 내부에 블록 요소를 중첩시킬 수 없다.


또, CSS로 블록 요소와 인라인 요소를 스타일링 할 때 사용할 수 있는 속성들이 다르다. 이 부분은 추후 CSS를 다루면서 다시 다루도록 하자. 일단, 지금은 블록 요소와 인라인 요소가 있고, 웹페이지 구축 방법론으로 블록 요소로 전체 윤곽(lay out)을 구성하고 인라인 요소로 페이지를 세련되게 다듬는 방식을 채택했다는 점, 그리고 인라인 요소 내부에 블록 요소를 중첩시킬 수 없다는 점을 기억해 두도록 하자.


Anki 파일


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


Ankilog 파일:  0024 블록(block) 요소와 인라인(inline) 요소.apkg





저작자표시 비영리 변경금지

'Anki로 공부하기 > HTML공부' 카테고리의 다른 글

0026 HTML 목록(list) 요소 만들기  (0) 2018.11.28
0025 HTML style 속성(attribute) 및 배경색 설정  (0) 2018.11.27
0023 HTML에서 인용하기(Quotation)  (0) 2018.11.25
0022 HTML로 글자의 형식 정하기  (0) 2018.11.23
0021 HyperText 링크를 제공하는 앵커(anchor)의 a요소 03 target 속성  (0) 2018.11.22

+ Recent posts

티스토리툴바