자간을 조절하려면 CSS의 letter-spacing 속성을 사용하면 됩니다.
바로 예제 코드를 보시죠.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>안녕하세요. 저는 비스카이비전입니다.</p>
<p style="letter-spacing: 5px">안녕하세요. 저는 비스카이비전입니다.</p>
<p style="letter-spacing: 10px">안녕하세요. 저는 비스카이비전입니다.</p>
</body>
</html>
|
cs |
이 웹페이지를 열어보면 다음과 같은 화면이 보입니다.
letter-spacing 속성에 큰 값을 줄 수록 자간이 넓어지는 것을 확인하실 수 있습니다.
참고로 줄간격(행간)을 조절하는 속성은 line-height입니다.
'Dev > HTML, CSS' 카테고리의 다른 글
| [css] 스크롤 기능은 작동하지만, 스크롤바는 안 보이게 하기 (19) | 2022.08.02 |
|---|---|
| [css] 요소 사이에 구분선 넣고 싶다면? ex) 게시판 | 1:1문의 | 회원가입 (2) | 2022.04.11 |
| [css] 요소의 종횡비를 지정해주는 css 속성, aspect-ratio (0) | 2022.04.10 |
| [css] input 박스 또는 textarea 박스 클릭했을 때 테두리 강조되지 않게 하기(:focus 의사 클래스) (0) | 2022.03.20 |
| [html] 5초마다 자동으로 웹 페이지를 새로고침 해주고 싶다면? (2) | 2021.05.11 |
| [html] 이메일 주소에 링크 걸 때, mailto: (0) | 2021.04.06 |
| 카카오 책 검색 API 이용해서 무한 스크롤 기능 가진 도서 검색 웹 페이지 만들기 (15) | 2021.03.18 |
| [css] 링크 밑줄 없애기 (4) | 2021.03.13 |