반응형
1. <ul>, <li> 태그 – 순서 없는 목록 만들기
① 순서가 필요하지 않은 목록(unorder list)을 만들 때 <ul> 사용
② <ul> 안에 각 항목을 표시할 때 <li> 사용
③ <li> 사용 시 각 항목 앞에 작은 원이나 사각형 같은 불릿(bullet)이 붙음
* HTML4 에서는 <li> 태그의 type 속성으로 불릿을 수정했지만 HTML5에서는 CSS의 list-style-type 속성으로 불릿 수정
<!DOCTYPE html>
<html lang="ko">
<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>제주 관광 안내</title>
<style>
ul {
list-style: square; /*불릿 모양 변경*/
}
</style>
</head>
<body>
<!--h1+p*2+(ul>li*2)-->
<h1>관광 안내 전화</h1>
<p>한국관광공사에서는 전국의 관광안내소와 공동으로 여러분의 여행편의를 위해 관광안내전화
1330 서비스를 연중무휴 실시하고 있습니다.</p>
<p>1330에는 해당 지역의 지도와 관광 가이드북, 관광안내소를 대신할 수 있을 정도의 다양한
정보가 있습니다. 원하는 관광지는 물론이며 숙박, 교통, 음식점 등의 자세한 정보를 한국어를
비롯한 영어, 중국어, 일어의 3개 국어로도 이용 가능합니다.</p>
<!--ul : 순서없는 목록 태그 만드는 태그-->
<ul>
<!--li : 목록의 항목 추가 태그-->
<li>일반 전화 : (국번없이)1330</li>
<li>휴대 전화 : 064-1330</li>
</ul>
</body>
</html>
2. <ol>, <li> 태그 – 순서 목록 만들기
① 순서가 필요한 목록(order list)을 만들 때 <ul> 사용
② <ol> 안에 각 항목을 표시할 때 <li> 사용
③ <ol> 에서는 목록의 숫자 표기 방법이나 시작하는 숫자 지정 가능
3. <ol> > 숫자의 종류와 순서 변경
① type 속성 : 숫자의 종류를 선택
② start 속성 : 시작되는 숫자 선택
③ reversed 속성 : 항목 역순 표시
* </li> 태그는 생략이 가능하다.
* 목록 사이에 목록을 추가하려면 <li> 태그 사이에 <ul> 이나 <ol> 태그로 새로운 목록 생성
<!DOCTYPE html>
<html lang="ko">
<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>1박 2일 가족 여행 코스</title>
</head>
<body>
<!--h1+(ul>(li>ol>li*2)+(li>ol>li*3))-->
<h1>1박 2일 가족 여행 코스</h1>
<ul>
<li>1일차
<!--ol : 순서있는 목록 만드는 태그-->
<!--type속성 : 항목에 표시되는 숫자의 모양을 변경-->
<ol type="a">
<li>해녀박물관</li>
<li>낚시체험</li>
</ol>
</li>
<li>2일차
<!--start속성 : 항목에 표시되는 숫자의 시작번호 지정-->
<ol type="a" start="3">
<li>용눈이오름</li>
<li>만장굴</li>
<li>카약체험</li>
</ol>
</li>
</ul>
</body>
</html>
4. dl>, <dt>, <dd> 태그 – 순서 목록 만들기
① <dl> 는 제목과 설명이 한 쌍인 설명 목록 생성
② <dt> 는 <dl> 내에서 제목 표시, <dd>는 <dl>내에서 내용 표시
③ <dl>내에서 여러 개의 <dt>, <dd> 사용 가능
<!DOCTYPE html>
<html lang="ko">
<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>제주 올레</title>
<style>
dl {
line-height: 25px; /* 줄 간격 */
}
</style>
</head>
<body>
<!--h1+(dl>(dt+dd*3)*2)-->
<h1>제주 올레</h1>
<!--dl : 순서있는 목록 생성 태그-->
<dl>
<!--dt : 목록의 제목을 표출하는 태그-->
<dt>올레 1코스</dt>
<!--dd : 목록의 내용을 표출하는 태그-->
<dd>코스 : 시흥 초등학교 옆 - 광치기 해변</dd>
<dd>거리 : 14.6km(4~5시간)</dd>
<dd>난이도 : 중</dd>
<dt>올레 2코스</dt>
<dd>코스 : 광치기 해변 - 온평 포구</dd>
<dd>거리 : 14.5km(4~5시간)</dd>
<dd>난이도 : 중</dd>
</dl>
</body>
</html>
5. 텍스트 태그로 온라인 프로필 제작
<!DOCTYPE html>
<html lang="ko">
<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>온라인 프로필</title>
</head>
<body>
<!--h1+p+h2+p+hr+h2+(ul>(li>ul>li*8)+(li>ul>li*4))-->
<h1>Hayoon Moon</h1>
<p>이메일 : moonhy7@naver.com</p>
<h2>Who I am?</h2>
<p>웹 개발 공부 중이고 현재 비트캠프에 다니고 있습니다.<br>
세상을 편리하게 만들어주는 개발자가 되고 싶습니다.</p>
<hr><!--주제 전환-->
<h2>skills</h2>
<ul>
<li>사용 언어
<ul>
<li><mark>HTML</mark></li>
<li><mark>CSS</mark></li>
<li>JAVA</li>
<li>Javascript</li>
<li>Jquery</li>
<li>Oracle</li>
<li>C++</li>
<li>WPF</li>
</ul>
</li>
<li>사용 툴
<ul>
<li>Eclipse</li>
<li>Spring Framework</li>
<li>Sql Developer</li>
<li>Visual Studio</li>
</ul>
</li>
</ul>
</body>
</html>
반응형
'💻 1. 웹개발_Front end > 1-2 HTML' 카테고리의 다른 글
| [HTML] 02-5 표를 만드는 태그 (0) | 2021.09.05 |
|---|---|
| [HTML] 02-4 W3C HTML 검사기 (0) | 2021.09.05 |
| [HTML] 02-2 텍스트를 한 줄로 표시하는 태그 (0) | 2021.09.05 |
| [HTML] 02-1 텍스트를 덩어리로 묶어주는 태그 (0) | 2021.09.05 |
| [HTML] 01-2 HTML 기본 (0) | 2021.09.05 |
댓글