CSS3 - CSS 스타일 - 리스트(list)스타일 설정하기 (19)

CSS3 - CSS 스타일 - 리스트(list)스타일 설정하기 (19)

오늘은 CSS3의 열아홉번째 내용으로 

리스트(list)스타일 

설정하는 방법에

 대해서 알아보도록 하겠습니다.

CSS도 HTML처럼 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)

굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.

css 스타일 - 리스트(list) 스타일

먼저 css에서 리스트(list)스타일이란 html의 리스트 태그(요소)에 사용되는 속성을 말하며 이에 관련된 속성은 아래 표와 같습니다.

속성	내용
list-styl	리스트에 대한 속성을 한 줄로 정의 합니다.
list-styl-image	리스트 항목 마커를 이미지로 지정 합니다.
list-styl-position	리스트 마커의 위치를 안쪽인지 바깥쪽인지 설정 합니다.
list-styl-type	리스트 마커의 타입을 설정 합니다.

<리스트 스타일 속성>

위는 리스트 스타일의 속성이며 표 제일 아래부터 하나씩 설명 하도록 하겠습니다.

css 스타일 - list-style-type 속성과 값

list-style-type 속성은 위 표에서 설명 한대로 리스트 마커의 타입을 변경하며 속성 값은 대표적으로 많이 쓰이는 circle, square, upper-roman, lower-alpha 등이 있으며 아래부터 적용 되는 모습을 하나씩 보도록 하겠습니다. 

1. list-style-type 속성을 지정하지 않은 기본 마커

제일 먼저 위는 html 리스트 태그(요소)를 스타일 list-style-type속성 지정 

없이 그대로 출력 한 모습 입니다. 

2. list-style-type: circle 사용

사용시 위 처럼 리스트 마커 타입이 변합니다.

3. list-style-type: square 사용

사용시 위 처럼 리스트 마커 타입이 변합니다.

4. list-style-type: upper-roman 사용

사용시 위 처럼 리스트 마커 타입이 변합니다.

5. list-style-type: lower-alpha 사용

사용시 위 처럼 리스트 마커 타입이 변합니다.

여기까지 list-style-type 속성 값중 많이 쓰이는 값에 대해서 알아 보았으며 위 속성 값은 list-style-type 속성 값의 일부임을 다시 한번 말합니다.

다른 속성 값들도 많지만 일부 속성 값들은 각 브라우저 (익스, 크롬, 사파리, 오페라)등

에서 호환이 되지 않는 속성 값들도 있기에 생략 합니다. 

혹시 위에 속성말고도 다른 속성이 궁금 하신 분들은 아래 링크를 타고 이동 하시면 

나머지 list-style-type 속성 값들을 확인 하실 수 있습니다.

https://www.w3schools.com/cssref/pr_list-style-type.asp

css 스타일 - list-style-image 속성과 값

이 다음 list-style-image 속성 입니다.

이 속성은 위 표에서 설명한 대로 리스트 마커를 이미지로 변경하는 속성 이며

사용 법은 아래와 같습니다.

       

<list-style-image 속성 사용법>

사용법은 이제껏 배웠던 이미지 삽입과 동일하게 "url (이미지가 있는 경로)" 를 사용 합니다.

css 스타일 - list-style-position 속성과 값

list-style-position속성은 리스트 마커의 위치를 정하는건데 이 속성은 

inside, outside, inherit 세가지가 있으며 설명은 아래와 같습니다.

1. inside : 항목과 태그를 들여쓰기

2. outside : 기본값으로 그대로 둔다. (변화가 없음)

3. inherit : 부모의 값을 상속 받습니다.

이 내용은 위 내용정도만 알고 계시면 될 것 같습니다. 

css 스타일 - list-style 속성과 값

list-style속성 입니다.

list-style속성은 위 표에 설명 되어 있듯이 모든 리스트 속성에 대한 속성 값을 

한 줄로 정의하는 속성 입니다. 

(앞전에 배운 배경 backgroun속성으로 배경 속성을 한꺼번에 정의 한 것과 같은 의미)  

<list-style 속성 사용법>

속성 사용 법은 위와 같이 리스트에 관련된 속성을 한줄에 정의 합니다.

추가로 위 코드 중 list-style-image를 넣으면 list-style-type가 의미 없어 지게 되는데 

혹시 만약 이미지를 로딩하지 못했을 때를 대비해 기본 해당하는 마커 타입을 위와 같이 지정 합니다.

이상 CSS3 - CSS 스타일 - 리스트(list)스타일 설정하기 (19)에 관련된 포스팅을 마치도록 하겠습니다.