안녕하세용@_@
오늘은 CSS 문자 관련 스타일에 대해 알아보겠습니다!
여러분들은 사이트에서 중요한게 뭐라고 생각하시나요?
전 내용도 당연히 중요하지만 개인적으로 폰트나 자간 행간등을 중요하게 본답니다!!
보기 좋은 떡이 먹기도 좋다는 말이 있잖아요~~?
그래서 이번엔 그와 관련된 스타일을 정리해볼게요!
책을 참고해보니 총 13가지가 있네요~
✨font-family
폰트 종류를 설정하는 속성으로, 여러 단어이거나 한글 글꼴인 경우 따옴표("")로 감싸고 여러 개의 글꼴을 쉼표(,)로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다.
표현방법
font-family: 사용자지정 폰트;
✨font-size, 단위의 고찰
폰트의 크기를 지정하는 속성입니다.
글자 크기는 명시하지 않을 경우 16px이 기본값입니다. CSS에서 유용하게 사용하는 단위에는 다음과 같습니다.
- px : 해상도에 따라 상대적으로 달라지는 기본 단위
- % : 부모 요소의 글자 크기를 100% 기준으로 계싼한 % 단위
- em : 부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1단위
- rem : em과 비슷하지만 부모 요소가 아닌 최상위 요소의 크기를 100%기준으로 계산
- vw, vh : vw는 뷰포트 너비값의 100분의 1단위, vh는 뷰포트 높이값의 100분의 1단위
표현방법
font-size: 사용자지정 사이즈;
✨font-weight
문자를 굵게 하거나 굵은 문자를 보통으로 재설정하는 속성입니다.
표현방법
font-weight: bold; //굵은 문자로 설정
font-weight: normal; //보통 문자로 설정
✨font-style
문자를 기울어지게 하거나 기울어지지 않게 재설정하는 속성입니다.
표현방법
font-style: italic; //기울어지게 설정
font-style: normal; //기울어지지 않게 설정
✨font-variant
문자를 작은 대문자로 설정하거나 원래 문자로 재설정하는 속성입니다.
표현방법
font-variant: small-caps; //작은 대문자로 설정
font-variant: normal; //원래대로 설정
✨line-height
줄 간격을 px, %, em 등의 단위로 지정할 수 있습니다.
표현방법
ling-height: 1.4;단위를 생략하면 em으로 처리됩니다.
✨font
'font-'로 시작하는 속성들은 line-height와 함꼐 'font: ~'한 줄로 붙여 쓸 수 있는데 그럴 경우 반드시 순서에 맞추어 써야 하며, 글자 크기와 글꼴은 결코 생략할 수 없습니다.
표현방법
body { font: 12px/1.4 'G마켓 산스', Gulim; }
✨웹폰트
기본 글꼴이 아닌 경우 글꼴 파일이 없는 사용자의 화면에서는 페이지에 사용한 글꼴이 제대로 표시되지 않을 수 있으므로, 언제 어디서나 원하는 글꼴로 페이지가 표시되도록 하려면 웹폰트를 사용하는 것이 좋습니다.
- @font-face
- 구글 웹폰트
✨color
글자의 색상을 지정하는 속성입니다.
색상을 표현하는 방법
- 색상명 : 해당 색상을 의미하는 고유명사를 속성값으로 사용
- HEX값 : 세가지 색상(red, green, blue)을 16진수로 표현하는 것 (#rrggbb)
- RGB값 : rgb형태로 기술하며 10진수로 표현하는 것
- HSL값 : hsl형태로 기술하며 hue는 0~360 색상환 값, saturation(채도), lightness(명도)는 %값으로 표현
- RGBA값 : rgba 형태로 기술하며 alpha는 0~1 사이의 투명도를 나타냄
- HSLA값 : hsla 형태로 기술하며 alpha는 0~1 사이의 투명도를 나타냄
✨letter-spacing, word-spacing
글자 간의 간격은 letter-spacing, 단어 간의 간격은 word-spacing 속성으로 값을 부여합니다.
lette-spacing에 음수를 부여하면 원래 자간이 떨어진 글꼴일 경우 더욱 밀착시킬 수 있습니다.
표현방법
letter-spacing: 지정값;
✨text-decoration
글자의 밑줄, 윗줄, 가운데줄을 치거나 쳤던 줄을 없애줍니다.
- underline : 밑줄
- overline : 윗줄
- line-through : 가운데줄
- none : 줄 없음
✨text-transform
대소문자 변경을 실행합니다.
- uppercase : 대문자
- lowercase : 소문자
- capitalize : 첫글자만 대문자
✨text-shadow
그래픽 프로그램의 도움 없이도 글자에 그림자를 주는 속성을 부여할 수 있습니다.
표현방법
text-shadow: npx npx npx rgba(0,0,0,0);
오늘은 이렇게 문자 관련 스타일 13가지를 간단하게 정리해봤습니다!
도움이 되셨다면 역시 공감과 댓글!! 아시져? ( •̀ ω •́ )✧
(css 정리하는게 더 힘든 거 같네요)
