텍스트와 관련된 CSS

font-family

 

- 글씨체를 선택하는 속성

- 보통 어떤 사용자가 글씨체쓸지 가늠할 수 없기 때문에 사이트에 사용된 폰트는 앞에 두고, 혹시 사이트 지원에 안될 경우를 위해서

  많이 사용되는 글씨체로 여러개 나열하여 둔다.

 

p { font-family: "본고딕"; }

 

 

font-size

 

- 글씨를 크게도 할 수 있고 작게도 할수 있는 속성

- 보통 단위로 px가 일반적 많이 익숙하며,  사이트에 따라서는 em, rem, vh&vw, vmin & vmax, ex&eh까지 쓰는 사이트들도 있는데

  기기나 브라우저마다 지원하는 형태도 다 다르니 확인하여 작성이 필요하다.

 

p { font-size: 10px; }

 

 

font-weight

 

- 글씨를 두껍게도 얇게도 할 수 있는 속성

- 가장 일반적인 글씨 두께는 400이다. 400를 기준으로 하여 앞뒤 조정하면 된다.

p { font-weight: 400; }

 

 

font-style

 

- normal: 일반적인 글씨 형태

- italic: 흘려쓴 서체라고 해서 이탈릭체라고 많이 부른다.

- oblique: 원래 서체가 기울어진 형태

 

italic와 oblique가 적용된 모양이 거의 비슷해서 둘 차이를 못 느낄 수도 있다.

 

p { font-style: normal; }
p { font-style: italic; }
p { font-style: oblique; }

 

 

color

- 글씨의 색상을 변경할 때 사용할 수 있다.

- #eb4639: 6자리로 색상을 표현

- rgb: 빨강, 초록, 파랑으로 색상을 표현. 참고로 끝에 0~1 사이의 숫자를 추가로 넣으면 투명도가 선택가능.

- hsl: 색상, 채도, 명도로 색상을 표현

 

p { color: #eb4639;}
p { color: rgb(235, 70, 57);}
p { color: hsl(4, 82%, 57%);}