Tech Stock logo Tech Stock

자간 조정과 어간 조정에 대해서 좀 알아보자.

먼저 자간 부터…

자간은
letter-spacing 으로 조정한다

다음 코드와 결과를 보자

<!DOCTYPE html>
<head>
    <style>
        .letterspace1{letter-spacing: 3px;}
        .letterspace2{letter-spacing: 8px;}
        .letterspace3{letter-spacing: -2px;}
    </style>
</head>
<body>
    <div class = "letterspace1">
        <p>아버지가 방에 들어가신다. 아버지 가방에 들어가신다.</p>
    </div>
    <div class = "letterspace2">
        <p>아버지가 방에 들어가신다. 아버지 가방에 들어가신다.</p>
    </div>
    <div class = "letterspace3">
        <p>아버지가 방에 들어가신다. 아버지 가방에 들어가신다.</p>
    </div>
</body>
</html>

자간


그다음 어간…

어간은
word-spacing
으로 조정한다

다음 코드와 결과를 보자

<!DOCTYPE html>
<head>
    <style>
        .wordspace1{word-spacing: 10px;}
        .wordspace2{word-spacing: 20px;}
        .wordspace3{word-spacing: -10px;}
    </style>
</head>
<body>
    <div class = "wordspace1">
        <p>아버지가 방에 들어가신다. 아버지 가방에 들어가신다.</p>
    </div>
    <div class = "wordspace2">
        <p>아버지가 방에 들어가신다. 아버지 가방에 들어가신다.</p>
    </div>
    <div class = "wordspace3">
        <p>아버지가 방에 들어가신다. 아버지 가방에 들어가신다.</p>
    </div>
</body>
</html>

어간