2018. 2. 5. 12:19ㆍ웹 표준 퍼블리싱 바이블
1. list-style-position으로 목록 지정하기
목록이 지정된 블록 영역의 "안쪽(inside)" 혹은 "바깥쪽(outside)"에 블릿을 표현합니다. 다음의 예제에서 그 결과를 확인할 수 있습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>앙큼한유채`s 일상 Story</title> <style type="text/css"> body{font-family: verdana, sans-serif;font-size: 12px;} li{background-color: orange;} .inside{list-style-position: inside;} .outside{list-style-position: outside;} </style> </head> <body> <p>inside</p> <ul class="inside"> <li>list item1</li> <li>list item2</li> <li>list item3</li> </ul> <p>outside</p> <ul class="outside"> <li>list item1</li> <li>list item2</li> <li>list item3</li> </ul> </body> </html>
|
2. list-style-image으로 이미지 블릿 지정하기
"list-style-image" 속성은 블릭을 이미지로 표현할 수 있게 하는데, 그 이미지의 위치를 섬세하게 지정할 수는 없기 때문에 보통 실무자들은 "background" 속성을 활용하는 편입니다. "list-style-image" 속성을 사용할 경우 불러 올 이미지의 경로는 "url()"로 지정합니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>앙큼한유채`s 일상 Story</title> <style type="text/css"> body{font-family: verdana, sans-serif;font-size: 12px;} li{background-color: orange;} .list{list-style-image: url(../images/image1.png)} </style> </head> <body> <p>list-style-image</p> <ul class="list"> <li>list item1</li> <li>list item2</li> <li>list item3</li> </ul> </body> </html>
|
'웹 표준 퍼블리싱 바이블' 카테고리의 다른 글
| 4-6. Display 속성과 Visivility 속성 알아보기 (0) | 2018.02.06 |
|---|---|
| 4-5. 목록(List) 스타일 - 1 (0) | 2018.02.02 |
| 4-4. 서체(font)와 글(text) 스타일 - 8 (0) | 2018.02.01 |
| 4-4. 서체(font)와 글(text) 스타일 - 7 (0) | 2018.01.31 |
| 4-4. 서체(font)와 글(text) 스타일 - 6 (0) | 2018.01.30 |