Tuesday, September 11, 2007
HTML CSS 글자 간격 조정 방법, 문자 간격 확대 축소 태그? letter-spacing
HTML 웹문서에서 단어를 구성하는 각 글자 낱자들의 간격을 조정하는 방법입니다. letter-spacing 이라는 CSS 스타일을 사용합니다. 글자 간격은 HTML 태그(Tag)로는 조정이 안됩니다. letter-spacing 속성은 다음 예제처럼 적용하면 됩니다.
웹페이지 글자 간격 늘이기 줄이기 예제 소스
예제 소스 파일명: example.html
※ 아래 박스 클릭 후, 키보드 화살표 키로 좌우 스크롤 가능함
간격을 -3px 이런 식으로 마이너스 값으로 지정하면 글자 간격이 축소됩니다.
줄 간격 조정 참고: ▶▶ HTML-CSS] 줄간격 지정, 줄 간격 조정(확대/축소) 하기; Line Height Attribute
웹페이지 글자 간격 늘이기 줄이기 예제 소스
예제 소스 파일명: example.html
※ 아래 박스 클릭 후, 키보드 화살표 키로 좌우 스크롤 가능함
<html>
<head>
<title>페이지 제목</title>
<style type="text/css">
.test { letter-spacing: 1em }
</style>
</head>
<body>
<!-- CSS 클래스를 사용하여, 글자 1자의 폭, 즉 1em 단위로 (소수점 사용 가능) -->
<div class="test">
철수는 학교에 갔습니다.
<br />
Compiler Configuration
</div>
<!-- 클래스 없이 직접 글자 간격을 3픽셀로 늘이기 -->
<span style="letter-spacing: 3px">영희는 철수를 만났습니다.</span>
</body>
</html>
<head>
<title>페이지 제목</title>
<style type="text/css">
.test { letter-spacing: 1em }
</style>
</head>
<body>
<!-- CSS 클래스를 사용하여, 글자 1자의 폭, 즉 1em 단위로 (소수점 사용 가능) -->
<div class="test">
철수는 학교에 갔습니다.
<br />
Compiler Configuration
</div>
<!-- 클래스 없이 직접 글자 간격을 3픽셀로 늘이기 -->
<span style="letter-spacing: 3px">영희는 철수를 만났습니다.</span>
</body>
</html>
간격을 -3px 이런 식으로 마이너스 값으로 지정하면 글자 간격이 축소됩니다.
줄 간격 조정 참고: ▶▶ HTML-CSS] 줄간격 지정, 줄 간격 조정(확대/축소) 하기; Line Height Attribute
tag: html
HTML | CSS | 자바스크립트 JavaScript
<< Home