이 태그 없으면 리스트는 못 만듭니다.
단언컨대, <li>를 빼고 목록을 만든다는 건 불가능해요.
안녕하세요!
오늘도 HTML을 차곡차곡 배워가는 시간입니다.
그동안 웹사이트에서 ‘목록’이라는 걸 수도 없이 보셨을 거예요.
할 일 리스트, 메뉴 목록, 쇼핑 카테고리…
이런 걸 어떻게 만들 수 있는지 궁금하셨죠?
오늘은 그 핵심인 <li> 태그를 제대로 알려드릴게요.
단순하지만 없어선 안 되는 태그,
같이 알아보겠습니다.
오늘 배울 태그는 <li>
목록의 ‘한 줄’을 담당하는 태그입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>li 태그 기본 예제</title>
</head>
<body>
<ul>
<li>HTML 배우기</li>
<li>CSS 익히기</li>
<li>JavaScript 시작하기</li>
</ul>
</body>
</html>
<li> 태그는 리스트에서 각 항목 하나를 표현할 때 사용합니다.
위 코드에서는 <ul>이라는 ‘순서 없는 리스트(ul)’ 안에
<li> 세 개가 들어가 있죠.
각각은 ‘HTML 배우기’, ‘CSS 익히기’, ‘JavaScript 시작하기’라는 항목이고,
브라우저에서는 점(dot)이 붙은 형태로 출력됩니다.
리스트를 만들 때는 항상 부모 요소인 ul 또는 ol 안에
반드시 <li> 태그를 써야 해요.
그냥 텍스트를 줄바꿈 한다고 해서 목록처럼 보여지지 않습니다.
HTML의 문법은 꽤 논리적이고, 이런 구조 덕분에 의미 있는 문서가 만들어지는 거예요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>li 태그 응용 예제</title>
<style>
ul {
list-style-type: square;
padding: 20px;
background-color: #f7f7f7;
width: 300px;
border-radius: 8px;
}
li {
font-size: 16px;
color: #8ca3af;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h3>🍽️ 오늘의 장보기 리스트</h3>
<ul>
<li>달걀 10개</li>
<li>식빵 1봉지</li>
<li>우유 1L</li>
<li>커피 원두</li>
</ul>
</body>
</html>
이번에는 CSS를 함께 사용해
리스트를 조금 더 보기 좋게 꾸며봤어요.list-style-type 속성을 활용해
점 모양을 circle에서 square로 바꿨고,
배경색과 여백을 주어
카드처럼 보이게 만들었어요.
각 <li>는 간격과 글씨 색상도 조정했기 때문에
훨씬 읽기 편하고 정돈된 느낌이죠.
📌 보너스 팁!
<li> 안에는 텍스트뿐 아니라
이미지, 링크, 버튼 등 어떤 HTML 요소든 넣을 수 있어요.
예를 들어 메뉴 리스트라면 <li><a href="#">홈으로</a></li> 처럼 쓸 수 있고,
체크박스 리스트도 <input type="checkbox">와 함께 구성할 수 있어요.
리스트는 생각보다 훨씬 유연하게 사용할 수 있습니다.
단순한 나열이지만,
그 안에 정보와 흐름이 담겨 있어요.
<li>는 조용히, 하지만 단단하게
HTML 문서의 구성을 도와주는 태그입니다.
앞으로 리스트를 만들 땐,
꼭 <li>의 존재를 떠올려 주세요 😊
앞으로 또 어떤 태그가
우리의 웹을 더 단단하게 만들어줄까요?
다음 수업도 기대해 주세요!
👉 더 많은 HTML 팁은 제 블로그에서 확인해보세요 https://jjaeho.tistory.com
배웠다 말았다 다시 시작했다😎
흥미로운 나만의 홈페이지를 만들기 위한 공간입니다. #Pixel #Art #HTML #CSS #JAVASCRIPT
jjaeho.tistory.com
'HTML,CSS,JavaScript > HTML,CSS,JAVASCRIPT' 카테고리의 다른 글
| [HTML] BUTTON 똑바로 써봤어?? (0) | 2025.04.04 |
|---|---|
| [HTML] div태그 기본인건 알지?? (1) | 2025.04.03 |
| [HTML] a 태그 제대로 알고 사용하자! (2) | 2025.04.03 |
| [HTML] Box 박스 모델 활용 CSS (0) | 2022.11.03 |
| [HTML] input 활용하기 (0) | 2022.11.02 |
