속성 | 설명 | 값 |
color | 글자색 | color,#FFFFFF,rgb{ , , } |
font-size | 글자크기 | 숫자pt, xp, %,smaller, larger, |
font-family | 글자체 | ex)굴림체, serif |
font-weight | 글자굵기 | 숫자 100~900 |
font-style | 글꼴모양 | nomal(표준), oblique(이탤릭) |
text-decoration | 글꼴장식 | none, underline, overline, |
text-transform | 대소문자 구분 | capitalize(첫 글자 대문자), |
font-variant | 소문자 크기의 대문자 | small-caps |
font-stretch | 글자 폭 | condensed,expanded |
text-shadow | 글자음영조절 | h-shadow v-shadow blur color |
글자 속성 지정
CSS 글자속성은 진하게, 크기, 글자타일 등을 정의한다.
Example
p {
font-family: "Times New Roman", Times, serif;
}
font-family: "Times New Roman", Times, serif;
}
글자체
글자 스타일은 이탈릭, 기울임, 보통이 있습니다.
Example
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
글자의 크기
Font size는 웹 사이트에서 글자의 크기를 설정합니다. 주로 사용하는 HTML 태그는 <H1> ~ <h6> 그리고 <P> 태그에 사용하니다.
글자크기값은 절대적으로 또는 상대적으로 사용 할 수있습니다.
절대적 크기
- 글자 크기속성 지정
- 브라우저에서 글자크기 조절을 하지 않는다.
- 절대적 크기는 물리적 크기의 결과에 대해 알 수 있다.
상대적 크기
- 주위의 상대적 크기를 지정하는 요소
- 브라우저에서 글자크기를 조절한다.
픽셀로 글자크기 지정
픽셀로 설정하는것은 글자크기를 완벽하게 제어할 수 있습니다.
Example
이 텍스트는 브라우저의 줌 아웃기능으로 축소, 확대 할 수 있는 상대적 크기지정 방법 입니다.
아래의 예제는 allows Internet Explorer 9, Firefox, Chrome, Opera, and Safari 등 에서 크기가 조절이 가능합니다.
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
Em으로 글자크기 지정
글자가 재조정되는 문제를 피하기 위해서 만은 개발자들은 픽셀대신 em을 사용합니다. 단. IE에서는 여전히 계속됩니다.
1em의 크기는 16px로 적용됩니다.
Example
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
Example
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
글자 굵기 지정
해결책은 <body>속성에 설정되어있는 퍼센트를 설정하여 지정하는 것 입니다.
Example
body {
font-weight:700;
}
font-weight:700;
}
H1 {
font-weight:500;
}
글자 색상 및 투명도 지정
위 사이트 추천합니다.
글자 음영 지정하기
.s1 {text-shadow: 2px 2px 2px gray;}
<div class="s1">글자 음영 지정 </div>
반응형