[CSS] font / background / border 속성 정리

 

css에서 속성은 '시계 방향'으로 적용

4개일 때 : top right bottom left
2개일 때 : x축(top, bottom) y축(left, right)
1개일 때 : all

---

 

🔗 Font

 

color : 텍스트 색상

 

font-size : 텍스트 사이즈  default : 16px

 

font-weight : 텍스트 굵기

· 100 : thin

· 300 : light

· 400 : regular

· 500 : medium

· 700 : bold

· 900 : extrabold

 

letter-spacing : 자간 (글자 간격)

word-spacing : 단간 (단어 간격)

 

white-space

· normal : width에 맞추어 자동으로 줄바꿈  default

· nowrap : width에 상관없이 한 줄로 출력

 

vertical-align : 수직 정렬

· baseline : 아래 (아래선 기준)

· bottom : 아래

· middle : 가운데

· top : 위

· text-bottom / text-top : text 끼리 일 때 사용

 

text-align : 수평 정렬

 

text-indent : 들여쓰기

 

text-decoration : 텍스트 장식

 

text-transform : 텍스트 변환

· capitalize : 앞글자만 대문자로

· lowercase : 모두 소문자로

· uppercase : 모두 대문자로

 

direction : 텍스트 방향

· ltr : ->  default

· rtl : <-

 

---

 

🔗 Background

 

background-color : 배경 색상

 

background-image: url(''); : 배경 이미지

 

background-repeat : 배경 반복

· repeat  default

· no-repeat

· repeat-x / repeat-y

 

background-size : 배경 크기

· contain : 100% (비율 기준)

· cover : 꽉 채우기

 

background-position : 배경 위치

· x : left center right

· y : top center bottom

 

background-attachment

· scroll  default

· fixed

 

▪ background shorthand

background: color/image repeat position;

 

---

 

🔗 Border

 

border-width : 테두리 두께

 

border-style : 테두리 스타일

· none : x

· solid : -

· dotted : ···

· dashed : ---

· double : =

 

border-color : 테두리 색상

 

border-top/right/bottom/left

 

border-radius

(+) 원 : border-radius: width 1/2 (반지름) px;

 

▪ border shorthand

border: width style color;

 

 

---

💡 같이 보면 좋을 Post

HTML / CSS / JavaScript 의 역할 및 차이점 (쉽고 빠르게 설명!)

[HTML] 왕초보를 위한 HTML 태그 총정리