텍스트 꾸미기 CSS

 

- 멋쟁이사자처럼 프론트엔드 수업 내용 참조- 

 

[ color 색상 ]

- 폰트 색상 나타냄

- font- 가 붙지 않으니 유의하자

- 키워드(red, blue) HEX(#+16진수 표기법), rgb(), rgba(), hsl(), hsla()등 다양한 방법으로 표기할 수 있습니다.

- 보통 HEX을 많이 사용하며, 투명 값을 위해 rgba도 많이 사용합니다.

- transparent 는 투명한 색을 의미합니다.

 

!! 저시력 시각 장애(시력 저하, 색약, 색맹)를 위해 폰트의 색상과 배경의 명도 대비도 중요하다!!

   최소한 4:5:1 

- 개발자도구에서 명도대비 확인 가능 

 

[폰트적용 방법] 

- link 를 더 권장함

- 한 페이지에서 폰트 3개 이상 쓰지 않도록 하자 (폰트가 많아지면 복잡한 페이지가 되고 무거워짐)  

- 굵기도 3가지 내로 사용하기 / 통일감을 주자 

- 특정 폰트를 꼭 써야한다면 이미지로 만들어서 쓰자 (이미지로 쓰면 단점은 번역 불가) 

- 번역을 해야한다면 폰트를 불러와서 써야함 (번역이 되는 것이 중요하면) 

[폰트 사이트 추천] 

Google Fonts

눈누

[font-size 글꼴 크기] 

- px : 절대단위 

- em, rem을 사용하는 것을 권장 반응형 웹페이지 개발, 유지보수 등에 용이하다.

- em : 현재 요소의 부모 요소에 설정된 글꼴 크기 상대 단위

- rem : 루트요소(html)에 설정된 글꼴 크기 상대 단위

 

[font-weight 텍스트 굵기]

- normal: 기본

- bold: 굵게

- lighter: 현재 요소의 굵기를 부모 요소 굵기 보다 한 단계 가볍게

- bolder: 현재 요소의 굵기를 부모 요소 굵기 보다 한 단계 두껍게

- 100 - 900 

 

[text-transform] 

- none: 변형방지

- uppercase: 모든 텍스트를 대문자로

- lowercase: 모든 텍스트를 소문자로

- capitalize: 모든 단어의 첫글자를 대문자로

 

[text-decoration(단축속성)] 

 

text-decoration-color

text-decoration-line

- underline: 밑줄 긋기

- overline: 오버라인

- line-through: 취소선

 

text-decoration-style

• solid / wavy / dashed

text-decoration-thickness