문자 관련 스타일 완벽정리

오늘은 문자 관련 스타일 13가지에 대해 알아보겠습니다 😊

✍🏻 font-family ✍🏻

폰트 종류를 설정하는 속성으로, 여러 단어이거나 한글 글꼴인 경우 따옴표("")로 감싸고 여러 개의 글꼴을 쉼표(,)로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다.

font-family: 사용자 지정 폰트;

✍🏻 font-size ✍🏻

폰트의 크기를 지정하는 속성으로,  글자 크기는 명시하지 않을 경우 16px이 기본값입니다. 

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 등의 단위로 지정할 수 있습니다.

단위를 생략하면 em으로 처리됩니다. 1.5em = 150%입니다.

줄간격 없이 딱 붙이고자 할 경우에는 100% 또는 1em 값을 지정하면 됩니다.

부모 요소의 font-size를 기준으로 계산되며, height와 같은 수치를 주면 세로 중앙정렬을 할 수 있습니다.

 

ling-height: 1.4;
// 단위를 생략하면 em으로 처리됩니다.

✍🏻 font ✍🏻

'font-'로 시작하는 속성들은 line-height와 함꼐 'font: ~'한 줄로 붙여 쓸 수 있는데 그럴 경우

반드시 순서에 맞추어 써야 하며, 글자 크기와 글꼴은 결코 생략할 수 없습니다.

 

body { font: 12px/1.4 '쿠키런체', Gulim; }

✍🏻 웹 폰트 ✍🏻

기본 글꼴이 아닌 경우 글꼴 파일이 없는 사용자의 화면에서는 페이지에 사용한 글꼴이 제대로 표시되지 않을 수 있으므로, 언제 어디서나 원하는 글꼴로 페이지가 표시되도록 하려면 웹폰트를 사용하는 것이 좋습니다. 

 

✍🏻 color ✍🏻

글자의 색상을 지정하는 속성입니다.

CSS의 색상은 글자색 뿐 아니라 배경색, 테두리색 등 다양한 CSS 속성들에 적용됩니다.

 

색상명 : 해당 색상을 의미하는 고유명사를 속성값으로 사용
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);

 

✨ 감사합니다.