태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.

모든 문서는 크게 제목과 본문으로 이루어 집니다.

HTML문서 역시 제목과 본문으로 크게 나눌 수가 있습니다.오늘 배울 내용은 HTML문서의 제목과 관련한 태그에 대해서 알아 보겠습니다. 이전 시간의 HTML의 기본 구조는 다 숙지 하셨겠지요? (안보고도 쓸 수있도록 반복 연습하세요)

HTML문서의 제목에 관련한 태그는 크게 제목 크기지정, 제목색 지정, 제목 정렬하기등입니다. 색과 글씨체는 본문으로 넘어가서 배우기로 하고 오늘은 제목크기와 제목 정렬하기에 대해 알아 보겠습니다.

※ 지난 시간 복습하기 :
 ˚ 태그 공식: <>,</> <태그명령어>~내용~</태그명령어>
 ˚ HTML의 기본 구조 :
 <html>
  <head>
    <title>문서의 타이틀</title>
   </head>
       <body>본문에 들어갈 내용 </body>  
 </html>

 

● HTML 문서의 제목 글자 크기

HTML문서의 제목 크기를 지정하는 태그는 h입니다. 제목의 크기는 1~6까지 숫자이고, 1이 제일 크고,6이 제일 작습니다.

다시 말해 제목 크기를 지정하는 태그는 <hn></hn>입니다.(n은 1~6까지의 숫자) 아래와 같이 씁니다.

<h1> 글자 크기 h1 </h1>
<h2> 글자 크기 h2 </h2>
<h3> 글자 크기 h3 </h3>
<h4> 글자 크기 h4 </h4>
<h5> 글자 크기 h5 </h5>
<h6> 글자 크기 h6 </h6>



태그 실행 예제( 메모장에 직접 쓰면서 연습하세요.)

<html>
  <head>
    <title>제목 글자 크기</title>
   </head>
       <body>
          <h1> 글자 크기 h1 </h1>
          <h2> 글자 크기 h2 </h2>
          <h3> 글자 크기 h3 </h3>
          <h4> 글자 크기 h4 </h4>
          <h5> 글자 크기 h5 </h5>
          <h6> 글자 크기 h6 </h6>
       </body> 
</html>

 

● HTML문서의 제목 정렬 하기

HTML문서 정렬 태그는 오른쪽(right), 가운데(center), 왼쪽(left)로 정렬 할 수있습니다. 문서의 제목을 정렬 할때는 <hn align="위치"></hn>으로 제목을 세 방향으로 정렬 할 수 있습니다.(n은 1~6까지의 숫자) 여기서 align은 위치를 지정해 주는 태그입니다.(자주 쓰는 태그이므로 꼭 기억하시기 바랍니다)

※ 공식이 하나 성립 되었습니다.

위치를 지정해 주는 태그 공식:align="위치"

태그 실행 예제( hn안에 정렬 공식을 추가 시킵니다.)
<html>
  <head>
    <title>제목 정렬하기</title>
   </head>
       <body>
          <h1 align="left"> 왼쪽 정렬하기 </h1><br>
          <h1 align="center"> 다운데 정렬하기 </h1><br>
          <h1 align="right"> 오른쪽 정렬하기</h1><br>
       </body> 
</html>

오늘은 문서의 제목 크기와 정렬 방법에 대해 배웠습니다. 어때요? 그렇게 어렵지 않지요? 차근차근 하나씩 배우시기 바랍니다. html강좌는 알라딘 창작블로그에 연재 중입니다. 제 글이 맘에 드셨다면 강의료라 생각 하시고 추천과 믹시 듬뿍 주고 가세요. 오늘은 여기 까지~ 연습 많이 하시기 바랍니다. (참고로 제 메일은 공지글에 나와 있습니다.)

 

이 글이 링크되어 있는 곳:

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

 

