웹문서에 다양한 내용 입력하기(2)
2022. 8. 11. 14:00ㆍ개인활동/HTML+CSS+JS
반응형
Do it! 한권으로 끝내는 웹 기본 교과서
HTML+CSS+JS 웹표준의 정석
으로 웹개발 공부 시작함.
목록 만들기
<ol>, <li>
- <ol> : order list의 줄임말로 <ol> 태그 사이에 <li>를 사용함, type 속성을 이용해 순서를 나타낼 방식을 정할 수 있음
start 속성을 이용해 몇번째 부터 시작할지 정할 수 있음
- <li> : list의 줄임말로 <ol> 태그 사이에 주로 사용함
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>목록 만들기</title>
</head>
<body>
<ol type="a">
<li>첫번째 목록</li>
<li>두번째 목록</li>
</ol>
</body>
</html>
<ul>, <li>
- <ul> : unordered list의 줄임말로 <ul> 태그 사이에 <li> 태그를 이용하면 bullet으로 목록을 나타냄
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>목록 만들기</title>
</head>
<body>
<ol type="a">
<li>첫번째 목록</li>
<li>두번째 목록</li>
</ol>
<ul>
<li>순서 없는 목록</li>
<li>순서 없는 목록2</li>
</ul>
</body>
</html>
<dl>, <dt>, <dd>
- <dl> : description list의 약자로, 한쌍의 <dt>, <dd> 태그를 넣음
- <dt> : 설명할 이름을 작성
- <dd> : 설명할 내용 작성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>목록 만들기</title>
</head>
<body>
<ol type="a">
<li>첫번째 목록</li>
<li>두번째 목록</li>
</ol>
<ul>
<li>순서 없는 목록</li>
<li>순서 없는 목록2</li>
</ul>
<dl>
<dt>설명하고 싶은 것</dt>
<dd>설명 중1</dd>
<dd>설명 중 2</dd>
</dl>
</body>
</html>
반응형
'개인활동 > HTML+CSS+JS' 카테고리의 다른 글
| 웹문서에서 다양한 내용 입력하기(4) (0) | 2022.08.17 |
|---|---|
| 웹문서에 다양한 내용 입력하기(3) (0) | 2022.08.17 |
| 웹문서에 다양한 내용 입력하기(1) (0) | 2022.08.10 |
| 시맨틱 태그 (0) | 2022.08.09 |
| 웹개발 시작하기 (0) | 2022.08.03 |