태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.

지난 시간까지의 기본 태그에 대해서 배워봤는데요, 어떠셨나요? 어렵지는 않았는지요? 오늘은 단락 태그에 관해 배우겠습니다.

태그를 처음 접하실때 이해도 중요하지만 메모장이나 에디터 프로그램 여시고 각 섹션별로 하나씩 안보고도 자유자재로 쓸 수 있을 만큼 외우시는 것이 제일 좋은 방법이라고 말씀 드리고 싶습니다.

처음 영어를 배울때 알파벳은 무조건 외우셨지요? 그것과 같은 맥락입니다. 테이블 태그까지 대충 10~13단락으로 구성 할 것인데 이것은 html문서의 가장 기본적인 것들입니다.그냥 따라해보시면서 무조건 외우세요.

기초태그가 끝나면 웹 표준에 접근해서 CSS로 바로 넘어갈 예정이니까 이 부분에서 기초태그에 관해 모르면 전혀 따라 올수가 없습니다. 아셨죠? 지난 시간에 배운 본문 글자 속성에 관한 태그들을 복습하고 본문으로 들어 갈께요.

※ 지난 시간 복습하기

˚ 본문 글자 크기 지정하기 : <font size="크기"> 본문 내용 </font> 크기는 1~7까지의 숫자로 지정할 수 있고, px나 pt단위로 입력

˚ 본문 글자 색깔 지정하기 : <font color="색상"> 본문 내용 </font> 색상은 #xxxxxx 임의의 6개 코드값으로 입력

˚ 본문 글자 글꼴 지정하기 : <font face="글꼴"> 본문 내용 </font>

오늘 배울 태그는 단락에 관한 태그인데요. 줄바꿈 태그, 문단 태그, 인용태그, 수평선 태그에 대해 알아 보겠습니다.

 

● 줄바꿈 태그 <br>

어디서 많이 본 태그죠?(빙고~기억력이 좋으시군요.) 이전 글의 예제문에 나왔던 태그입니다. 어떤 태그인지 몰라 그냥 그대로 따라 쓰셨을 것입니다. <br>태그는 줄을 바꿔주는 태그입니다.

html문서에서는 줄바꿈을 지정해 주지 않으면 한 줄로 이어진 글로 해석을 합니다. 즉 강제로 줄바꿈 명령을 해주어야 하는 것이죠. 쉽게 말해 에디터 화면에서 enter키를 치는 것과 같습니다. 에디터 화면에서 글을 쓰면서 enter키를 치면 html모드에서는 자동으로 <br>태그가 삽입 됩니다.

지금 확인해 보세요. 글쓰기 화면으로 가서 enter만 여러번 누르고 html모드로 가셔서 확인해 보시면 위 <br>태그만 enter키를 친 만큼 표시 되어 있을 겁니다. 에디터 설정에 따라<p>가 나타날 수 도있습니다. (이건 너무 쉽죠?)

<br>태그는 열기 닫기의 공식이 없이 독립적으로 사용하는 태그입니다. 그냥 <br>만 외우세요.

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

<html>
  <head>
    <title>줄 바꿈 태그 br</title>
   </head>
       <body>
          <h2> 줄바꿈 태그 br </h2>
             오늘은 줄바꿈 태그를 배우고 있다.<br> 이렇게 쓰고 나서 실행 화면을 보면 어떻게 나올까?<br>
       </body> 
</html>

 

● 문단을 표시하는 태그 <p>

<p>태그는 문단을 나눠 주는 태그입니다. 여러개의 문장을 쓰다가, 내용이 바뀌어서 단락을 바꾸어 줄때 쓰는 것입니다. 바로 위에 <br>태그를 설명하는 부분에서 보시면 5개의 단락으로 이루어져 있지요? 중간에 한 줄의 빈 공백이 들어가 있습니다. 이처럼 문장과 문장사이의 단락을 구분하는 것이 <p>태그입니다.

보통 문단을 나눌때 <br>태그를 두번 쓰는 것과 동일하게 적용된다고 생각하시면 이해가 편합니다. 단, 이후에 CSS를 배우실때 뜻하지 않는 결과값이 나오기 때문에 습관적으로 쓰지 않는 것이 좋습니다.

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

<html>
  <head>
    <title>문단 태그 p</title>
   </head>
       <body>
          <h2> 진달래꽃 </h2>
              <p>지은이:김소월</p>
              <p>나 보기가 역겨워<br>가실 때에는<br>말없이 고이 보내드리우리다<br></p>
              <p>寧邊에 藥山<br>진달래꽃<br>아름 따다 가실 길에 뿌리우리다<br></p>
              <p>가시는 걸음 걸음<br>놓인 그 꽃을<br>사뿐히 즈려 밟고 가시옵소서<br></p>
              <p>나 보기가 역겨워<br>가실 때에는<br>죽어도 아니 눈물 흘리우리다</p>    
       </body> 
