이번시간에는 이전에 다뤘던 폰트태그에 이어 목록태그에 대해서 다뤄볼 예정입니다.
목록태그
<ol>Ordered List : 순서가 있는 목록
(type 속성으로 글머리 기호를 변경할 수 있음)<ul>Unordered Lists : 순서가 없는 목록<li>Listed Item : 목록의 하위 항목
(ul,ol태그의 하위 항목으로 사용됨)<dl>Definition List : 정의목록, 사전처럼 용어를 설명하는 목록
( eg.A는 B이다 와 같이 key=value 형태로 사용)<dt>Definition Term : 정의되는 용어의 제목을 넣을때 사용<dd>Definition Description : 용어를 설명할 때 사용
주의사항
<dl>태그는 하나 이상의<dt>``<dd>쌍의 태그를 가져야함
(단<dt><dd>태그가 반드시 하나의 짝으로 지어져야 하는것은 아님)<li>,<dt>``<dd>태그는 하위태그로 존재해야하기 때문에 독립적으로 사용불가
(<li>태그는<ol>또는<ul>태그 안에,<dt><dd>태그는<dl>태그 안에 하위 태그로 존재)
실습
ol 태그
이제 나무위키의 계란후라이 조리법으로 목록태그 실습을 해보도록 하겠습니다.
먼저 <ol>태그를 생성한 후 목록에 있는 조리법을 복사해서 붙여넣기 해줍니다.
Tip
여기서 VS Code 내장기능에 대한 팁이 있는데요
ctrl+alt 를 누른 상태로 화살표를 아래로 내려주면 여러줄을 선택할 수 있게 됩니다.
이렇게하면 한번에 <li>태그를 생성할 수 있습니다 👍
제가 앞에서 실수를한게 있는데요 ol 태그는 순서가 있는 태그라 위와 같이 1,2,3.. 등의 순번을 제거하고 사용해줍니다.
이렇게 알아서 순서를 부여해주거든요
ul 태그
이제 순서가 없는 목록인 <ul>태그로 목록을 만들어볼건데요 여기서도 팁이 있습니다.
li*갯수와 같이 갯수를 입력하고 엔터를 누르면
이렇게 여러개의 <li>태그를 자동으로 생성해주는데요
이렇게 자동생성된 태그는 Tab키를 누르면 자동으로 다음 <li>태그로 넘어가는 기능도 사용할 수 있습니다.
dl, dt+dd 태그
dl 태그와 하위태그들은 하위태그를 나타내는 > 와 함께 dl>(dt+dd)*갯수 이런식으로 한번에 생성할 수 있습니다.
dl 태그의 dt,dd는 dt에 설명할 용어를 넣고 dd에 용어에 대한 설명을 넣는방식으로 아래와 같이 작성합니다.
<dl>
<dt>HTML</dt>
<dd>
Hyper Text Markup Language의<br />
약자로 웹 문서를 만들기 위한 <b>마크업</b>언어이다.
</dd>
<dt>CSS</dt>
<dd>
Cascading Style Sheets의<br />
약자로 HTML을 꾸미는 <b>스타일 시트</b>이다.
</dd>
<dt>JavaScript</dt>
<dd>
웹 페이지를 생동감 있게 동작시키기 위한<br />
<b>프로그래밍 언어</b>이다.
</dd>
</dl>
이러한 구조로 용어를 설명하는데 사용됩니다.
