2일차(1) : <ul>, <ol>, <dl>
<ul 예제>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ul.html</title>
</head>
<body>
<h1>순서 없는 목록(unordered list) ul 요소</h1>
<h2>친구 목록 입니다.</h2>
바나나 <br>
딸기 <br>
복숭아
<h2>바로가기 목록 입니다.</h2>
<a href="https://daum.net">daum</a> <br>
<a href="https://naver.net">naver</a> <br>
<a href="https://gmarket.co.kr">gmarket</a>
<p>
어떤 목록을 나타낼때 문자열을 단순히 나열하는게 아니고
아래와 같이 구조화를 해서 나열해야 한다.
</p>
<h2>친구 목록 입니다.</h2>
<ul>
<li>바나나</li>
<li>딸기</li>
<li>복숭아</li>
</ul>
<h2>바로가기 목록 입니다.</h2>
<ul>
<li><a href="https://daum.net">daum</a></li>
<li><a href="https://naver.com">naver</a></li>
<li><a href="https://gmarket.co.kr">gmarket</a></li>
</ul>
</body>
</html>- <ul> (unordered list) : 순서 없는 목록
- br을 사용해서 단순히 나열할 수도 있지만,
의미가 있게끔, 구조를 갖추어 나열하는 것이 중요함.
- <ul>은 리스트를 만드는 요소, <ul>은 자식 요소로 <li>를 갖는다.
- 문자(text)뿐만 아니라 다른 요소(other element)(<a> 등)도 목록이 될 수 있다.
- html의 기본 list 스타일은 세로형이나, css를 통해 수정할 수 있다.
<ol 예제>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step06_ol.html</title>
<style>
/* 원한다면 기본 스타일을 변경할 수 있다. */
ol{
list-style-type: none;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
}
ol li{
/* 왼쪽으로 띄우면 한줄로 표시할 수 있다.*/
float: left;
padding-right: 10px;
}
</style>
</head>
<body>
<h1>순서 잇는 목록(ordered list) ol 요소</h1>
<h2>할일 목록 입니다.</h2>
<ol>
<li>html 공부하기</li>
<li>css 공부하기</li>
<li>javascript 공부하기</li>
</ol>
</body>
</html>- <ol> (ordered list) : 순서가 있는 목록
- <ol> 도 자식요소로 <li>가 따른다.
<style>
ol{
list-style-type: decimal;
}
</style>
- <ol>의 기본 list-style-type : decimal(십진수)
disc(원형), lower-roman(로마자 소문자) 등 재정의 가능
none 으로 바꾸면 목록임에도 불구하고 표시되지 않음!
- 기본 스타일시트(서식)가 있지만, css를 활용하면 얼마든지 다르게 재정의할 수 있다.
<dl 예제>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step07_dl.html</title>
</head>
<body>
<h1>정의형 목록 (definition list) dl 요소</h1>
<dl>
<dt>제목</dt>
<dd>자세한 내용...</dd>
<dt>HTML</dt>
<dd>Hyper Text Markup Language 의 약자 입니다.</dd>
<dt>css</dt>
<dd>Design 적인 요소를 결정 합니다.</dd>
<dt>javascript</dt>
<dd>language 적인 요소를 담당 합니다.</dd>
</dl>
</body>
</html>- <dl> (description list) : 정의형 목록
- <dt>: 이름이나 제목
<dd>: dt에 대한 내용, 정보
- <dt>, <dd>가 한 쌍으로 되어있다.
[참고]
- 경계선을 기준으로 안쪽 여백: padding
- 경계선: border
- 경계선을 기준으로 바깥쪽 여백: margin
'국비교육(22-23)' 카테고리의 다른 글
| 2일차(3)/HTML 기초: form(1) (0) | 2022.10.06 |
|---|---|
| 2일차(2)/HTML 기초 : table (0) | 2022.10.06 |
| 1일차(4) CSS : Block, Inline 요소 예제 (0) | 2022.10.06 |
| 1일차(3)/HTML, CSS, Javascript 기초 (0) | 2022.10.06 |
| 1일차(2)/HTML, CSS, Javascript 기초 (1) | 2022.10.05 |