</html>

※ 여기서 잠깐: 혹시 티스토리 에디터에서 <br>태그와 <p>태그를 enter키로 설정하는 법을 모르시는 분들을 위해 잠깐 알려 드릴께요.

html 태그 자동 입력기

티스토리 에디터 화면의 enter키 설정하기

관리자에서 환경설정> 기타설정으로 가시면 글쓰기 환경란이 있습니다. 거기에 보면 위 이미지와 같이 enter키로 편하게 <br.태그나 <p>태그를 넣는 방법에 대해서 설정할 수 있도록 되어 있습니다.

원하는 곳에 체크를 하시면 에디터모드에서 enter키를 눌렀을때 선택되어진 태그가 자동으로 삽입되는 것이죠. 

 

● 인용구를 쓸때 사용하는 태그

간간히 글을 쓰다 보면 책이나 다른 사람의 말을 인용 하여 쓸 경우가 있습니다. 이때 인용한 부분을 블럭을 지어 표기되게 합니다. 이때 쓰는 태그가 인용태그입니다. 인용태그 공식은 <blockquote> 인용할 내용</blockquote>입니다.(단어가 조금 길고 생소하지요? 그냥 외우세요)

요즘은 에디터라는 좋은 프로그램이 있어서 실상 html문서에서 직접 인용태그를 넣어 쓸 일은 없지만 그래도 알아 두고 가야 할 태그입니다. 에디터 화면에서 수정이 안될 경우 직접 html 을 만져야 하기 때문에 그렇지요.

인용태그를 쓸 경우에는 지정된 부분을 자동 줄바꿈하여 들여쓰기를 하게 됩니다. 제 블로그에 보시면 핑크색 박스안이 인용구인데, 이렇게 인용태그를 css로 제어하여 설정 할 수 있습니다.(나중에css에서 자세히 설명할께요)

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

<html>
  <head>
    <title>인용태그</title>
   </head>
       <body>
          <h2> 어린왕자를 읽고... </h2>
              오늘 어린왕자란 책을 읽었습니다<br> 마치 동화처럼 너무 재미있고<br>
              새로운 시각을 보여주는 책이었습니다.<br>어린 왕자 에서 보면 보아뱀에 관한 얘기가 나옵니다
              <blockquote>내 그림은 모자가 아닙니다.<br> 코끼리를 삼켜서 소화시키고 있는<br>
              보아뱀을 그린 거거든요.<br>그래서 이번에는 또 그림을 그렸습니다.<br>
              어른들이 잘 알아 볼 수 있도록 보아뱀의 뱃속을 그렷습니다.<br>
              어른들에게는 항상 자세히 설명해 주어야 하니까요<br></brockquote>
       </body> 
</html>

● 수평선 태그

<hr>태그는수평선을 그어주는 태그는입니다. 수평선 태그는 말 그대로 수평선을 그려 주는 태그입니다. <hr>안에 앞서 배웠던 크기나, 위치 색상등을 지정 해 줄 수 있습니다.

  • 수평선의 크기를 나타낼때: <hr size="npx"> (n=1~n까지의 숫자를 픽셀수로 계산)
  • 수평선의 길이를 나타낼때: <hr width="가로 폭"> (가로 폭에 대한 비율로 지정하거나 특정 수치를 입력)
  • 수평선의 색상를 나타낼때: <hr color="색상"> (HTML, 글자에 관한 태그_font의 기본속성 알기-참고)
  • 수평선의 위치를 나타낼때: <hr align="위치"> (HTML문서의 제목과 관련한 태그를 배우자.-참고)
  • 수평선의 음영과 입체를 나타내지 않게 할때: noshade를 추가

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

<html>
  <head>
    <title>수평선 태그</title>
   </head>
       <body>
          <h2> 수평선 그리기 </h2>
              수편선 그리기<p><hr>
              수평선 20px 굵기로 그리기<p><hr size="20px">
              수평선 100px 길이로 그리기<p><hr width="100px">
              수평선 빨강색으로 그리기 <p><hr color="#ff0000">
              수평선 왼쪽으로 위치 지정하기 <p><hr align="left" width="200px">
              수평선 음영 지우기 <p><hr size="20px" width="300px" align= left color="#000000" noshade>
       </body> 
</html>

이전 시간에 배운 태그들이 많아서 어렵지 않으셨죠? 오늘까지 html문서 기본 태그에 대해서 배웠습니다. 여기까지만 아셔도 이제 스킨소스를 보실때 대충 무슨 뜻인지 아는 명령어들이 하나씩 보이실 겁니다. html태그 강좌는 알라딘 창작블로그 "웹디자인과 블로그팁"에 연재중입니다. 강의료라 생각하시고 추천과 믹시 듬뿍 주시면 힘내서 더 좋은 글로 보답 하겠습니다.

 

