안녕하세요. 이번 포스팅에서는 리스트에 대해 간단하게 올려보려고 합니다.
리스트는 그룹에 속한 내용들을 정리해서 올릴 때 효과적인데요! 예를 들면 목차, 목록들을 웹 사이트에서 표시할 때 사용할 수 있습니다.
주로 웹사이트에서는 다음과 같은 형태를 보셨을 겁니다
- 목차1
- 목차2
리스트는 <ul>, <ol> 요소로 구분할 수 있는데요.
<ul> 요소는 unordered list의 약자로 순서가 없는 자료인 경우에 사용하며 총알 모양의 아이콘과 함께 정렬됩니다.
<ol> 요소는 ordered list의 약자로 순서가 있는 자료인 경우에 사용하며 오름차순 카운터와 함께 정렬됩니다.
또한 <ul>, <ol> 요소는 데이터의 수만큼 <li> 요소를 중첩시켜서 사용해야 하는데요.
아마 아래 예시를 보는게 더 쉽게 이해할 수 있을 것 같습니다.
<ul>
<li>바나나</li>
<li>딸기</li>
<li>포도</li>
</ul><ol>
<li>A학점</li>
<li>B학점</li>
<li>C학점</li>
</ol>
다음은 <ul>, <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>Lists</title>
</head>
<body>
<h1>내가 좋아하는 동물 순위</h1>
<ol>
<li>고양이</li>
<ul>
<li><a href="https://ko.wikipedia.org/wiki/%ED%95%9C%EA%B5%AD%EA%B3%A0%EC%96%91%EC%9D%B4">코리안숏헤어</a></li>
<li><a href="https://ko.wikipedia.org/wiki/%EC%95%84%EB%A9%94%EB%A6%AC%EC%B9%B8_%EB%B0%A5%ED%85%8C%EC%9D%BC">아메리칸 밥테일</a></li>
</ul>
<li>강아지</li>
<ul>
<li><a href="https://ko.wikipedia.org/wiki/%EA%B3%A8%EB%93%A0_%EB%A6%AC%ED%8A%B8%EB%A6%AC%EB%B2%84">골든리트리버</a></li>
</ul>
<li>햄스터</li>
</ol>
</body>
</html>
지금은 css를 배우지 않아서 조잡한 홈페이지만 하나하나 배워갈수록 점차 발전한 나만의 웹 사이트를 만들 수 있을 겁니다.
그때까지 같이 힘내보아요.
'Web Programming' 카테고리의 다른 글
| [HTML] Head Element (0) | 2023.02.20 |
|---|---|
| [HTML] Block & Inline Element (0) | 2023.02.15 |
| [HTML] Tables (0) | 2023.02.14 |
| [HTML] Images and Favicon (0) | 2023.02.12 |
| [HTML] HTML Links (0) | 2023.02.12 |