[HTML5 태그] 텍스트 태그와 목록태그 <ul>, <ol>, <dt>,<dd>

텍스트 태그는 블록 태그와 인라인 태그로 나눠진다. 블록으로 묶어서 처리하는 태그를 블록 태그라고 하는데 대표적으로 <hn>태그와 <p>태그, <br>태그 등이 있다. 반대로 인라인 태그는 줄바꿈 없이 택스트를 표시하는 태그인데, <strong>태그나 <q>, <mark>, <span>태그 등이 있다. 

 

특히나 인용태그인 <blockquote>태그는 들여쓰기로 표시가 된다. 코드를 살펴보자.

 

<blockquote>태그 사용

<blockquote>태그 적용 시 나타나는 웹화면

<blockquote>태그는 블록태그고, 같은 인용 태그인 <q> 태그는 인라인 태그다. 그래서 " 인용구 " 이런 식으로 적용이 된다. <mark>와 <span>태그는 text에 효과를 주고 싶을때 적용하는데, <mark>의 경우 형광팬 효과를 주며 CSS로 색깔 변경이 가능하다. 아니면, <mark style>을 사용해서 인라인태그로 적용할 수 있으나 요즘에는 권장하지 않는다고 한다. 이 부분은 다음 포스팅에서 상세히 다루어 보겠다.

 

무튼, 다음으로 목록 태그인데 목록 태그는 <ul>, <ol>, <dl> 태그 등이 있다.

먼저 <ul>태그는 순서가 없는 목록(unordered list)으로 리스트 태그의 디폴트값은 불릿(disc)이다.

 

<ul>태그 적용한 소스

<ul> 태그 적용했을 때 웹 브라우저 상 화면

<ul>태그는 위에서 알 수 있듯이 기본형은 아래와 같다.

 

<ul>       <li>내용</li>       <li>내용</li> </ul>

반대로 순서가 있는 목록은 <ol>태그인데, ordered list라고 보면 되고 <ol>은 <li>태그의 부모다. 

태그끼리 부모/자식/형제 및 자매 등이 있다는 내용을 목록 태그를 보며 대충 이해했다.(이제서야...?)

 

무튼 <ol>태그 예시를 보면,

 

<ol>태그 소스 적용

 

 

디폴트 값은 1이기 때문에 type으로 속성을 바꿀 수 있다. (숫자를 거꾸로 매기거나 영문으로 시작하게 하기 등)

참고로 <ul>태그와 <li>태그 사이에는 다른 태그를 사용할 수가 없다. 단, ul, li, ol, dt, dd태그만 가능하다. 

 

 

<dl>태그는 제목과 설명이 한 쌍인 설명 목록(description list)을 만든다고 할 수 있다.

기본 형은,

 

<dl>  　　<dt>제목</dt>  　　<dd>설명</dd> </dl

dt 태그는 제목을 나타내고 dd는 설명을 표시하는데 질문/답이나 단어/정의 등 목록을 만드는데 요긴하다.

dt와 dd는 형제라서 꼭 붙어 있어야 한다. 다만 하나의 st 태그에 dd태그가 여러개 들어갈 수 있고 여러개 dt태그가

나올 수도 있다. 

 

예제를 보자.

 

dl, dd, ul, li 태그 예제 - 웹화면

 

html 화면

일단 코드를 짤 때 가장 먼저 큰 구조를 보고 짜는게 중요한데, 한줄 한줄씩 짜다보면 결국 구조 전체가 무너진다고.....;;

짱 무서운 소리당. 무튼 큰 구조상을 보면, h1 제목이 있고 목록이 크게 4개가 있고 그 안에 설명목록이 1개, 1개, 1개, 4개가 있다. 

 

즉 1. 항목이 4개인 순서 없는 목록 --> 2. 설명글이 있는 목록 *3 ---> 3. 설명글이 4개가 있는 목록 으로 구조를 짜면 되겠다. 

 

그래서 큰 틀인 <ul> 태그 안에 <li>태그가 4개가 있고, 각각 <dt>태그인 제목과 <dd>태그로 설명이 들어가 있다. 

처음에는 제목에 dot이 들어가 있어서 li를 각각 주고 텍스트를 어디에다가 넣어야 할지 한참 고민했다.

dt는 비워두고 dd에만 텍스트를 입력하기도 하고 dt태그에만 텍스트를 넣기도 했는데, 구조가 어그러져서 도대체 뭔가... 하다가 li태그는 dt와 dd 태그의 부모로, 영향을 주니깐 dot이 dt에 붙겠구나 싶어 다시 짜보니 정답스! 

 

ㅎ ㅏ.....  

 

내가 말하면서도 정리가 되어야 하는데 글로쓰니까 도대체 뭔 말인지 모르겠구먼.........

 

무튼 어렵다...어려워...