CSS list-style 속성

<Today's Goals>

• 목록 스타일
• list-style-type  속성 
• list-style-image 속성
• list-style-position 속성
• list-style 속성
• 텍스트 관련 스타일 속성 복습하기

<What i learned>

• font 속성이랑 text 속성을 아직 헷갈린다. 자꾸 반대로 적어서 스타일이 적용이 안된다. 몇번 더 복습이 필요할 것 같다.

<Questions>

• 불릿 대신 이미지 넣을 때 제한이 있나? (사이즈나 용량에 대한)

---

<목록 스타일>

list-style-type  속성 - 목록의 불릿과 번호 스타일 지정하기

 

순서 없는 목록에 불릿 모양 바꾸기

• disc : ● 
• circle : ○
• square : ■
• none : 불릿 없애기

순서없는 목록에서 불릿 없애기

ul { list-style-type: none; }

순서 목록에서 숫자 바꾸기

• decimal : 1로 시작하는 십진수
• decimal-leading-zero : 0으로 시작하는 십진수
• lower-roman : 소문자 로마 숫자
• upper-roman : 대문자 로마 숫자
• lower-alpha 또는 lower-latin : 소문자 알파벳
• upper-alpha 또는 lower-latin : 대문자 알파벳

 

list-style-image  속성 - 불릿 대신 이미지 넣기

ul { list-style-image : url(이미지 경로); } /*불릿으로 사용할 이미지*/

 

list-style-position  속성 - 목록에 들여 쓰는 효과 내기

list-style-position을 사용하면 실제 내용이 시작되는 위치에 불릿이나 번호를 표시하기 때문에 결과 화면에는 불릿이 들여 쓴것 으로보인다.

• inside : 불릿이나 숫자를 안쪽으로 들여쓴다.
• outside : 기본 값으로 불릿이나 숫자를 밖으로 내어 쓴다.

 

list-style  속성 - 목록 속성 한꺼번에 표시하기

list-style-type, list-style-position, list-style-image 속성을 한꺼번에 표시할 수 있다.

ul {
list-style-type: lower-alpha;
list-style-position:inside;
}

ul {
list-style: lower-alpha, inside ; /*속성 값을 나열*/
}