반응형
[광고 누르면 오늘의 행운 상승!!]
블릿 꾸미기
- 블릿 : 목록을 정리하며 예쁘게 보이도록 목록 아이템 앞에 붙는 숫자 또는 특수문자
- 웹 브라우저는 순서가 있는 목록(아라비아 숫자, 알파벳 등), 순서가 없는 목록(동그라미, 사각형 블릿) 에 따라 알맞은 블릿 제공
- 블릿 설정 : list-style-type 속성 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title </title>
<style type = "text/css" media = "all">
body{
color: red;
font-size:20px;
}
li{
list-style-type: upper-roman;
}
</style>
</head>
<body>
<li>이삭토스트는 햄치즈1</li>
<li>이삭토스트는 햄치즈2</li>
<li>이삭토스트는 햄치즈3</li>
</body>
</html>
| 아라비아 숫자 | - decimal: - 일반적인 아라비아 숫자 |
| - decimal-leading-zero: - 숫자 앞에 0이 붙는 숫자 |
|
| 알파벳 | - upper-alpha: - 대문자를 이용한 속성값 |
| - lower-alpha: - 소문자를 이용한 속성값 |
|
| 로마숫자 | - upper-roman: - 대문자로 표현되는 로마 숫자 |
| - lower-roman: - 소문자로 표현되는 로마 숫자 |
|
| 원 | - 속이 차있는 원: disc - 속이 비어있는 원 : circle |
| - square |
- 블릿이 없는 목록 : none
- 이미지 블릿 설정
- 이미지 블릿 설정 : list-style-image 속성 사용
- list-style-image 속성 값 : 이미지 URL을 설정 - 블릿 위치 설정
- 목록 아이템이 한 줄 이상일 때 블릿의 위치 설정 가능
- 블릿 위치 설정 : list-style-position 속성 사용
- list-style-position 속성 값
| inside | - 블릿이 목록 아이템 텍스트 보다 안에 나타남 - list-style-position: inside; |
| outside | - 블릿이 목록 아이템 텍스트 보다 앞에 나타남 - list-style-position: outside; |
반응형
'5. 웹 프로그래밍 > 2. CSS' 카테고리의 다른 글
| float 속성을 사용한 2단 레이아웃[CSS] (0) | 2020.03.11 |
|---|---|
| Margin, Padding[CSS] (0) | 2020.03.10 |
| 배경 설정[CSS] (0) | 2020.03.10 |
| 서체의 지정과 크기 설정[CSS] (0) | 2020.03.10 |
| 상속과 캐스케이딩[CSS] (0) | 2020.03.10 |