반응형
HTML <ul>
설명
<ul>: 비순서형 리스트 태그이다.
예시코드
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>SamSung</li>
<li>HYUNDAI</li>
<li>SK</li>
</ul>
</body>
</html>위의 코드를 실행해보면 옆에 동그란 점으로 리스트가 구성된 것을 알 수 있다.
여기서 <li>는 list를 뜻하며 추후에 나올 <ul>,<ol> 등 요소 안에 있어야 리스트가 만들어진다.
HTML <ol>
설명
<ol>: 순서형 리스트 태그이다.
<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>SamSung</li>
<li>HYUNDAI</li>
<li>SK</li>
</ol>
</body>
</html>위의 코드를 실행해보면 삼성, 현대, SK 옆에 1,2,3 순서대로 나와있는 리스트가 완성이 된다.
HTML <dl>,<dt>,<dd>
<dl>: 설명 리스트를 말한다.
<dt>: 설명 리스트에서 용어를 뜻한다.
<dd>: 설명 리스트에서 용어를 설명해준다.
<!DOCTYPE html>
<html>
<style>
dl {
font-size: 20px;
font-family: Courier;
}
</style>
<body>
<h2>An unordered HTML list</h2>
<dl>
<dt>KOREA</dt>
<dd>-SamSung</dd>
<dd>-LG</dd>
<dt>JAPAN</dt>
<dd>-SoftBank</dd>
<dd>-TOYOTA</dd>
</dl>
</body>
</html>위의 코드를 보면 설명 리스트 용어로 KOREA와 JAPAN이 오고 하위 리스트 설명으로 기업들이 오는것을 확인할 수 있다.
반응형
'웹프로그래밍 > HTML' 카테고리의 다른 글
| HTML 클래스 class (0) | 2023.09.04 |
|---|---|
| HTML 리스트 - Unordered Lists (0) | 2023.09.04 |
| HTML 단락과 <br>,<pre> 사용법 (0) | 2023.09.04 |
| HTML Headings 수직선 입력 방법 (0) | 2023.09.04 |
| HTML 테이블,셀 사용법 <table>, <th>,<td>, <tr> (0) | 2023.09.04 |
댓글