[html/css] font-style 속성 (normal, italic, oblique 차이)
글꼴은 font 속성을 사용해 글꼴, 스타일, 글꼴 굵기, 글꼴 사이즈를 한꺼번에 지정하거나
각각 지정할 수도 있다고 했습니다.
[html/css] 글꼴을 지정하는 font 속성 배우기
글꼴체를 지정할 때는 font-style 속성을 사용하며
글꼴 굵기는 font-weight 속성
글꼴 크기는 font-size 속성
글꼴을 지정할 때는 font-family 속성을 사용합니다.
오늘 배울 부분은 글꼴을 이탤릭체로 만다는 font-style 속성 입니다.
|
font-style 속성 |
속성값은 다음과 같습니다
|
normal : 기본값 ltalic : 이탤릭체 oblique : 기울어짐꼴 |
상속 여부 : 상속됨
설명 ☞
font-style: normal;
normal은 설정하지 않을 때랑 똑같습니다.
즉, 브라우저 기본값으로 설정되어 있는 글꼴이 나옵니다. 그래서 제가 보는 글꼴이 다른 브라우저에서
다른 글꼴로 보일 수 있습니다.
*브라우저 기본 글꼴 확인 방법은?
font-style: italic;
font-style: oblique;
italic과 oblique는 화면에 거의 똑같은 모양인 이탤릭체로 표시가 됩니다.
html에서는 <i>태그로 이탤릭체로 표시하지만 비추천 태그이므로 css를 이용하시는 게 좋습니다~
ltalic, oblique 차이
이해를 돕기 위해 굳이 차이를 구분하자면
italic은 흘려 쓴 서체(활자)이며, 그래서 이탤릭체라고 하죠.
oblique은 원래의 서체가 기울어진 모양이라고 하네요
그럼 실제 html과 css를 작성해 연습해 보도록 하겠습니다.
font style.htm<html>
<head>
<style type="text/css">
span{
font-family: "Times New Roman", serif;
font-size: 40px;
}
.no{
font-style: normal;
}
.it{
font-style: italic;
}
.ob{
font-style: oblique;
}
</style>
</head>
<body>
<span class="no">동해물과 백두산이 </span></br>
<span class="it">동해물과 백두산이 </span></br>
<span class="ob">동해물과 백두산이 </span></br>
<span class="no">font</span><span class="it">font</span><span class="ob">font</span>
</body>
</html>
첫번째 줄이 normal
두번째 줄이 italic
세번째 줄이 oblique입니다.
실행화면입니다.
IE 실행화면
(저는 IE 브라우저 기본값을 궁서체로 설정했기 때문에 normal값이 궁서체로 표시됩니다)
italic과 oblique은 거의 차이가 없습니다.
구글 크롬 실행화면(브라우저 기본값을 '맑은고딕'으로 설정했기 때문에 normal값이 '맑은고딕'으로 표시됩니다)
'css' 카테고리의 다른 글
| [html/css] font-variant 속성(normal, small-caps) (0) | 2014.05.08 |
|---|---|
| [html/css] font-weight 속성 (bold, 100~900, bolder, lighter) (0) | 2014.05.07 |
| [html/css] 글꼴을 지정하는 font 속성 배우기 (1) | 2014.05.04 |
| [html/css] 스타일 적용 우선 순위와 속성 강제 적용 !important (1) | 2014.04.24 |
| [html/css] div 2개 정렬하기 (오른쪽, 왼쪽, 중앙 정렬) (0) | 2014.04.23 |
댓글