태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

html 강좌 입니다. 이전 시간에 무엇을 배웠나요?(그새 잊으신건 아니죠?) 10원주고 까먹으셨다면 얼릉 복습하시고 이단락 공부 하시기 바래요.

복습이 확실히 되지 않으면 각 단락이 넘어 갈때마다 점점 어려워지고 뒤죽박죽 됩니다.(이전 단계를 안보고도 쓸 수 있을 만큼 복습하시고 다음 장으로 넘어 오세요. 꼭!!)

이번 시간에는 본문의 글자 속성에 관한 태그입니다. 글자를 나타내는 태그는 <font>내용</font>를 씁니다. 글자를 나타내는 태그에는 글자의 크기 지정, 글꼴 지정, 색 지정등 크게 세가지로 나눌 수 있습니다. 지금부터 속성별로 하나씩 알아보겠습니다.

※ 지난 시간 복습하기

˚ 제목 크기 지정하기 : <hn> 제목 쓰기 </hn> (n=1~6까지 숫자)

˚ 제목 위치 정렬하기 : <hn align="위치"> 제목 </hn> (n=1~6까지 숫자)

˚ 위치를 나타내는 태그 : right(오른쪽), center(중앙), left(왼쪽)

˚ 위치를 지정하는 태그 : align="위치"

 

● HTML, 본문의 글자에 관한 속성 태그들.

HTML, 문서 본문에 해당하는 글자 기본 태그는 <font> 본문 내용</font>입니다. <font>란 태그는 글자를 지칭하는 태그이며, <font>안에 글자 속성을 나타내는 태그를 지정 할 수 있습니다. 오늘 배울 글자의 크기를 지정, 글자의 색을 지정, 글꼴을 지정할 수 있습니다.

  • 글자의 크기를 지정하는 태그 : <font size="크기"> 본문 내용 </font>
  • 글자의 색을 지정하는 태그 : <font color="색상"> 본문 내용 </font>
  • 글자의 글꼴을 지정하는 태그 : <font face="글꼴"> 본문 내용 </font>

 

● HTML, 본문의 글자 크기를 지정하는 태그

기본 공식은 <font size="크기"> 본문 내용</font>입니다. 이전 시간에 제목을 나타내는 태그와 조금 차이가 있습니다. 제목을 나타내는 태그는 <h>자체에 크기에 관한 속성이 포함되어 있습니다.(대제목, 소제목 이렇게 말할 수있겠죠) 즉 다시 말해 <h>태그는 제목이란 뜻으로 제목의 크기를 1~6까지의 크기를 사용 합니다. 하지만 본문 글자의 크기를 지정 하는 태그는 size="크기"로 따로 지정 해주어야 합니다.

 

크기에 해당하는 수치는 3가지로 표시 할 수 있습니다.

  • size="n" (n=1~7까지의 숫자로 지정 1이 제일 작고,7이 제일 큼)
  • size="npt" (n=1~ 임의로 숫자를 지정 pt=포인트로 표시되는 단위)
  • size="npx" (n=1~ 임의로 숫자를 지정 px=픽셀로 표시되는 단위)

보통 문서를 작성할때 pt단위를 많이 사용하며, px단위는 css나 스크립트에서 많이 사용합니다.

에디터에서 보면 8pt부터 크게 36pt까지 자동 지정할 수 있도록 하였습니다. html로 보시면, 위의 태그 속성이 자동 지정되어 나타나 있습니다.

에디터에 나온 기본 크기외의 크기로 지정 하고 싶을 경우

예) 20pt로 정해서 쓰고 싶다.(18pt는 조금 작고, 24pt는 너무 큼) 이런 경우에 html 편집기를 선택하고 해당하는 부분에 위의 사이즈 공식을 대입해서 20으로 지정해 주면 20의 크기로 글자 크기가 정해 지게 됩니다.

태그 실행 예제(메모장에 직접 작성하며 연습하세요)

