문자 관련 스타일

문자 관련 스타일

 

font-family

• 문자의 글꼴을 지정하는 속성입니다.
• 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분합니다.
• 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. 

사용 예시

font-family: '돋움', Dotum, Arial, Helvetica, sans-self;

 

font-size

• 문자의 글자 크기를 지정하는 속성입니다.
• 글자 크기는 명시하지 않을 경우 16px이 기본값입니다.
• CSS에서 유용하게 사용하는 단위들이 있습니다. 

종류

단위	설명
px	· 해상도에 따라 상대적으로 달라지는 기본 단위입니다.
%	· 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위입니다. · 특별한 설정이 없다면 16px이 100%가 되므로, 150%는 24px이 됩니다. · 만약 부모 요소가 10px이었다면 150%는 15px이 됩니다.
em	· 부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1 단위입니다. · 특별한 설정이 없다면 16px이 1em이 되므로, 1.5em은 24px이 됩니다. · 만약 부모 요소가 10px이었다면 1.5em는 15px이 됩니다.
rem	· rem은 em과 비슷하지만 부모 요소가 아닌 최상위 요소의 크기를 100% 기준으로 계산합니다. · rem의 r은 root, 즉 html요소를 뜻하므로, html 요소에서 지정한 글자 크기가 1rem이 됩니다.
vw, vh	· vw는 뷰포트 너비값이 100분의 1 단위입니다. · vh는 뷰포트 높이값의 100분의 1 단위입니다.

 

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.4em은 140%입니다. 줄간격 없이 딱 붙이고자 할 경우에는 100% 또는 1em 값을 지정하면 됩니다.
• 부모 요소의 font-size를 기준으로 계산되며, height와 같은 수치를 주면 세로 중앙정렬을 할 수 있습니다.

 

font

• 'font-'로 시작하는 속성들은 line-height와 함께 'font: ~' 한 줄로 붙여 쓸 수 있습니다.
• 한줄로 붙여 쓸 경우 세 가지 순서에 맞추어 써야 하며, 글자 크기와 글꼴은 결코 생략할 수 없습니다.

font: [font-weight, font-style, font-variant] [font-size/line-height] [font-family];

 

웹폰트

• 기본 글꼴이 아닌 경우 글꼴 파일이 없는 사용자의 화면에서는 페이지에 사용한 글꼴이 제대로 표시되지 않을 수 있습니다.
• 언제 어디서나 원하는 글꼴로 페이지가 표시되도록 하려면 웹폰트를 사용하는 것이 좋습니다.
• 웹폰트는 라이센스가 필요한 유료 폰트도 많이 있으므로 반드시 확인하고 사용하도록 합니다.  

 

▶ @font-face

CSS에서는 글꼴 파일을 업로드하여 사용하는 @font-face를 사용할 수 있습니다. 글꼴 파일의 용량이 크면 로딩되는 속도가 느리고, 용량이 적으면 글자가 약간 뭉개져 보일 수 있으므로 여러 번 테스트를 하여 결정합니다.  

 

▶ 구글 웹폰트

글꼴 파일을 구해 업로드하지 않고도 구글 웹폰트를 이용하면 이미 업로드되어 있는 경로를 통하여 무료 웹폰트를 사용할 수 있습니다.

 

color, 색상 코드 고찰

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

 

▶ 색상값

해당 색상을 의미하는고유명사를 속성값으로 사용합니다. 사용할 수 있는 속성값으로는 여러가지가 있으나 해당 색상값을 의미하는 단어를 미리 알면 좋습니다. 
참고로는 https://uigradients.com/ 가 있습니다. 

 

▶ HEX값

red, green, blue의 세 가지 색을 16진수 00~ff 사이의 수치로 표현하는 것으로서 #rrggbb형태로 기술합니다.
#aabbcc와 같이 세 가지 색 모두 두 자리 값이 같으면 #abc라고 한자리로 줄여 쓸 수 있습니다.
최대값 #ffffff는 흰색을 의미하고, 최소값 #000000은 검정색을 의미합니다. 

 

▶ RGB값

rgb(red, green, blue) 형태로 기술하며 red, green, blue는 10진수 0~255 사이의 수치로 표현합니다.

 

▶ HSL값

hsl(hue, saturation, lightness) 형태로 기술하며 hue(색상)는 0~360 색상환 값, saturation(채도)과 lightness(명도)는 %값으로 표현합니다.

 

▶ RGBA값

rgba(red, green, blue, alpha) 형태로 기술하며 alpha는 0~1 사이의 투명도를 나타냅니다.

 

▶ HSLA값

hsla(hue, saturation, lightness, alpha) 형태로 기술하며 alpha는 0~1 사이의 투명도를 나타냅니다.

 

letter-spacing, word-spacing

• 글자 간의 간격은 letter-spacing 속성으로 값을 부여합니다.
• 단어 간의 간격은 word-spacing 속성으로 갑을 부여합니다.
• letter-spacing에 음수를 부여하면 원래 자간이 떨어진 글꼴일 경우 더욱 밀착시킬 수 있습니다.

 

text-decoration

• 글자에 밑줄, 윗줄, 가운데줄을 치거나 쳤던 줄을 없애줍니다.

속성 값	속성 설명
underline	밑줄
overline	윗줄
line-through	가운데줄
none	줄 없음

 

text-transform

• 대소문자 변경을 실행합니다.

속성 값	속성 설명
uppercase	대문자
lowercase	소문자
capitalize	첫글자만 대문자

 

text-shadow

• CSS에서는 그래픽 프로그램의 도움 없이도 글자에 그림자를 주는 속성을 부여할 수 있습니다.

사용 예시

text-shadow: 가로거리 / 세로거리 / 흐릿하게 퍼지는 정도(쓰지 않으면 효과 없음) / 색상