article search result of '브라우저 기본 글꼴' : 2

  1. 2014.05.06 [html/css] font-style 속성 (normal, italic, oblique 차이)
  2. 2014.03.18 [html 기초] 제목 태그 h1, h2, h3, h4, h5, h6

[html/css] font-style 속성 (normal, italic, oblique 차이)



[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 2014.05.06 11:55

[html 기초] 제목 태그 h1, h2, h3, h4, h5, h6

 

 

 [html 기초] 제목 태그 h1, h2, h3, h4, h5, h6

 

이제부터 글자, 글꼴, 글꼴 색, 글꼴 크기 에 관련된 태그를  정리해 볼까 합니다. 

 

오늘 알아 볼 태그는 제목 태그 <h1> <h2> <h3> <h4> <h5> <h6>인데요

 

 

우선 알아둘 점은, html 작성 시 글꼴이나, 글자 크기 등을 특별히 지정하지 않으면

 

브라우저의 기본 글꼴과 크기로 표시됩니다.

 

 

예:

<html>
 <head>
 <title>지구별 안내서</title>
 </head>

<body>

1. 월요일<br>
2. 화요일<br>
3. 수요일<br>
4. 목요일<br>
5. 금요일<br>
6. 토요일<br>
7. 일요일

</body>
</html> 

 

 

제 브라우저는 웹 페이지 기본 글꼴이 '굴림체'로 설정되어

다음과 같이 화면이 나옵니다

 

      

 

만일, 갖고 계신 브라우저의 기본 글꼴이 '궁서체'라면 궁서체로 표시되겠지요..

 

 

 

<제목처럼 굵게 표시하는  h1, h2, h3, h4, h5, h6 태그>

 

<h1>는 가장 큰 제목을 쓸 때

<h2>는 그 다음 큰 제목

.

.

.

 

<h6>은 가장 적은 제목을 쓸 때 필요한 태그입니다.

 

 

예:

<html>
 <head>
 <title>지구별 안내서</title>
 </head>

<body>

<h1>1. 월요일</h1>

<h2>2. 화요일</h2>
<h3>3. 수요일</h3>
<h4>4. 목요일</h4>
<h5>5. 금요일</h5>
<h6>6. 토요일</h6>
7. 일요일

</body>
</html>

 

 

첫번째 예에서는, 줄바꿈 태그 <br>을 넣었지만

<h1>~<h6> 태그는 <p>태그와 마찬가지로 자동으로 줄바꿈이 된다는 것 유의해주세요!

 

    <제목 태그 실행 화면>

 

<h1, h2, h3, h4, h5, h6 의 px, pt, em 크기>

 

  IE7 IE8 FF2 FF3 Opera Safari3.1
H1 24pt 2em 32px 32px 32px 32px
H2 18pt 1.5em 24px 24px 24px 24px
H3 13.55pt 1.17em 18.7333px 18.7167px 18px 19px
H4   1em        
H5 10pt 0.83em 13.2667px 13.2833px 13px 13px
H6 7.55pt 0.67em 10.7333px 10.7167px 10px 11px

 

브라우저마다 기본값이 조금씩 다릅니다~ 그냥 참고용으로 보세요..

 

 

 [참고] 브라우저 기본 글꼴 설정 방법

 

브라우저 글꼴 변경 방법은 생각보다 쉽습니다.. 아래 순서대로 따라 하시면 됩니다~

 

STEP 1: 브라우저 맨 위 <도구>→<인터넷 옵션> 클릭

 

 

STEP 2: 인터넷 옵션 창이 나오면 이 창 하단 [글꼴] 클릭

 

 

 

STEP 3:  <글꼴> 팝업창이 뜨면 이곳에서 글꼴 지정을 해줌.

 

 

 

이번 시간엔 제목 태그 (h1, h2, h3, h4, h5, h6)에 대해 알아보았는데요

 

다음 시간엔  b, strong, em, i, cite, small 태그를 알아보겠습니다~
 

 

 

HTML 기초(태그 작성법, 저장 방법, 대소문자 구별, 서버에 올리는 방법)

 

[html/css기초] span, div

 

span, div 태그

 

[HTML, CSS 기초] class, id 선택자

지구별에
html 2014.03.18 11:55
Powerd by Tistory, designed by criuce