16. CSS - 레이아웃 - 글자 관련 스타일

• color : 글자 색을 지정하는 속성
  • 작성법 1 :  색상명(영문)
  • 작성법 2 : 16진수 숫자 ( ex- #fff, #ffffff)
  • 작성법 3 : rgb(255, 255, 255)
  • 작성법 4 : rgba(255, 255, 255, 255)
  • 작성법 5 : hsl(360, 100%, 100%)
  • 작성법 6 : hsla(360, 100%, 100%, 100%, 1)
• 16진수 ( 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f)
• rgb(빛의 3원색), hsl(색조, 채도, 밝기)
• rgba, hsla에서 a는 투명도( 0(투명) ~ 1(불투명) )
• 6가지의 색 지정 방식은 모든 색상 관련 속성에서 사용 가능

HTML 작성 화면
CSS 작성 화면 1. - 글씨 크기와 굵기 지정
CSS 작성 화면 2. - 각각 다른 방법으로 글자색 지정
웹에서 출력된 화면

 

 

• 텍스트에 줄을 긋는 속성
  • 아랫줄 긋기, 중간줄 긋기, 윗줄 긋기, 밑줄 없애기

 

HTML 작성 화면
CSS 작성 화면
웹에서 출력된 화면

 

 

• text-align 
  • 내부에 작성된 글 또는 inline요소를 정렬하는 속성
  • text-align은 display가 inline인 경우 적용되지 않음.

HTML 작성 화면
CSS 작성 화면
웹에서 출력된 화면

 

 

• line-height
  • 줄 간격(장평)을 지정하는 속성
  • 한 줄의 높이를 지정하는 속성(줄 사이의 간격 지정 X)
  • 줄 높이가 글자의 크기보다 큰 경우 글자는 해당 줄 세로 가운데 배치된다.

HTML 작성 화면
CSS 작성 화면
웹에서 출력된 화면

 

 

 

• letter-spacing
  • 글자 사이 간격(자간) 지정 속성
  • 음수 값을 지정해서 글자 사이의 간격을 줄일 때 많이 사용

HTML 작성 화면
CSS 작성 화면
웹에서 출력된 화면