글 꼴의 종류와 크기를 결정했다면, 볼드/이텔릭과 같은 글꼴의 장식 및 자간, 줄간 들여쓰기와 같은 문단 편집기능에 대하여 살펴봅니다. 몇몇 기능은 브라우저에 따라, 적용/미적용 여부가 다르며, 적용되더라도 화면의 보여지는 모습이 다릅니다. 충분한 테스트 후 활용하도록 합니다.
[ 글꼴의 굵기 지정 ]
font-weight: normal (default value);
글꼴 그룹의 어떤 굵기의 글꼴을 사용할 것인지를 설정합니다. 초기값은 normal(400)이며, 굵은 글꼴은 bold(700) 키워드를 사용합니다. 설정값은 하위 요소로 상속됩니다. 다음은 Verdana 글꼴의 굵기 속성입니다.
* normal, bold, 100~900
- font-weight: normal
- font-weight: bold
- font-weight: 100
- font-weight: 200
- font-weight: 300
- font-weight: 400
- font-weight: 500
- font-weight: 600
- font-weight: 700
- font-weight: 800
- font-weight: 900
위와 같이, 일반적인 글꼴 그룹은 9종류의 굵기가 다른 글꼴이 준비되어 있지 않는 경우가 많습니다.
따라서, 일반적으로 100~900까지의 9단계의 굵기 지정보다는, 굵은 글꼴 표현을 위한, bold를 주로 사용합니다. 기본값은 normal이기 때문에, 일반 글꼴에는 특별한 지정이 필요하지 않습니다.
* lighter, bolder
100~900의 굵기의 범위에서, 현재 굵기(디폴트값 또는 상위 요소에서 상속된 값)보다 각각 한 단계 가는 글꼴, 또는 굵은 글꼴을 지정합니다.
[ 글꼴 스타일의 지정 ]
font-style: normal (default value);
글꼴 그룹의 표준, 이탤릭, 기울임 글꼴을 지정하는 속성입니다. 설정 값은 하위요소로 상속됩니다.
* normal, italic, oblique
글꼴 그룹의 종류에 따라, 이텔릭체 전용, 기울임 전용 글꼴이 디자인되어 있습니다. 해당 글꼴을 사용하도록 지정이 가능합니다. 해당 글꼴이 없는 경우에는 표준 글꼴을 기울인 글꼴이 이용됩니다. 기본값은 normal이기 때문에, 일반 글꼴에는 특별한 지정이 필요하지 않습니다. 다음은 Verdana 글꼴의 스타일 속성입니다.
- font-style: normal
- font-style: italic
- font-style: oblique
[ 작은 대문자 지정 ]
font-variant: normal (default value);
영어 알파벳의 표기방식입니다. 알파벳을 대문자료 표기하되, 소문자 크기로 작게한 종류의 글꼴인small-caps를 지정할 수 있습니다. 설정 값은 하위 요소로 상속되며, 기본값은 normal이기 때문에, 일반 글꼴에는 특별한 지정이 필요하지 않습니다.
* normal, small-caps
- font-variant: normal
- font-variant: small-caps
[ 대소문자 지정 ]
text-transform: none (default value);
영 어 알파벳의 표기방식입니다. 문장에 있는 단어의 첫글자만을 대문자로 표시하거나, 전체를 대문자 또는 소문자로 표기하게 할 수 있습니다. ID와 같이 대/소문자의 구분입력 단위요소에 사용할 수 있습니다. 설정 값은 하위 요소로 상속되며, 기본값은 none이기 때문에, 일반 글꼴에는 특별한 지정이 필요하지 않습니다.
* none, capitalize, lowercase, uppercase
- text-transform: none; Capitalization effects
- Text-Transform: Capitalize; Capitalization Effects
- text-transform: lowercase; capitalization effects
- TEXT-TRANSFORM: LOWERCASE; CAPITALIZATION EFFECTS
[ 글꼴 장식 ]
text-decoration: none (default value);
글꼴 장식에 대한 속성입니다. 아래 예와 같이, 밑줄이나 윗줄, 취소선을 표시하거나 깜박이게 할 수도 있습니다.
이 속성은 상위 요소로부터 상속되지 않습니다. 다만, 블록 레벨 요소에 대하여 지정한 경우에는 해당 박스 안에 포함되는 인라인 요소에 모두 적용됩니다. 또한, 인라인 요소에 대하여 지정한 경우에는 해당 요소가 생성하는 모든 박스에 대하여 적용됩니다.
* none, underline, overline, line-through, blink
- text-decoration: none a tag in li tag
- text-decoration: underline
- text-decoration: line-through
- text-decoration: overline
- text-decoration: blink
위와 같이, blink옵션값은 IE에서는 적용되지 않습니다. (Firefox 2.0에는 적용됩니다)
또한, 첫번재 줄에 사용된 코드는 다음과 같습니다. 즉, 같은 레벨의 요소에는, text-decoration값이 상속되지 않습니다.
<li style="text-decoration: none;">text-decoration: none <a href="#">a tag in li tag</a></li>
[ 줄 간격 설정 ]
line-height: normal (default value);
정확히는, 인라인 요소의 높이를 설정하는 값입니다. 만약 블록 레벨 요소에 값을 지정한 경우에는, 해당 박스에 포함될 인라인 요소 박스의 최소 높이를 지정하는 것이 됩니다. 설정 값은 하위 요소로 상속됩니다.
* 인라인 요소에 대한 높이값 표현의 디폴트 값이 IE7과 Firefox2의 차이가 현격하기 때문에, 상위레벨(body, hemtl)에서 픽셀이나 포인트로 결정해 주는 것이 좋습니다.
- line-height: normal
line-height: normal - line-height: 150%
line-height: 150% - line-height: 15px
line-height: 15px - line-height: 1.5em
line-height: 1.5em
기본값은 normal이며, 브라우저가 적절한 줄간격을 설정합니다. "실수값+단위 형태"로 지정할 수 있습니다.
전각(em)의 경우는, 해당 글꼴의 줄 간격을 1로 간주하고 퍼센티지(%)는 100%로 간주하고 계산되어 집니다. 즉, 상위레벨의 값을 1(em), 100(%)으로 계산하여 표현합니다. 픽셀(px) 및 포인트(pt)등과 같은 값을 지정할 수도 있습니다. 단, 인라인 레벨의 박스 높이인 만큼 음수값을 지정할 수 없습니다.
[ 문자 간격 설정 ]
letter-spacing: normal (default value);
글자와 글자의 간격을 설정하는 속성입니다. 주의할 점은 설정하는 값이 자간이 나타내는 것이 아니라, 기본 자간에 설정값이 추가(+)되는 것 입니다. 따라서, line-height와는 달리, letter-spacing값에는 음수값을 지정할 수 있습니다. 설정 값은 하위 요소로 상속됩니다.
* 문단 정렬이 좌우 배분(text-align: justify)인 경우에는, 문단 정렬에 우선되어 간격값이 조정됩니다.
[ font-family: Verdana, Gulim, Dotum, sans-serif; font-size: 9pt; ]
[ 단어 간격 설정 ]
word-spacing: normal (default value);
공백으로 구분되는 하나의 단어와 단어 사이의 간격을 설정하는 속성입니다. 자간과 마찬가지로 설정하는 값이 단어 간격을 나타내는 것이 아니라, 기본 간격에 설정값이 추가(+)되는 것 입니다. 따라서, line-height와는 달리, word-spacing값에는 음수값을 지정할 수 있습니다. 설정 값은 하위 요소로 상속됩니다.
* 문단 정렬이 좌우 배분(text-align: justify)인 경우에는, 문단 정렬에 우선되어 간격값이 조정됩니다.
[ font-family: Verdana, Gulim, Dotum, sans-serif; font-size: 9pt; ]
[ 글꼴 크기의 보정 ]
font-size-adjust: none (default value);
현재, IE7은 지원하지 않고 있으며, Firefox 2.0에서는 적용이 되는 속성으로 용도는 아래와 같습니다.
어떠한 이유로(사용자에게 글꼴이 없거나, 요소 하위에 다른 글꼴이 사용되는 등), 요소에 지정된 글꼴이 표시되지 않는 경우, 글꼴 기본 크기의 차이에 따른 이질감을 조정하기 위한 속성입니다. 해당 글꼴(지정한 글꼴) 크기에 대한 소문자 x의 높이의 비율을 지정해 두면, 다른 글꼴이 사용되더라도 소문자 x의 높이가 일정하게 유지되도록 하여 일관성을 유지하게 됩니다. 설정값은 하위요소로 상속됩니다.
아래는, Firefox 2.0에 font-size-adjust를 적용한 예입니다.
<div style="font-family: Verdana; font-size: 14pt; font-size-adjust: 0.54;">Verdana 14pt <font style="font-family: 'Times New Roman';">Times New Roman 14pt</font></div>
주의할 점은, 해당 값에 따라 지정된 글꼴(위의 경우 Verdana)도 크기가 보정될 수 있다는 점입니다. 따라서, 충분한 테스트 및 검증을 해 준 후 사용하도록 합니다.
한가지 재미있는 점은, 영문 글꼴을 대표글꼴로 설정하여 사용하는 경우, 한글의 크기가 브라우저에 따라 같지 않은 문제를, 이 속성을 통해 어느정도 보완할 수가 있다는 점이 있습니다. (적어도, IE에서는 적용되지 않기 때문입니다)
[ 장평 설정 ]
font-stretch: norman (default value);
현재, IE7, Firefox 2.0모두 지원하지 않습니다. 총 9단계의 속성값이 있습니다.
ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded이 있으며, 왼쪽에서 오른족으로 갈 수록 폭이 넓어집니다.
'Web > WEB기본' 카테고리의 다른 글
| [html5] [canvas] globalAlpha (투명도 주기) (0) | 2014.01.27 |
|---|---|
| [CSS] CSS3 Scrollbar, jQuery scrollbar (Webkit용) (0) | 2014.01.10 |
| [CSS] 글자색상 -webkit-text-fill-color:initial (0) | 2014.01.07 |
| [CSS] 글 포인트 주기 border-left-width이용 (0) | 2014.01.02 |
| [CSS] 배경 이미지 고정하기 ( background-attachment 속성 ) (2) | 2013.11.14 |
| [CSS] CSS Values and Units Module Level 3 수치 단위 (0) | 2013.10.24 |
| [CSS] CSS 속성 inherit 상속받기 (0) | 2013.10.23 |
| [CSS] Image vertical align with CSS, avoid absmiddle 효과 (0) | 2013.10.12 |
(로그인하지 않으셔도 가능)