티스토리 뷰

css의 list 속성은 html의 리스트 태그를 꾸밀 때 사용합니다.

html의 리스트 태그로는 순서가 없는 목록을 나타내는 <ul>태그와 순서가 있는 목록을 나타내는 <ol> 태그가 있죠. 

css의 list 속성을 사용하면 item marker라고 하는 리스트 아이템의 맨 앞에 나오는 모양을 변경하거나 이미지를 넣고 배경 색상을 변경하는게 가능합니다. 각각에 대해 살펴봅시다.

1. list-style-type : 이 속성은 리스트 아이템 마커의 타입을 지정할 때 사용합니다. 네모, 동그라미, 숫자, 알파벳 그런것들로 말이죠. 쓰는 법은 ul { list-style-type : circle }이런 식으로 쓰면 됩니다. 

2. list-style-image : 이 속성은 리스트 아이템 마커로 이미지를 지정할 때 사용합니다. 쓰는 법은 ul { list-style-image : url('my-circle.gif'); } 등으로 쓰고요.

3. list-style-position : 리스트 아이템 마커의 위치를 리스트 아이템의 바깥쪽에 할지 안쪽에 할지 정하는 속성입니다. 기본은 outside이구요. inside로 설정하면 마커와 글자가 좌측으로 세로 정렬됩니다. 사용법은 ul { list-style-position: outside; } 입니다.

4. list-style-type : 기본 속성을 삭제할 때 사용합니다. ul { list-style-type: none; } 으로 지정하면 리스트 아이템 마커가 사라집니다.

5. list-style : 여러개의 리스트 속성을 축약해서 한줄에 쓸 때 사용합니다. ul { list-style : circle inside url("my-circle.gif"); } 

6. 스타일 적용 범위 : ul, ol 태그에 css 속성을 준 경우 리스트 전체 스타일이 적용되고 li 태그에 적용하면 해당 아이템만 적용이 됩니다.

'잉고래의 티스토리' 카테고리의 다른 글

css list 속성 이해  (0) 2018.04.10
나만의 링크버튼 만들기  (0) 2018.02.02
블로그에 CSS 아이콘 쓰기  (0) 2018.01.02
티스토리에서 마크다운 글쓰기  (2) 2017.11.23
반응형 스킨과 저품질의 상관성  (0) 2017.10.12
css font 속성  (0) 2017.09.26
공유하기 링크
TAG
,
댓글
댓글쓰기 폼