자주 사용되는 리스트 태그에 대해 알아봅시다.
※ 리스트 태그 : ul,li,ol
ul : unorder list 의 줄임말로써 순서가 없는 리스트입니다.
ol : order list 의 줄임말로써 순서가 있는 리스트입니다.
li : 리스트 태그이며 주로 ul 태그나 ol 태그와 같이 사용합니다.
<예제>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title>Insert title here</title> </head> <body> <p>메뉴 리스트</p> <ul> <li>라면</li> <li>떡볶이</li> <li>치킨</li> </ul> <p>나라 리스트</p> <ol> <li>대한민국</li> <li>중국</li> <li>러시아</li> </ol> <p>검색 사이트</p> <ol> <li><a href="http://naver.com" target="_blank">naver</a></li> <li><a href="http://google.com" target="_self">google</a></li> </ol> </body> </html> | cs |
메뉴 리스트를 보게 되면 ul 태그안에 li 태그를 사용합니다.
=> 순서가 없는 리스트를 만들겠다는 의미입니다.
나라 리스트를 보게 되면 ol 태그안에 li 태그를 사용합니다.
=> 순서가 있는 리스트를 만들겠다는 의미입니다.
검색 사이트를 보게 되면
a 태그안에 href 와 target 속성이 존재하게 되는데
href 속성은 link로 넘겨주고 싶은 사이트를 적으면 되고
target의 경우 _blank를 사용하게 되면 link로 넘길려는 사이트가 새롭게 생성됨
_self 를 사용하게 되면 자기가 보고 있던 사이트를 덮습니다.
<결과>
※ 리스트 태그 : dl,dt,dd
dl: definition list의 약자로, 사전처럼 용어를 설명하는 목록을 만들때 사용합니다.
dt: definition term의 약자로, 용어의 제목을 넣을때 사용합니다.
dd: definition description 의 약자로, 용어를 설명하는데 사용합니다.
<예제>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title>Insert title here</title> </head> <body> <dl> <dt>메뉴 리스트 </dt> <dd>라면</dd> <dd>국수</dd> <dd>비빔밥</dd> <dt>국가 </dt> <dd>북한</dd> <dd>미국</dd> <dd>한국</dd> </dl> </body> </html> | cs |
<결과>
'프로그래밍 강의 > HTML 과 CSS' 카테고리의 다른 글
| [HTML/CSS] Chapter6. 블록요소와 라인요소 (0) | 2018.09.14 |
|---|---|
| [HTML/CSS] Chapter5. Form 폼 태그!! (0) | 2018.09.14 |
| Chapter4. 테이블 태그!! (0) | 2018.09.06 |
| Chapter2. html 시작과 간단한 태그!! (0) | 2018.09.04 |
| Chapter1. Web 이란? (0) | 2018.09.04 |
