CSS / Reference / list-style-image
개요
list-style-image로 이미지를 ul, ol 등의 목록의 마커(marker)로 사용할 수 있습니다.
- 기본값 : none
- 상속 : Yes
- 애니메이션 : No
- 버전 : CSS Level 1
문법
list-style-image: none | url | initial | inherit
- none : 이미지가 없습니다.
- url : 사용할 이미지의 URL을 입력합니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
예제
이미지는 원본 크기 그대로 나옵니다. 따라서 글자 크기에 맞는 이미지를 만들어야 합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
ul.im1 {
list-style-image: url( "images/marker.png" );
font-size: 38px;
}
ul.im2 {
list-style-image: url( "images/marker.png" );
font-size: 20px;
}
</style>
</head>
<body>
<ul class="im1">
<li>Lorem ipsum dolor sit amet</li>
<li>Aenean nec mollis nulla.</li>
</ul>
<ul class="im2">
<li>Lorem ipsum dolor sit amet</li>
<li>Aenean nec mollis nulla.</li>
</ul>
</body>
</html>
CSS / Reference / letter-spacing, word-spacing
letter-spacing, word-spacing의 문법과 주요 값, 실제 적용 조건을 설명합니다. 첫 줄은 각 문자의 간격이 넓어지고 두 번째 줄은 단어를 구분하는 공백의 간격이 더 넓어집니다.
CSS / Tutorial / position의 값이 fixed일 때 가운데 정렬하는 방법
position의 fixed를 이용하여 요소의 위치를 고정시킬 수 있습니다. 예를 들어 상단에 고정되는 메뉴바를 만들 때 사용합니다. 그런데, fixed를 하면 요소가 한쪽으로 치우칩니다. 만약 가운데에 위치시키고 싶다면 어떻게 할까요? transform 속성으로 해결할 수 있습니다.
CSS / Reference / background-origin
background-origin의 문법과 주요 값, 실제 적용 조건을 설명합니다. 왼쪽 위에 놓인 도형의 시작 위치를 비교하세요.
box-shadow의 문법과 주요 값, 실제 적용 조건을 설명합니다. 첫 박스는 오른쪽 아래로 흐린 그림자가 생기고 두 번째 박스는 안쪽에 색 띠가 생깁니다.
CSS / Reference / list-style-position
list-style-position의 문법과 주요 값, 실제 적용 조건을 설명합니다. outside에서는 마커를 제외한 본문 줄들이 같은 위치에서 시작합니다.
웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다. 하지만, 어떤 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다. CSS를 이용하여 문자열의 일부만 보여주는 방법을 소개해드립니다.
line-height의 문법과 주요 값, 실제 적용 조건을 설명합니다. 글자 크기가 20px인 첫 박스는 줄 높이가 32px입니다.
CSS / Tutorial / placeholder의 색, 글자 모양 등 꾸미는 방법
placeholder는 HTML5에서 새로 나온 속성으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다.
CSS / Tutorial / 마우스 호버 효과 / 이미지 확대하는 방법
이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다.
overflow의 문법과 주요 값, 실제 적용 조건을 설명합니다. auto 박스는 내용이 긴 만큼 내부를 스크롤할 수 있습니다.