[CSS] font에 관한 CSS들
2021. 6. 9. 22:59글자크기
자간
자간은 글자와 글자 사이의 간격을 말합니다.
보통 -20에서 40으로함.
하지만 CSS에서는 2가지가 있습니다.
글자 사이의 간격은 letter-spacing으로, 단어 사이의 간격은 word-spacing으로 정합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body { font-family: Consolas, monospace; }
.a { letter-spacing: -5px; }
.b { letter-spacing: 0px; }
.c { letter-spacing: 5px; }
.d { word-spacing: -20px; }
.e { word-spacing: 0px; }
.f { word-spacing: 20px; }
</style>
</head>
<body>
<h1>letter-spacing</h1>
<p class="a">Lorem Ipsum Dolor</p>
<p class="b">Lorem Ipsum Dolor</p>
<p class="c">Lorem Ipsum Dolor</p>
<h1>word-spacing</h1>
<p class="d">Lorem Ipsum Dolor</p>
<p class="e">Lorem Ipsum Dolor</p>
<p class="f">Lorem Ipsum Dolor</p>
</body>
</html>
행간
행간은 줄간격을 말합니다. 윗줄과 아랫줄의 간격이 너무 멀어지거나 너무 붙으면 산만하고 가독성이 떨어집니다.
행간은 보통 글자 크기의 2배에서 2, 3정도 더하거나 빼서 조정하면 됩니다. 글자 크기가 10pt이면 행간은 20pt 정도 (17pt~23pt)로 지정합니다.
e.g.)
%: 브라우저 문자 키준크기에 대한 %값
line-hegiht: 150%
em: 브라우저 문자 기준을 1em으로 했을 대의 값
line-height: 0.5em
px: px의 값
line-height: 5px
장평
장평은 글자의 가로 폭을 말합니다.
font–stretch 속성
font- stretch는 폰트의 장평을 지정하기 위한 속성으로, 정상 크기인 normal을 기준으로 장평을 축소하는 ultra-condensed, extra-condensed, condensed, semi-condensed 값과 장평을 확대하는 semiexpanded, expanded, extra-expanded,ultra-expanded 값을 사용할 수 있습니다.
div {
font-stretch : expanded;
}참고하면 좋을 문헌
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=blackboys20&logNo=221464005493
[html,css]줄간격(행간)조정법
html에서 행간조절은 CSS line-height로 설정할 수 있다. 줄 간격이 너무 좁을 때, 가독성이 떨어지기 ...
blog.naver.com
- https://brunch.co.kr/@sweetannie/126
편집 디자인 기본기(반드시 합격하는 디자인 포트폴리오)
반드시 합격하는 디자인 포트폴리오 02 | 탄탄한 편집 디자인의 기본기를 보여주는 포트폴리오 포트폴리오를 준비할 때 최신 트렌드를 반영하고, 화려한 색상을 사용하여 강렬한 인상을 줄 수
brunch.co.kr
'FrontEnd > CSS' 카테고리의 다른 글
| [CSS] @media query, 미디어 쿼리 이해 (반응형) (0) | 2022.02.04 |
|---|---|
| [CSS] 예제로 배우는 @media query, 미디어 쿼리 이해 (0) | 2022.02.04 |
| [CSS] 엘리먼트 혹은 태그들을 가운데 정렬하기 (0) | 2021.12.06 |
| [CSS] 자식 선택자, 하위 선택자 (0) | 2021.05.08 |
| [CSS] 테두리 라운드 형태로 하기 (0) | 2021.04.13 |