CSS 문자 관련 스타일

CSS 문자 관련 스타일

 

 

 

 

 

font-family

문자의 글꼴을 지정하는 속성

 

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

 

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

 

 

 

 

 

font-size, 단위의 고찰

문자 크기를 지정하는 속성

글자 크기를 지정하지 않으면 기본값 16px이 됩니다.

 

px

해상도에 따라 상대적으로 달라지는 기본 단위

font-size: 12px;

%

부모 요소의 글자 크기를 100% 기준으로 계산한 %단위

font-size: 150%;

em

부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1 단위

font-size: 1.5em;

rem

em과 비슷하지만 부모 요소가 아닌 최상위 요소의 크기를 100% 기준으로 계산

font-size: 1.5rem;

vw.vh

vw는 뷰포트 너비값의 100분의 1단위

vh는 뷰포트 높입값의 100분의 1단위

font-size: 10vw;

 

 

 

font-weight

문자를 굵게 하거나 굵은 문자를 보통 재설정하는 속성

굵은 문자로 설정	보통 문자로 설정
font-weight: bold;	font-weight: normal;

font-style

문자를 기울어지게 하거나 기울어지지 않게 재설정하는 속성

기울어지게 설정	기울어지지 않게 설정
font-style: italic;	font-style: normal;

font-variant

문자를 작은 대문자로 설정하거나 원래 문자로 재설정하는 속성

작은 대문자로 설정	원래대로 설정
font-wariant: amall-caps;	font-variant: normal;

line-height

줄간격을 px, %, em 등의 단위로 지정

line-height: 1.4;

단위 생략시 em으로 처리

font

'font-'로 시작하는 속성들은 line-height와 함께 'font:~'한 줄로 붙여 쓴다

반드시 세 가지 순서에 맞춰 써야한다

글자 크기와 글꼴은 생략 불가

맞는 예	틀린 예
font: 12px Times;	font: bold 12px/1.5; (글꼴을 쓰지 않았음)
	font: 12px/ 1.5 bold Times; (blod를 맨 앞에 써야함

웹폰트

글꼴 파일이 없는 사용자의 화면에는 글꼴이 표시되지 않으므로, 웹폰트를 사용하는 것이 좋다

@font-face

용량에 따라 달라질 수 있으니 테스트를 해봐야합니다.

글꼴을 다운받아 업로드할 폴더에 올리고, CSS에서 글꼴 이름, 파일경로, 파일유형을 설정합니다.

그 다음 선택자에 글꼴 이름을 부여합니다.

font/NaunmGotic.woff
/
@font-face { font-family:'NG'; src: url('font/NanumGotic.woff') format('woff'); }
/
p { font-family: NG; }

color, 색상 코드 고찰

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

색상명

해당 색상을 의미하는 고유명사를 속성값으로 사용

속성 값	속성 설명
color: orange;	글자를 오렌지로 표현
background: beige;	배경을 베이지로 표현
border-color: tomato;	테두리를 토마토색으로 표현

HEX값

red, green, blue의 세 가지 색을 16진수 00~ff 사이의 수치로 표현하는 것

color: #abcdef;

👆 글자를 red:ab, green:cd, blue:ef 색상으로 표현

RGB값

rgb 형태로 기술

color:rgb(225, 128, 0);

👆 글자를 red:225, green:128. blue:0 색상으로 표현

 

RGBA값

rgba(red, green, blue, alpha) 형태로 기술 alpha는 0~1사이의 투명도를 나타냄

background: rgba(225, 0, 0, 0.5);

👆 배경을 빨간색 반투명으로 표현

letter-spacing, word-spacing

글자간의 간격은 letter-spacing, 단어간의 간격은 word-spacing 속성으로 값을 부여

 

text-decoration

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

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

 

text-transform

대소문자 변경을 실행

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

 

text-shadow

text-shadow: 2px 3px 5px rgba(0,0,0,0.4);

👆 그림자가 원본에서 떨어지는 가로 거리/ 그림자가 원본에서 떨어지는 세로 거리/ 그림자가 흐릿하게 퍼지는 정도 (쓰지 않으면 퍼지는 효과 없음)/ 그림자의 색상