posted by 예스비™

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

    1. Favicon of http://youarethat.tistory.com BlogIcon 이리니 2009.06.16 21:27 수 정 댓 글

      예전에 참 많이도 씨름 했던 녀석들이네요. ^^
      잘 보고 갑니다. 이제 강좌 본격적으로 하실 모양이군요...? :)

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.06.17 08:39 수 정

        병원에 있느라 자료 정리가 안됬지만, 자꾸 미루게 되면
        시작도 못할 것 같아서 단락별로 정리하면서 포스팅 하려고요.
        시작이 반이라자나요~ㅋ

    2. Favicon of http://2proo.net BlogIcon 2Proo 2009.06.17 11:30 수 정 댓 글

      시작이 반이면... 음.. 벌써 반이나 진도가 나갔군요!!! ㅎㅎㅎ
      이번 이 태그는.. 검색엔진 최적화 SEO 에 아주 큰 역활을 하는 태그에요.
      굿굿 ㅇㅅㅇ乃

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.06.17 19:57 수 정

        태그란것이 알면 아주 간단 한것인데,
        처음에 너무 어렵게 생각 하시는 것 같아요.
        제가 배울때를 돌아보면, 간단하기때문에 한번에 몽땅 배우다 보니 머리속에 전부 담기가 벅차다고 할까요?
        단락별로 나누고 있는데 정리가 잘 될런지 모르겠어요.

    3. Favicon of http://moneyamoneya.tistory.com BlogIcon 머니야 머니야 2009.06.17 11:40 수 정 댓 글

      html 외면하면..많은 것들이 좀 어려움에 봉착되는 세상이긴 합니다..특히 it..ㅋㅋ
      복습삼아 잘 보구 가엽^^

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.06.17 19:59 수 정

        저도 복습겸 하나씩 정리 하는 중인데,
        자료 정리란게 참 구찮은 일인데, 시작하니 잘했다는 생각이 드네요.

    4. Favicon of http://kousa.tistory.com BlogIcon 미국얄개 2009.06.18 10:27 수 정 댓 글

      태그 정리하시나 보네요.
      다음 시간엔 무슨 내용의 강좌가 이어질지... 궁금하네요.

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.06.18 13:28 수 정

        기초 태그가 끝나면 포토샵을 강좌를 올릴려고 합니다.
        활용단계까지 어떻게 진행할지는 지금 고민 중이네요ㅠ
        생각보다 웹디자인 범위가 넓고 다룰게 많아서 조금 걱정이 되요.

    5. Favicon of http://skyevol.tistory.com BlogIcon 세루티 2009.09.12 11:25 수 정 댓 글

      좋은 정보 감사해요

      어제부터 고민했던 문제가 해결됬어요^^

    6. Favicon of http://lowr.tistory.com BlogIcon White Rain 2009.11.22 07:41 수 정 댓 글

      태그 안에 그 태그의 속성을 한글로 써놓으니 훨씬 빨리 외울 수도 있군요.
      잘 보고 갑니다. 휴일 행복하게 보내세요.

    7. Favicon of http://youarethat.tistory.com BlogIcon 이리니 2009.11.22 08:04 수 정 댓 글

      간만에 왔더니 목격하게 되는 이 엄청난 변화... 캬... 정말 블로그 이쁘네요. ^^

      어라..? 이거 수정 발행하시는 모양이구나... 바로 아래 이리니 댓글이 1빠로 있네요.

      여튼 그간 잘 지내셨지요...? 일요일 아침에 듬성듬성 눈에 띄는 이웃들 블로그 눈팅만
      빠르게 다니는 중이에요. ^^

      이쁜 블로그 정말 부럽네요.
      행복한 일요일 보내세요. :)

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2009.11.22 08:20 신고 수 정

        어랏~!
        이게 누구셩?
        살아 계셨쎄요?
        이리니님 안계신 사이에 리뉴얼좀 했드랬죠~ㅋ
        이제 자주 뵐 수 있는 거죠?

    8. Favicon of http://tirun.tistory.com/ BlogIcon 티런 2009.11.22 08:54 수 정 댓 글

      예스비님 글 볼때마다 느끼지만
      제대로된 태그하나 모른채..
      지금까지 버터온 제가 자랑(?)스럽습니다.ㅎㅎㅎㅎ
      공부할렴니당...ㅠㅠ

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2009.11.22 09:15 신고 수 정

        블로그에 필요한 기초적인 태그만 강좌를 하려고해요.
        너무 어렵게 생각하지 않으셨으면 해요.
        기본태그만 섭렵하셔도, 스킨도 만드실수 있고, 수정도 하실수 있습니다.
        여러가지로 많이 유용하지요.

    9. Favicon of http://jsapark.tistory.com BlogIcon 탐진강 2009.11.22 09:58 수 정 댓 글

      차근 차근 하나씩 배워보는 재미가 있을 듯 합니다.
      주말 잘 보내세요

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2009.11.23 05:16 신고 수 정

        탐진강님은 IT쪽에 종사하시니 다 아실듯 ㄷㄷㄷ;;
        금새 주말이 지나가 버렸네요;
        마무리 잘하시고~새주 힘차게 출발하세요.

    10. 2009.11.22 21:02 수 정 댓 글

      비밀댓글입니다

    11. Favicon of http://sooji4u.com BlogIcon 한수지 2009.11.23 06:45 수 정 댓 글

      웹디자인 하시나봐요..
      넘 멋진 블로그입니다
      저도 기본적인 TAG는 아는데
      전체 디자인이 안되요.ㅎㅎㅎ
      넘 멋지십니다
      많이 배우러 올께요 (^^)

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2009.11.23 19:05 신고 수 정

        네~감사합니다.
        디자인은 태그뿐만아니라 여러가지 것들을 마스터 해야겠지요?
        자주 놀러 오세요~
        저도 자주 방문하겠습니다.

    12. 털보아찌 2009.11.23 11:23 수 정 댓 글

      열심히 공부하고 갑니다.
      좋은하루! 오늘도 행복하세요.

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2009.11.23 19:06 신고 수 정

        아구~ㅋㅋ
        어렵진 않으셨죠?
        제 글이 도움이 되셨으면 좋겠습니다.

    13. Favicon of http://skynautes.tistory.com BlogIcon 바람처럼~ 2009.11.23 14:45 수 정 댓 글

      그래도 오늘은 다행히 아는게 나왔네요 휴~
      저에겐 너무나 머리 아픈 태그 ㅋ
      제가 주로 쓰는건 바로 저 center죠 ㅋㅋㅋ

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2009.11.23 19:07 신고 수 정

        처음엔 저도 무척 머리가 아팠어요ㅎㅎ;
        자꾸 사용하다 보면 저절로 이해가 됩니다.

    최근 댓글

    최근 트랙백

    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