letter-spacing
CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!
letter-spacing 은 글자의 간격을 조절합니다.
예제 1
letter-spacing 개요
보기
하하하하하
하하하하하
하하하하하
하하하하하
하하하하하
하하하하하
소스
<div style="letter-spacing:-5px;">하하하하하</div>
<div style="letter-spacing:-1px;">하하하하하</div>
<div style="letter-spacing:0;">하하하하하</div>
<div style="letter-spacing:1px;">하하하하하</div>
<div style="letter-spacing:5px;">하하하하하</div>
<div style="letter-spacing:10px;">하하하하하</div>
<div style="letter-spacing:-1px;">하하하하하</div>
<div style="letter-spacing:0;">하하하하하</div>
<div style="letter-spacing:1px;">하하하하하</div>
<div style="letter-spacing:5px;">하하하하하</div>
<div style="letter-spacing:10px;">하하하하하</div>
사용된 CSS (클릭시 보기) :
letter-spacing
설명
- 마이너스 단위도 지정할 수 있습니다.
예제 2
보기
하하하하하
하하하하하
하하하하하
하하하하하
하하하하하
소스
<div style="letter-spacing:-0.5em;">하하하하하</div>
<div style="letter-spacing:0.1em;">하하하하하</div>
<div style="letter-spacing:0.5em;">하하하하하</div>
<div style="letter-spacing:1em;">하하하하하</div>
<div style="letter-spacing:2em;">하하하하하</div>
<div style="letter-spacing:0.1em;">하하하하하</div>
<div style="letter-spacing:0.5em;">하하하하하</div>
<div style="letter-spacing:1em;">하하하하하</div>
<div style="letter-spacing:2em;">하하하하하</div>
사용된 CSS (클릭시 보기) :
letter-spacing
설명
- em 은 배수 단위입니다.
예제 3
설정값 기본값으로 되돌리기
보기
하하하하하
하하하하하
소스
<style type="text/css">
.css_test { letter-spacing:-5px; }
</style>
<div class="css_test">하하하하하</div>
<div class="css_test" style="letter-spacing:normal;">하하하하하</div>
.css_test { letter-spacing:-5px; }
</style>
<div class="css_test">하하하하하</div>
<div class="css_test" style="letter-spacing:normal;">하하하하하</div>
사용된 CSS (클릭시 보기) :
letter-spacing
설명
- letter-spacing : normal 을 사용하면 설정된 값을 기본값으로 만듭니다.
연구 1
실습 - text-align:justify + line-height + letter-spacing 콜라보
보기
두바퀴로 가는 자동차 네바퀴로 가는 자전거 물속으로 나는 비행기 하늘로 나는 돗단배 복잡하고 아리송한 세상위로 오늘도 에드벌룬 떠있건만 포수에게 잡혀온 잉어만이 한숨을 내쉰다. 휴...
설명
+ 관련 CSS +