font-family
문자에 글꼴을 지정하는 속성
여러 단어이거나 한글 글꼴인 경우는 따음표로 감싸고 여러 개의 글꼴을 쉼표로 구분한다.
지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있다.
font-family: "NexonLv1Gothic" sans-serif;
font-size
:문자의 크기를 지정하는 속성.
크기를 명시하지 않을 경우 16px이 기본 값이다.
px
:해상도에 따라 달라지는 기본 단위.
font-size: 16px;
%
:부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위.
부모 요소의 글자 크기를 따로 지정하지 않았다면 16px이 100%가 된다.
font-size: 150%;
em
:부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1 단위.
보통 16px 정도가 1em이다.
font-size: 1.5em;
rem
:부모 요소가 아닌 최상위 요소의 크기를 100% 기준으로 계산한다.
rem의 r이 rooy, 즉 html 요소를 뜻한다.
html 요소에서 지정한 클자 크기가 1rem이 된다.
font-size: 1.5rem;
vw(view width), vh(view height)
: 각각 뷰포트1 너비와 높이 값의 100분의 1 단위
(주로 반응형에서 자주 쓰인다)
font-size: 10vw;
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 등이 있다. 2
단위를 생략하면 em으로 처리된다.
line-height: 1.6;
font
:font~로 시작하는 속성들은 한 줄로 붙여쓸 수 있다.
붙여 쓰는 경우는 반드시 세 가지 순서에 맞추어 써야 하며, 글자 크기와 글꼴은 생략할 수 없다.
ex)
| font: [font-weight, font-style, font-variant], [font-size/line-height], [font-family] ; |
body {font: bold 20px/1.6,"NexonLv1Gothic";
웹폰트
:언제 어디서나 원하는 글꼴로 페이지가 표시되도록 하려면 웹폰트를 사용하는 것이 좋다.
@font-face
:글꼴 파일을 업르도하여 사용하는 방식이다.
파일의 용량이 크면 로딩되는 속도가 느리고, 용량이 적으면 글자가 뭉개져 보인다.
css 파일 제일 상단에 위치해야 한다.
@font-face {
font-family: 'CookieRun';
font-weight: 400;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.ttf') format("truetype");
font-display: swap;
}
@import
css 파일 내에 @import를 이용하여 css를 연결하는 방식.
하나의 css 파일에 여러 개의 페이지 css를 로딩 시킨다.
@import url('https://webfontworld.github.io/SaenggeoJincheon/SaenggeoJincheon.css');
link
:html의 link 태그를 사용하는 css 연결 방식.
로딩 속도가 빠르고 css 파일 여러 개를 link 방식으로 연결하여 페이지를 로딩하여도 속도가 빠르다.
<link href="https://webfontworld.github.io/SaenggeoJincheon/SaenggeoJincheon.css" rel="stylesheet">
color
글자의 색상을 지정하는 속성.
color: yellow
색상 표현법
색상명
:해당 색상을 의미하는 고유 명사를 속성 값으로 사용한다.
색상값을 의미하는 단어를 미리 알고 있지 않으면 사용할 수 없다.
color: blue;
backgroung: red; //배경색
border-color: green; //테두리색
HEX값
:빛의 삼원색 (빨강, 파랑, 초록)을 16진수 00~ff의 수치로 표현하는 것.
# 다음에 00~ff까지의 6글자가 온다.
color: #00ff00;
RGB 값
:RGB 형태로 기술하며, 10진수 0~255 사이의 수치로 표현한다.
color: rgb(255,128,0);
HSL 값
:hsl 형태로 기술하며, 색상은 0~360의 색 상환값, 채도(saturation)과 명도(lightness)는 % 값으로 표현한다.
color: hsl(300, 100%, 50%);
RGBA 값
:rgba 형태로 기술하며 a는 (alpha)를 의미한다.
alpha는 0~1 사이의 숫자를 사용하여 투명도를 나타낸다.
color: rgba(0, 0, 0, 0.2);
HSLA 값
:hsla 형태로 기술한다.
rgba와 같이 a는 alpha(투명도)를 의미하며, 0~1 사이로 수로 표현한다.
color: hsla(0, 100%, 100%, 0.5)
letter-spacing(글자 간의 간격), word-spacing(단어 사이의 간격)
:음수를 부여하면 원래 글자 간의 간격이 넓은 글꼴인 경우에도 글자 사이를 밀착시킬 수 있다.
letter-spacing: -px; //글자 사이 간격
wold-spacing: 10px; //단어 사이 간격
text-decoration
:글자에 밑줄, 윗줄, 가운데줄(취소선)을 치거나, 쳤던 줄을 없애준다.
| 속성 | 설명 |
| underline | 밑줄 |
| overline | 윗줄 |
| line-throught | 가운데줄 (취소선) |
| none | 줄 없음 |
text-decoration: none;
tetx-transform
:대소문자 변경을 실행한다.
| 속성 값 | 설명 |
| uppercase | 대문자 |
| lowercase | 소문자 |
| capitalize | 첫 글자만 대문자 |
tetx-transform: capitallize;
text-shadow
:글자에 그림자를 주는 속성
형식
| text-shadow: 그림자가 원본에서 떨어지는 가로 거리, 세로 거리, 흐릿하게 퍼지는 정도, 그림자의 색상 |
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.4);