글자색 color
<span class="red">빨강</span>
<span class="orange">주황</span>
<span class="yellow">노랑</span>.red {
color: #F23030;
}
.orange {
color: #F28705;
}
.yellow {
color: #F2CB05;
}글자 크기 font-size
<span class="large">크게</span>
<span class="medium">중간</span>
<span class="small">작게</span>.large {
font-size: 24px;
}
.medium {
font-size: 16px;
}
.small {
font-size: 8px;
}글꼴 font-family
글꼴 이름을 쉼표로 연결해서 여러 개를 쓸 수 있다. 웹 브라우저가 차례대로 확인하면서 적용 가능한 글꼴로 보여 준다. 아래 코드는 구글 폰트에서 Poppins와 Noto Sans KR을 웹 폰트로 불러와서 쓴 예시다.
영문은 Poppins라는 글꼴에서 보여 주고, 한글은 Poppins에 없기 때문에 Noto Sans KR로 보여 주는 코드다. 이때 Noto Sans KR은 글꼴 이름에 띄어쓰기가 있기 때문에 따옴표로 감싸 준다.
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<p id="with-poppins">Poppins 있는 노토 산스 케이알</p>
<p id="without-poppins">Poppins 없는 노토 산스 케이알</p>
</body>
</html>#with-poppins {
font-family: Poppins, "Noto Sans KR", sans-serif;
}
#without-poppins {
font-family: "Noto Sans KR", sans-serif;
}글자 굵기 font-weight
100, 200, 300, ..., 900까지 100 단위로 쓴다.
<span class="bold">굵게</span>
<span class="regular">중간</span>
<span class="light">얇게</span>.bold {
font-weight: 600;
}
.regular {
font-weight: 400;
}
.light {
font-weight: 200;
}줄 높이 `line-height'
줄과 줄 사이의 간격을 조절할 때 CSS에서는 줄의 높이로 조절한다. 줄 높이의 값인 line-height는 단위 없이 쓰는 글자 크기에 상대적인 값이다.
예를 들어서 font-size가 16px이라면 line-height: 1은 16px 1 = 16px이 되고, line-height: 1.5는 16px 1.5 = 24px이 되는 식이다.
<p class="loose">
넓게<br>
넓게<br>
넓게
</p>
<p class="regular">
보통<br>
보통<br>
보통
</p>
<p class="tight">
좁게<br>
좁게<br>
좁게
</p>.loose {
font-size: 16px;
line-height: 1.7; /* 16px * 1.7 = 27.2px */
}
.regular {
font-size: 16px;
line-height: 1.5; /* 16px * 1.5 = 24px */
}
.tight {
font-size: 16px;
line-height: 1; /* 16px * 1 = 16px */
}텍스트 꾸미기 text-decoration
텍스트에 밑줄을 넣거나, 취소선을 넣거나 하는 데 사용하는 속성이다. 속성 값으로는 none, underline, line-through 등이 있다. 이 중에서도 none은 <a> 태그에 기본으로 들어 간 밑줄을 없애는 데 많이 사용한다. 그 외에 underline도 많이 쓰고, 가끔 line-through를 사용하기도 한다.
<a href="https://codeit.kr">
링크
</a>
<br>
<a class="none" href="https://codeit.kr">
밑줄 없는 링크
</a>
<br>
<span class="underline">
밑줄
</span>
<br>
<span class="line-through">
취소선
</span>.none {
text-decoration: none;
}
.underline {
text-decoration: underline;
}
.line-through {
text-decoration: line-through;
}