happy cat image

everdevel

hello world

EEOS

에버디벨 책을 학습할 수 있는 클라우드 개발 환경을 제공합니다.
개발환경구축없이 태블릿에서도 개발할 수 있는 책의 예제와 프로젝트
오직 당신을 위한 스토리지, URL, DB, 무제한 트래픽
그리고 웹기반 개발환경을 제공합니다.

더 알아보기
에버디벨이 만든 무료 클라우드 개발환경을 소개합니다.

띄어쓰기의 길이 조정하기

글자와 글자간에 있는 띄어쓰기의 길이를 조정하는 방법에 대해 알아볼게요.
word-spacing 속성을 사용합니다.

word-spacing 속성 사용 방법

선택자{word-spacing:값}

사용하는 값에는 길이값을 넣어줍니다.
다음 예제로 word-spacing의 기능을 확인합시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>word-spacing :: everdevel</title>
<style>
    p:nth-child(1){word-spacing:10px}
    p:nth-child(2){word-spacing:20px}
    p:nth-child(3){word-spacing:30px}
    p:nth-child(4){word-spacing:40px}
    p:nth-child(5){word-spacing:50px}
</style>
</head>
<body>
    <div>
        <p>10px - 에버디벨에 방문해 주셔서 감사합니다. 앞으로도 열심히 컨텐츠를 만들겠습니다.</p>
        <p>20px - 에버디벨에 방문해 주셔서 감사합니다. 앞으로도 열심히 컨텐츠를 만들겠습니다.</p>
        <p>30px - 에버디벨에 방문해 주셔서 감사합니다. 앞으로도 열심히 컨텐츠를 만들겠습니다.</p>
        <p>40px - 에버디벨에 방문해 주셔서 감사합니다. 앞으로도 열심히 컨텐츠를 만들겠습니다.</p>
        <p>50px - 에버디벨에 방문해 주셔서 감사합니다. 앞으로도 열심히 컨텐츠를 만들겠습니다.</p>
    </div>
</body>
</html>

(로그인을 하시면 위의 코드를 실행 할 수 있습니다.
oAuth인증 방식으로 빠르고 간편하게 로그인할 수 있습니다.
네이버, 구글, 카카오, 라인의 ID로 순식간에 로그인 하세요.)

위 코드의 결과

letter-spacing는 글자와 글자의 간격을 지정했는데 word-spacing은 띄어쓰기의 길이를 지정한다기 보다는 단어와 단어 사이의 간격을 지정한다고 보는게 맞습니다.
다만 단어를 구별하는 기능은 없기에 [가방]과 [가방을]을 띄어쓰기가 없다면 하나로 보므로 띄어쓰기의 길이를 조정한다고 보는게 더 맞을것 같습니다. ^^


    
    

강좌로 돌아가기

댓글 0개

정렬기준