목록 관련요소
XHTML에서 사용할 수 있는 목록의 종류에는 ul,ol,dl 요소등이 있다.
목록은 웹 문서의 다양한 콘텐츠를 마크업 하기 적당한 요소로 유용하게 사용되며
비순서형 목록(ul), 순서형 목록(ol), 정의형 목록(dl)으로 구분된다.
ul 요소는 순서가 중요하지 않은 콘텐츠에 적절하며,
ol 요소의 경우에는 순서가 중요한 콘텐츠에 사용한다.
예를 들어 DIY에 관련된 내용을 마크업 할경우 상품은 ul요소,
DIY 조립 순서는 ol요소로 마크업 하는 것이 좋다.
1.비순서형 목록(ul)
비순서형 목록을 마크업할 때 사용하는 ul 요소의 형식은 아래와 같다.
형식
<ul>
<li>목록항목</li>
</ul>
예시)
<head>
<title>비순서형 목록</title>
</head>
<body>
<h1>DIY 공구종류<h2>
<ul>
<li>충전전동드릴</li>
<li>해머드릴</li>
<li>드릴비트</li>
</ul>
</body>
</html>
2.순서형 목록(ol)
순서형 목록을 마크업할 때 ol요소의 사용 형식은 아래와 같다.
형식
<ol>
<li></li>
</ol>
예시)
<head>
<title>순서형 목록</title>
</head>
<body>
<h1>DIY 셀프 페인트 인테리어 시공순서<h2>
<ol>
<li>보양작업</li>
<li>퍼티/젯소 작업</li>
<li>페인트칠 작업</li>
<li>보양 제거 작업</li>
</ol>
</body>
</html>
※주의 사항: 중첩 형식의 하위 목록을 마크업 할 경우 ul요소나 ol요소의 자식요소로는 li요소만 올 수 있고
직접적으로 ul요소나 ol요소가 올수는 없다.
li요소의 자식 요소는 목록요소나 다른 블록 요소를 포함 할 수 없다.
3.정의형 목록(dl)
dl은 "Definition List"의 약자로 용어 정의 리스트를 생성할 때 사용한다.
최근에는 웹 표준의 적용으로 의미있는 콘텐츠에 대해 관심이 많아지고 있는데,
dl요소를 이용한 콘텐츠 마크업은 정의형 목록, 주종관계가 성립되는
콘텐즈에 광범위하게 사용할 수 잇다는 장점이 있다.
형식
<dl>
<dt>용어 제목</dt>
<dd>용어 설명</dd>
</dl>
2. 텍스트 관련 요소
텍스트 관련 요소는 강조(Strong & em), 인용문(blockquote & q), 축약어 및 두문자어(abbr & acronym),
추가글 및 삭제글(ins & del), 첨자(sup & sub) 이 있다.
1) 강조(Strong & em)
단락의 내용 중에서 강조하려는 콘텐츠를 마크업 할 때는 strong 요소와 em요소를 사용할 수있는데
strong 요소는 강한 강조를
em요소는 강조의 의미를 갖는다.
일부 화면 낭독기의 경우 강조 관련 요소로 마크업한 콘텐츠는
좀 더 크게 읽어주거나 두번 반복해서 읽어주기도 한다.
형식
<p>텍스트<em>강조할 텍스트</em></p>
<p>텍스트<strong>강조할 텍스트</strong>텍스트</p>
2) 인용문(blockquote & q)
블록 단위의 인용문이나 문장 형태의 짧은 인용문의 경우 blockquote 요소와 q요소를 이용할 수 있다.
blockquote 요소는 블록 요소만 포함할 수 있고 q는 인라인 요소와 텍스트를 포함할 수 있다.
인용문의 경우 출처를 명시하려고 할때 cite속성으로 인용한 곳을 지정할 수 있다.
특히 q요소를 사용할 경우 웹 표준을 지원하는 웹브라우저에서 인용의 표현으로 따옴표가
함께 표시된다.(인터넷 익스플로러 7이하는 지원하지 않음.)
형식
<blockquote cite="출처">
<p>블록 인용구</p>
</blockquote>
<p> 텍스트 <q cite="출처">인라인 인용구</q> 텍스트</p>
3) 축약어 및 두문자어(abbr & acronym)
abbr과 acronym 요소는 축약어(abbreviation) 및 두문자어(initial letter)를 마크업할 때 사용하는
요소이다. abbr 요소는 WWW(World Wide Web)처럼 스펠링을 하나씩 발음하는 경우나
Apt.처럼 줄여서 단어의 자음이나 모음만 맞추는 등 긴 단어를 줄여서 사용하는 것을 말한다.
두문자어인 acronym 요소는 축약어인 abbr 요소와 비슷하지만, 여러 개의 단어들로
이루어진 문장 또는 복합 단어의 앞글자만 따서 줄여 사용하는 것을 말한다.
예를 들어 "Random Access Memory"를 RAM이라고 발음하는 경우에 해당한다.
한국말로 두문자어를 표현할때는 전교조(전국 교직원 노동조합)등의 예가 있다.
형식
<p> <abbr title="World Wide Web">WWW</abbr></p>
<p> <acronym title="Web Content Accessibility Guidelines>WCAG</acronym></p>
4) 추가글 및 삭제글(ins & del)
추가글을 마크업하고자 할 때는 ins 요소를
삭제글을 마크업할 때는 del 요소를 사용한다.
ins 요소와 del 요소의 경우 블록 콘텐츠 단위로 추가하거나 삭제할 때, 인라인 콘텐츠 단위로
추가하거나 삭제할 때 모두 사용할 수있다는 특징이 있다.
형식
<p><ins>추가 콘텐츠</ins><p>
<p><del>취소 콘텐츠</del><p>
5) 첨자(sup & sub)
X의 제곱처럼 윗첨자로 표현해야 하는 텍스트는 sup 요소를 사용하고
H2O처럼 아랫첨자로 표현해야 하는 텍스트는 sub요소를 사용한다.
형식
<p>X<sup>2</sup> </p> ←윗 첨자의 경우
<p>H<sub>2</sub>O </p> ←아랫 첨자의 경우
'Web' 카테고리의 다른 글
| 폼의 정의 및 구성요소 (0) | 2020.05.28 |
|---|---|
| 테이블 관련요소 (0) | 2020.05.28 |
| CSS란?(feat.Acid Test) (0) | 2020.05.28 |
| 링크와 이미지 요소 (0) | 2020.05.28 |
| 웹(WWW)서비스란? (0) | 2020.05.28 |
댓글