이 글이 링크되어 있는 곳:

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

 

posted by 예스비™

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

    1. Favicon of http://0168265.tistory.com BlogIcon 미자라지 2009.06.27 08:16 수 정 댓 글

      잘 보고갑니다...^^

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.06.27 18:18 수 정

        찾아 주셔서 감사합니다.
        그나저나 미자라지님 강아지 너무 운동 시키는것 아니에요?
        힘들어 보여요~날씨가 더워서 인가?ㅋㅋㅋ

    2. Favicon of http://toyvillage.tistory.com BlogIcon 라이너스™ 2009.06.27 08:17 수 정 댓 글

      간단한듯하지만...
      초심으로 돌아가서 좋은 공부했네요^^
      행복한 하루되세요~

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

        사실 이 글이 어제 올라왔어야 하는데~
        주말에 머리 아프게 해드린건 아닌지 모르겠네요.
        주말엔 다 잊고 쉬어 줘야하는뎨 말이지요ㅋㅋ

    3. Favicon of http://thinknow.tistory.com BlogIcon Channy™ 2009.06.27 08:30 수 정 댓 글

      헛.. 오늘도 모르는 거 발견했어요.
      잘 배우고 갑니다~ ^^

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.06.27 18:24 수 정

        수평선 태그 말씀하시는 건가요?
        아마도 제 예상이ㅋㅋ
        즐거운 주말되세요.

    4. Favicon of http://lalawin.tistory.com BlogIcon 라라 윈 2009.06.27 09:25 수 정 댓 글

      수평선 긋는 거 어떻게 하는지 무척 궁금했었는데...
      예스비님 쉽게 배웠어요~~ ^^
      감사해요~~ ^^

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.06.27 18:24 수 정

        수평선이요? 아하...
        수평선 태그 잘 써먹으면 꽤 유용한 태그죠^^&
        예제문에<p>태그를 넣어 줬는데,
        그거빼고 써보세요.
        글자 바로밑에 수평선이 그어져요.

    5. Favicon of http://lelocle.tistory.com BlogIcon 악랄가츠 2009.06.27 11:33 수 정 댓 글

      우앙 쏙쏙들어오는 강의~! 좋아요~!
      질문있어요 ㅜㅜ
      스페이스바 효과를 내는 태그명령어는 뭔가요?
      위치를 중간 왼쪽 오른쪽말고...
      약간 전진 배치시키고 싶을때.. 스페이스바치듯이 ㅜㅜ
      그걸 모르겠더라고요 ㅋㅋ

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.06.27 18:21 수 정

        오잉~~가츠님 너무 앞서 가욧!!~
        나중에 자바스크립트 할때 다 배우는데~ㅋㅋㅋ
        &nbsp; 입니다.
        길어요~ㅋㅋ 알고만 계세요^^&
        쓰는것보다 스페이스바 누르는 것이 나으니까요.

    6. Favicon of http://jsapark.tistory.com BlogIcon 탐진강 2009.06.28 14:45 수 정 댓 글

      모르는 저에게는 신기한 정보입니다.
      좋은 정보 잘 보고 갑니다.

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.06.28 17:20 수 정

        오잉~탐진강님도 모르는 것이 있었꾼요.
        도움 되셨다니 제가 기쁘네요.
        주말 끝자락이네요. 마무리 잘하시고...
        힘찬 한주 또 시작해야죠!

    7. Favicon of http://2proo.net BlogIcon 2Proo 2009.06.29 00:17 수 정 댓 글

      수평선은 저도 모르던거네요. hr이 수평선인건 알았는데 그 옵션은 전혀 몰랐어요;;;

      그나저나.. 전 p 테그가 싫어요.. ㅠ_-
      티스토리에서 글쓰기 모드에 p 테그가 어딘가 있으면 글 모양이 흐트러져서.. 편집할때
      곤란스럽더라구요. 그래서 html 모드로 항상 p 테그 없애려고 노력한답니다;;;;
      잘쓰면 좋은데 전 희안하게 싫더라구요 ㅡㅡ;;

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.06.29 02:42 수 정

        테이블태그를 알면 수평선태그 잘 사용 안하게 되죠~ㅋ
        테이블에 border로 대치하거나, 스타일시트로 사용해서 저도 수평선 태그는 사용안하게 되요.
        블로그하면서, 서식만들때 가끔 사용할라나?
        이전에는 거의 전무후무 했었죠.
        그래도 알아두면 꽤 유용한 태그에요.
        저 같은 경우, 서식으로 소제목 붙일때 데코레이션으로 쓴답니다.ㅋㅋ

    8. Favicon of http://loved.pe.kr/ BlogIcon 윤초딩 2009.12.01 09:41 수 정 댓 글

      책은 웹표준인데... 내용이.. ^^
      살짝 테클입니다~ ^^

    9. Favicon of http://moneyamoneya.tistory.com/ BlogIcon 머니야 2009.12.01 09:52 수 정 댓 글

      깊게들어가긴 실코...대충 때우려고 했던 내용들을...강의 보면서 확실하게 해줄수 있으니 참 좋은데요?

    10. Favicon of https://badjunko.tistory.com BlogIcon 못된준코 2009.12.01 12:36 신고 수 정 댓 글

      저는 이런 기본부터 잘 배워둬야겠어요.
      외운다고 하는데도 매일 잊어벌기 일수에요.ㅎㅎ

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2009.12.01 18:23 신고 수 정

        ㅎㅎ 그런가요?
        복습 많이 많이 하시라구~일부러 텀을 많이 두고 발행을 하는데~
        기초만 알아도 html반은 다 정복 하신 거랍니다~

    11. Favicon of http://ceo2002.tistory.com BlogIcon 불탄 2009.12.01 13:22 수 정 댓 글

      천천히 복습하고 있는데도 많은 도움이 되네요.
      특히 정작 알고는 있었지만 아주 정확한 용도는 모르고 대충 사용했는데 상세한 설명을 읽어보니 "아~" 하게 되더랍니다.
      앞으로 나올 태그들에 대한 기대감이 생기네요. ^^
      12월도 행복한 시간으로 가득하시길...

    12. Favicon of http://boskim.tistory.com BlogIcon 털보아찌 2009.12.01 23:19 수 정 댓 글

      공부 잘 하고갑니다.
      예스비 선생님!

    13. Favicon of http://thesky.pe.kr BlogIcon 세이지 2009.12.02 04:00 수 정 댓 글

      오오~ +_+ 즐겨찾기 추가 합니다.
      이런 좋은 정보를 이제 알다니~~~
      꼭 알고 싶었던 정보에요!

    14. Favicon of http://jongamk.tistory.com BlogIcon 핑구야 날자 2009.12.02 08:38 수 정 댓 글

      잘 배웠습니다. 많은 도움이 되었습니다.

    15. Favicon of http://jongamk.tistory.com BlogIcon 핑구야 날자 2009.12.02 08:58 수 정 댓 글

      HanRss구독으로 더 배워볼까 합니다. 기대해도 되겠요죠.. 감사합니다.

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

        부담~~ㅋㅋ
        열심히 따라오시면 제가 오히려 힘이 납니다.
        태그는 공부하는 것이라 터울을 두고 발행을 하고 있습니다^^&

    16. Favicon of http://lowr.tistory.com BlogIcon White Rain 2009.12.02 12:03 수 정 댓 글

      저기 위에 인용구 태그. 블로그를 처음 시작했을 때 가장 흥미로운 요소였어요. 각기 다들 너무나 독특하고 개성 넘치는 인용구 태그를 사용하시기에 어떻게 바꾸나..하고 정말 머리를 싸매기도 했는데 알고보니 정말 쉽더군요. 그래서 요즘은 스킨을 바꿀 때 가장 큰 고려사항 중 하나가 바로 인용구 태그랍니당.
      그리고 수평선 태그도 정말 그저 궁금하기만 했었는데. 많이 배우고 가요. 이제 문단 제목 나누는 것도 바꿀 때가 되었는데... 그대로 따라서 한번 써먹어봐야겠어요. 그렇잖아도 스킨을 바꾸려고 마음 먹고 있었거든욤. 문단 나누는 태그도 바꿀 때가 된 것 같고 말이죰.

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2009.12.03 13:27 신고 수 정

        맞아요~ㅋ
        리스트태그하고 인용태그만 데코레이션을 잘해도 글 분위기가 팍~바뀌죠ㅎㅎ
        멋진 스킨 만드시길 바래요^^& 기대 됩니다.

    17. 2009.12.03 14:14 수 정 댓 글

      비밀댓글입니다

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

        음~디자인로그 마루님의 하트링 말씀하시는 것 같은데...
        가져다가 링크만 바꿔서 쓰시면 될 듯 해요.
        http://www.designlog.org/2511044 이글 참고하셔요.
        그래도 모르시면~네이트온 콜~!@.@

    18. Favicon of http://coreanboi.tistory.com BlogIcon 꾼이 2009.12.09 13:54 수 정 댓 글

      요즘에는 티스토리 스킨도 그렇고 xhtml이 많이 쓰이기 때문에
      html -> xhtml로 컨버팅하는 팁도 자세히 알려주시면 더욱 좋을 것 같아요.

    최근 댓글

    최근 트랙백

    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