📝 CSS 문단 및 목록 스타일 요약!

CSS 문단 스타일

direction - 글자 쓰기 방향 지정하기

• ltr : left-to-right, 기본값
• rtl : right-to-left

 

text-align - 텍스트 정렬하기

• start : direction에서 정한 시작 방향 정렬 (ltr은 왼쪽, rtl은 오른쪽)
• end : direction에서 정한 끝 방향 정령
• left : 왼쪽 정렬
• right : 오른쪽 정렬
• center : 가운데 정렬
• justify : 양쪽 맞춤
• match-parent : 부모 요소 따라

 

text-justify - 정렬 시 공백 조절하기

• auto : 웹 브라우저에서 자동으로 지정
• none : 정렬하지 않음
• inter-word : 단어 사이의 공백을 조절해 정렬
• distribute : 인접한 글자 사이의 공백을 똑같이 맞추어 정렬

 

text-indent - 텍스트 들여 쓰기

• <크기> : 단위와 함께 들여 쓸 크기를 지정합니다. 음수 값도 사용할 수 있습니다.
• <백분율> : 부모 요소의 너비를 기준으로 상대적 크기를 지정합니다.

 

line-height - 줄 간격 조절하기

line-height : normal | <숫자> | <크기> | <백분율> | inherit

 

⭐ text-overflow - 넘치는 텍스트 표기하기

• clip : 넘치는 텍스트를 자름
• ellipsis : 말 줄임표(...)로 잘린 텍스트가 있다고 표시함

 

CSS 목록 스타일

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

list-style-type : none|<순서 없는 목록의 불릿>|<순서 목록의 번호>

 

순서 없는 목록의 경우

• none : 불릿 없애기
• disc (●) : 채운 원
• circle (○) : 빈 원
• square(■) : 채운 사각형

 

순서 있는 목록의 경우

• decimal : 1로 시작하는 십진수
• decimal-leading-zero : 앞에 0이 붙는 십진수
• lower-alpha 또는 lower-latin : 소문자 알파벳
• upper-alpha 또는 upper-latin : 대문자 알파벳
• 이 외에도 다양한 종류가 있음...

 

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

list-style-imgage : <이미지> | none
<이미지> = url("이미지 파일 경로")

 

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

• nside : 불릿이나 숫자를 안쪽으로 들여쓰기
• outside : 기본 값으로 불릿이나 숫자를 밖으로 내어쓰기

 

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

한번에 묶어서 표시