[html/css] letter-spacing 글자 간격을 지정 속성
부제: 인라인 블록 요소(inline-block)의 간격 없애는 방법
오늘은 글자 사이의 간격을 지정하는 letter-spacing 속성을 배워 보겠습니다.
▶letter-spacing 속성값
normal 기본값으로 문자에 공백이 들어가지 않음. 0px과 같음
길이값 px, em, % 등으로 지정 (음수값 가능)
상속 여부: yes
글꼴 크기를 지정하는 font-size 속성(px, pt, %, em 차이)
설명
▶주의: 글자 사이 간격은 브라우저마다 기본값이 설정되어 있는데(글꼴 미터 계산에 기초한)
위의 속성값을 적용한다고 해서 브라우저 기본값이 바뀌진 않습니다. 기본 설정에 추가하여 공백이 생기는 것이랍니다~
▶html/css 작성 예
|
html |
|
<p id="one">normal : 나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄</p> |
|
css |
|
#two{letter-spacing: 1em;}
|
▶실행화면 입니다
인라인 블록 요소(inline-block)의 간격 없애기
인라인 블록이란, 요소는 인라인인데 내부는 블록 처럼 표시하는데요,
박스 모양이 아래 그림처럼 옆으로 늘어섭니다.(float를 적용하지 않았는데도...)
그런데 박스 사이의 간격이 생겼습니다.
박스 사이의 공백이 생기는 이유는 태그 작성시 공백(space 키를 눌러)을 넣는다는지 태그가 줄바꿈 되어
작성된다든지의 이유도 있지만, 다른 하나는 위에 설명한 것처럼 브라우저에 기본적으로 설정된 글자 사이의
간격이 원인일 때입니다.
이때 간격을 없애려면 어떻게 해야 할까요?
STEP1: letter-spacing 속성을 이용하여, 박스의 부모 요소에 음수값 (예: letter-spacing: -5px;)을 지정합니다.
그럼 아래 처럼 간격이 없어집니다.
그런데 속성값이 자식 요소에까지 상속되어 글자가 너무 붙었습니다. 그래서
STEP 2: 자식 요소에 기본값(letter-spacing: normal;)을 적용해 재설정을 해줍니다.
▶html/css 작성 예
|
html |
|
<p> |
|
css |
|
p a{ } |
letter-spacing.htm
오늘은 글자 간격 지정 속성 letter-spacing을 배웠습니다.
다음 시간에 word-spacing 도 알아볼게요~
'css' 카테고리의 다른 글
| white-space 속성(pre, pre-wrap, pre-line 차이) (1) | 2014.06.17 |
|---|---|
| [htm/css] word-spacing 속성(단어 간격) (0) | 2014.06.16 |
| [html/css] text-transform 속성 (대문자 전환) (0) | 2014.06.12 |
| [html/css] 수직으로 가운데 정렬 방법 (다섯 가지) (3) | 2014.06.11 |
| [html/css] text-indent 속성(들여쓰기) (0) | 2014.06.10 |
댓글