목록.html 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<title>리스트 연습</title>
</head>
<body>
<h1>야심한 밤</h1>
<p>
때는 저녁 10시. 바쁜 일과로 저녁도 거른 체, 하루가 저물었다. 공복감에 치여
잠들 수 없는 밤..! 게다가 내일은 휴일.. 그렇다.. 나는 지금 야식이 땡긴다.
</p>
<h2>좋아하는 야식들</h2>
<!-- 순서가 없는 리스트, (Unordered List) -->
<ul></ul>
<h2>야식 랭킹</h2>
<!-- 순서가 있는 리스트, (Ordered List) -->
<ol></ol>
<h2>치킨 주문하기</h2>
<!-- 이미지에 링크 걸기 : 이미지 클릭시 치킨주문 사이트로 이동하게 한다.-->
<a href="">
<img src="" width="50%" />
</a>
</body>
</html>
개념
⭐️ 비정렬 리스트
순서가 없는 목록 즉, 비정렬 리스트는 ul 태그를 사용한다. ul 태그는 내부에 리스트 아이템을 갖는다.
<ul>
<li>리스트 아이템</li>
<li>리스트 아이템</li>
<li>리스트 아이템</li>
</ul>⭐️ 정렬 리스트
순서가 있는 리스트 즉, 정렬 리스트는 ol 태그를 사용한다.
<!-- ordered list -->
<ol>
<li>No.1 리스트 아이템</li>
<li>No.2 리스트 아이템</li>
<li>No.3 리스트 아이템</li>
</ol>⭐️ 이미지에 링크 걸기
a 태그로 링크를 걸 수 있는데, 텍스트 뿐만 아니라, 이미지에도 걸 수 있다.
<a href="링크걸 주소">
<img src="이미지 주소" />
</a>구글링 힌트
“HTML 리스트 ul ol 차이”
“이미지에 링크 걸기”
픽서