<ol>: ordered list
<ul>: unordered list
<dl>: definition list
3가지의 리스트 중 <dl></dl> 을 활용해 정의 리스트를 만들어 보자.
<dt></dt> 태그를 이용해 도시 이름을,
<dd></dd>태그를 이용해 도시에 대한 설명을 적어 주었다.
* <dt>와 <dd>태그는 들여쓰기 정도에 있어 차이를 갖는다.
*주석 처리 방법: 주석 처리할 범위를 드래그하여 지정한 후 Ctrl + / 키를 눌러보자.
1. 도시 소개(글만)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>도시 소개</title>
</head>
<body>
<h3>도시 소개</h3>
<hr>
<dl>
<dt>California</dt>
<dd>맑고 화창한 날씨가 좋고 태평양의 아름다운 해변을 가진 멋진 주</dd>
<dt>Florida</dt>
<dd>미국의 동남부에 위치한 주로서 많은 휴양 도시가 있고 미국의 최남단이 연결된 아름다운 주</dd>
<dt>Texas</dt>
<dd>드넓은 목장들이 있어 텍사스 바베큐로 유명하고 석유가 생산되는 주</dd>
</dl>
</body>
</html>
도시 소개
- California
- 맑고 화창한 날씨가 좋고 태평양의 아름다운 해변을 가진 멋진 주
- Florida
- 미국의 동남부에 위치한 주로서 많은 휴양 도시가 있고 미국의 최남단이 연결된 아름다운 주
- Texas
- 드넓은 목장들이 있어 텍사스 바베큐로 유명하고 석유가 생산되는 주
위와 같이 홈페이지가 잘 생성된다.
그치만 각 도시의 사진도 같이 삽입해주면 좋을것 같다.
따라서 이전에 배운 <img> 태그를 사용해 각 도시의 이미지를 삽입해 주는 방향으로 코드를 수정해 보았다.
2. 도시 소개(이미지까지)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>도시 소개</title>
</head>
<body>
<h3>도시 소개</h3>
<hr>
<dl>
<dt>California</dt>
<dd>맑고 화창한 날씨가 좋고 태평양의 아름다운 해변을 가진 멋진 주</dd>
<dd>
<img src="https://ww.namu.la/s/d8babf66d763ec5319ef31383625cf6cbb9503d31f30ca4d17c8a692b1d3bea4f96cc93390376bbfa76cea99c16e05e08bb2c4f1367314a6cd8ecf223703b26b3018db68305c15c8ace8def84ffc6cc97062d7ddc56c666cee37a5281be943542c99036e16d00b71be1ef553131aa7bb" width="200" height="100">
</dd>
<dt>Florida</dt>
<dd>미국의 동남부에 위치한 주로서 많은 휴양 도시가 있고 미국의 최남단이 연결된 아름다운 주</dd>
<dd>
<img src="https://www.gousa.or.kr/sites/default/files/styles/hero_l/public/images/hero_media_image/2018-08/040a55361776ea8194008a13f780c33c.jpeg?h=a98222f4&itok=CTDZvAb2" width="200" height="100">
</dd>
<dt>Texas</dt>
<dd>드넓은 목장들이 있어 텍사스 바베큐로 유명하고 석유가 생산되는 주</dd>
<dd>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxFn642fatJKHUgYeesc2rjwhNzdjGD85pLw&usqp=CAU" width="200" height="100">
</dd>
</dl>
</body>
</html>
도시 소개
- California
- 맑고 화창한 날씨가 좋고 태평양의 아름다운 해변을 가진 멋진 주
-
- Florida
- 미국의 동남부에 위치한 주로서 많은 휴양 도시가 있고 미국의 최남단이 연결된 아름다운 주
-
- Texas
- 드넓은 목장들이 있어 텍사스 바베큐로 유명하고 석유가 생산되는 주
-
~짠~
'GURU > PYTHON & HTML' 카테고리의 다른 글
| [HTML day 5: 시맨틱 태그] 구조화된 HTML5 문서 작성 (0) | 2022.01.19 |
|---|---|
| [HTML day 4: 테이블 만들기] <table> (0) | 2022.01.18 |
| [HTML day 2] 특수문자, <pre>태그 연습 (0) | 2022.01.13 |
| [HTML day1] hello.html (0) | 2022.01.11 |
| [PYTHON Unit 11: 파이썬 실전] 입장료 계산 프로그램 (0) | 2022.01.11 |