<html>
  <head>
    <title>본문 글자 크기</title>
   </head>
       <body>
          <h2> 제목 크기 h2 </h2>
             <font size="1"> 1~7까지 지정 해서 쓸 수있다. </font><br>
             <font size="9pt"> 1부터~n까지 pt단위로 쓸 수있다. </font><br>
             <font size="5px"> 1부터~n까지 px단위로 쓸 수있다. </font><br>
       </body> 
</html>

 

● HTML, 본문 글자의 색을 지정하는 태그

글자의 색을 지정하는 태그는 <font color="색상"> 본문 내용 </font> 입니다. 색상에 들어가는 색상값은 보통3가지로 표기가 되는데, html 문서는 6자리 코드값으로 표시합니다.

색명으로 표기 할 경우 색명이 색 표준 이름이 아니거나, 인터넷 브러우저에 따라 한글 명령어를 수행하지 못하므로 되도록 위의 6자리 코드값으로 사용하셔야 합니다.

색 코드 값은 #뒤에 6개의 영어와 숫자로 조합된 코드를 입력하여 쓰는데, 웹상에서 쓰는 코드를 웹컬러라고 명칭 합니다. 다시 말해 검정색으로 지정할 때 color="검정" or color="black"에 해당하는 color="#000000" 으로 표기하시면 됩니다.

웹컬러는 RGB를 기본으로 16진법을 이용해 추출하는데 색상의 가짓수가 너무 많아, 웹 안전색상이라 하여 216개의 색을 웹 표준 색으로 지정해 놓았습니다. 그외의 색상은 호환성이 떨어질 우려가 있어 되도록 웹에서 쓰는 색상은 216색범위 안에서 사용하는 것이 좋습니다.

태그 실행 예제(메모장에 직접 작성하며 연습하세요)

<html>
  <head>
    <title>본문 글자 색상</title>
   </head>
       <body>
             <font color="검정"> 한글색명으로 색 지정하기 </font><br>
             <font color="navy">영어 표기법으로 색 지정하기 </font><br>
             <font color="#ff0000"> 코드로 색 지정하기 </font><br>
       </body> 
</html>

아래의 표는 한국 표준 기본 16색을 차트로 만들어 놓은 것입니다. 색명에 해당하는 16색의 기본 코드를 html 태그에 적용하시면 됩니다.

16가지 기본 컬러 코드표
영어 표기 한글 표기 코드 표기 색상
black 검정 #000000
gray 회색 #808080
silver 은색 #c0c0c0
white 하양 #ffffff
yellow 노랑 #ffff00
lime 라임 #00ff00
olive 올리브색 #808000
green 초록 #008000
teal #008080
aqua 아쿠아 #00ffff
blue 파랑 #0000ff
navy 네이비 #000080
purple 보라 #800080
fuchsia 자홍색 #ff00ff
red 빨강 #ff0000
maroon 밤색 #800000 ;

 

● HTML, 본문의 글꼴을 지정하는 태그

본문의 글꼴을 지정하는 태그는 <font face="글꼴"> 본문 내용 </font>입니다. 이제 글꼴에 관한 태그가 무엇인지 아시겠지요? 네, 바로 face를 글꼴로 정해서 씁니다. 글꼴안에 들어갈 내용은 폰트이름을 넣어 주시면 됩니다.

face=돋움, face=굴림 이렇게 지정해 주시면 되는데, 영어 폰트명도 상관 없습니다. 단, 인터넷 무료폰트가 아니면 서버상태에 따라 폰트가 제대로 작동되지 않을 수 있습니다.(무료 기본 글꼴을 쓰는것이 좋습니다)

태그 실행 예제(메모장에 직접 작성하며 연습하세요)

<html>
  <head>
    <title>본문 글자 글꼴</title>
   </head>
       <body>
             <font face="돋움"> 돋움체로 쓰기 </font><br>
             <font face="굴림"> 굴림체로 쓰기 </font><br>
             <font face="궁서"> 궁서체로 쓰기 </font><br>
       </body> 
</html>

 

