Coding 🖐🏻/html,css

CSS 02 텍스트 꾸미기 속성

김가마 2023. 11. 10. 19:27

텍스트 꾸미기 속성

 

font-family : 글꼴을 정의한다

font-size: 글자 크기를 정의

text- align : 텍스트 정렬 방식을 정의

color: 글자 색상을 정의

 

💊font-family : 글꼴을 정의한다

*{ font-family : Time, monospance,serif}

폰트 페밀리: 요소를 구성하는 텍스트의 글꼴을 정의한다. 글꼴명을 속성값으로 지정한다. 여러개의 글꼴을 연달아 기입하여 우선순위를 지정할 수 있다.

 

💊font-size: 수치와 단위를 지정해 글자의 크기를 정의할 수 있다.

px rem em

px : 모니터 상의 화소 하나 크기의 대응하는 절대적인 크기 rem :html 태그 폰트 사이즈에 대응하는 상대적인 크기 배수 만큼 크기 조절한다! em :부모 태그 (상위태그) 의 폰트 사이즈에 대응하는 상대적인 크기
span { font-size: 2rem} span{font-size: 1.5em}

예시

header {
    font-size: 16px; 
}
header-child {
    font-size: 4em; 
}

 -> header-child 4em은 16 *4배 = 64px이다

 

💊text-align 텍스트 얼라인

블록내에서 텍스트의정렬 방식을 정의한다. 미리 정의된 키워드 값을 지정한다.

left, right center ,justify(양끝 정렬)

 

💊color 텍스트 색상 정의

키워드, rgb 색상코드(#+16진수값) rgb함수 (red,green,blue)

rgb함수 (red,green,blue 빛의 삼원색을 혼합해 색깔 정의한다)


정리

  • font-family :글꼴을 지정하는 속성 ,여러 글꼴을 연달아 기입하여 우선순위를 지정한다
  • font-size는 글자 크기는 지정하는 속성이며, px ,rem,em등의 단위를 사용할 수 있다.
  • text-align 은 블록 내에서 텍스트의 정렬 방식을 정의한다.
  • color: 다양한 방법으로 텍스트의 색상을 정의한다.