목록 스타일 (List Style)에 대한 자세한 설명과 예시
HTML에서 목록을 만들 때, 각 항목 앞에 붙는 마커(예: •, 숫자 등)를 목록 스타일이라고 합니다. 이 스타일은 CSS를 사용하여 다양하게 변경할 수 있습니다.
목록의 종류
- 정렬되지 않은 목록 (Unordered List): 각 항목 앞에 동일한 마커가 붙는 목록입니다. <ul> 태그로 표현합니다.
- 정렬된 목록 (Ordered List): 각 항목 앞에 순서가 매겨지는 목록입니다. <ol> 태그로 표현합니다.
목록 스타일 속성
- list-style-type: 목록 항목 앞에 표시될 마커의 종류를 지정합니다.
- list-style-image: 마커로 사용할 이미지를 지정합니다.
- list-style-position: 마커의 위치를 지정합니다 (inside: 내용 안쪽, outside: 내용 바깥쪽).
예시 코드
HTML
<!DOCTYPE html>
<html>
<head>
<title>목록 스타일 예시</title>
<style>
ul {
list-style-type: square; /* 마커를 네모로 변경 */
}
ol {
list-style-type: lower-roman; /* 마커를 소문자 로마자로 변경 */
}
.image-list {
list-style-image: url('check.png'); /* 마커로 이미지 사용 */
}
</style>
</head>
<body>
<h2>정렬되지 않은 목록</h2>
<ul>
<li>사과</li>
<li>바나나</li>
<li>딸기</li>
</ul>
<h2>정렬된 목록</h2>
<ol>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ol>
<h2>이미지 마커를 사용한 목록</h2>
<ul class="image-list">
<li>완료</li>
<li>진행 중</li>
<li>미완료</li>
</ul>
</body>
</html>
코드를 사용할 때는 주의가 필요합니다.
list-style-type 속성 값 예시
- disc: 검은색 원형 (기본값)
- circle: 빈 원형
- square: 검은색 정사각형
- decimal: 1, 2, 3, ...
- lower-roman: i, ii, iii, ...
- upper-roman: I, II, III, ...
- lower-alpha: a, b, c, ...
- upper-alpha: A, B, C, ...
- none: 마커 없음
추가 설명
- list-style 속성: 위에서 설명한 세 가지 속성을 한 번에 설정할 수 있습니다. 예: list-style: square inside blue;
- CSS 프레임워크: Bootstrap, Bulma 등의 CSS 프레임워크를 사용하면 더욱 다양하고 편리하게 목록 스타일을 적용할 수 있습니다.
실제 활용 예시
- 메뉴: 웹사이트의 메뉴를 만들 때 정렬되지 않은 목록을 사용하고, 각 메뉴 항목에 다른 스타일을 적용하여 시각적으로 구분합니다.
- FAQ: 자주 묻는 질문 목록을 만들 때 정렬된 목록을 사용하여 질문과 답변을 순서대로 나열합니다.
- 단계별 가이드: 어떤 작업을 수행하는 단계를 설명할 때 정렬된 목록을 사용하여 순서를 명확하게 보여줍니다.
팁
- 중첩된 목록: <ul>이나 <ol> 태그 안에 또 다른 <ul>이나 <ol> 태그를 넣어 중첩된 목록을 만들 수 있습니다.
- CSS를 활용한 커스터마이징: CSS를 사용하여 목록의 들여쓰기, 글자 크기, 색상 등을 자유롭게 변경할 수 있습니다.
'HTML_CSS' 카테고리의 다른 글
| Border Styles (0) | 2024.11.04 |
|---|---|
| HTML 목록을 이용한 메뉴만들기 (0) | 2024.11.04 |
| HTML에서 border 속성 (2) | 2024.11.04 |
| HTML 표 (Table)에 대한 자세한 설명 및 선 속성 (0) | 2024.11.04 |
| display: inline-block (0) | 2024.11.04 |