html 태그강좌는 제 글을 보시고 공부 하시는 분들 확실하게 복습하시라고 2~3일을 터울로 글을 발행 하고 있습니다. html 태그강좌는 알라딘 창작 블로그 "웹디자인과 블로그팁"에 연재중입니다. 강의료라 생각하시고 추천과 믹시 듬뿍 주시면  힘내서 더 좋은 글로 보답 하겠습니다.

 

이 글이 링크되어 있는 곳:

블코채널[blogkorea]: 웹디자인과 블로그팁에 링크되어 있습니다.
레뷰 아이템[revu]: 웹디자인& 블로그 Tip에 링크되어 있습니다.

 

posted by 예스비™

이글에 관한 저작권은 예스비™에게 있으며, 무단 전제및 스크렙(퍼가기), 인용, 수정등을 불허 합니다. 이 글의 사용은 공지의 "저작권안내"에 따라 사용 하시기 바랍니다. 불편하시더라도 가급적 rss로 구독하거나 제 블로그에 직접 방문하셔서 읽으시길 바랍니다. _by 예스비™
제 글이 맘에 드셨나요? RSS구독을 하시면 무료로 배달해 드립니다.
  • 한rss로 구독하기
  • 피드버너로 구독하기
  • 구글리더로 구독하기
  • 다음뷰로 구독하기
  • .:★:. 댓글은 이웃과 소통하는 마음의 창입니다. .:★:.   

    1. Favicon of http://toyvillage.net BlogIcon 라이너스 2009.11.24 10:50 수 정 댓 글

      멋진팁 잘 배우고갑니다^^
      그나저나 블로그 리뉴얼도 이쁘게되고
      프로필 사진도 멋져요^^

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2009.11.24 10:53 신고 수 정

        오잉~ㅋㅋㅋ
        라이너스님이당~1
        바쁜일은 마무리 되셨는지요.
        이제 자주 뵈어요^^&

    2. Favicon of http://windlov2.tistory.com BlogIcon 돌이아빠 2009.11.24 11:14 수 정 댓 글

      저 스타일들을 한꺼번에 사용도 가능한가요?
      즉 font style을 지정할때 size, color, face 등을 말이죠.

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2009.11.24 11:29 신고 수 정

        네 사용가능합니다.
        각각의 폰트 속성은 ;으로 구분을 해주시면 됩니다.

    3. Favicon of http://loved.pe.kr BlogIcon 윤초딩 2009.11.24 13:19 수 정 댓 글

      요즘걸로 해주세요~ 웹표준에 맞게요~ ^^

    4. Favicon of http://vart1.tistory.com BlogIcon 백마틴 초인 2009.11.25 00:29 수 정 댓 글

      강좌가 알이 탱글탱글 하군요,,,^ ^

    5. Favicon of http://lovesims2.tistory.com BlogIcon 유리구두 2009.11.25 13:03 수 정 댓 글

      HTML 알면 알수록 어렵네요^^
      눈이 뱅글뱅글 돌아요~ @_@

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2009.11.26 14:39 신고 수 정

        음~일단 관심의 차이일터...
        html 블로그에 꼭 필요한 것이니~ 관심을 먼저 가져보세요.

    최근 댓글

    최근 트랙백

    BLOG main image
    포토샵 강좌, html/css 강좌등 어렵게만 느껴졌던 웹디자인을 초보자도 쉽게 이해 할 수 있는 튜토리얼, IT 트랜드, 블로그팁과 운영법, 디자인 시각에서 풀어 헤치는 상품 리뷰등, 디자인에 대한 재밌고 유익한 정보를 제공하는 블로그입니다. by 예스비™
    rss

    위젯

    BLOG ★ NIGHT

    Blog♥Rings

    Blog♥Rings Family Blog & Sites T-Blog Web site meta hub site

    구독리스트

  • rss
  • Add to Google Reader or Homepage
  • 블로그코리아에 블UP하기
  • Powered by FeedBurner
  • BlogRankers.com
  • Page Ranking Tool