Block-Level Elements - Part I
Home > Document > HTML > 초급 과정 > Block Level Elements

페이지 목차

Block-Level

Block Level Element 란 브라우저 창의 일 부분에서 4각형 모양으로 면적을 차지하는 Element를 말합니다. 대표적인 Element로 바로 'BODY' Element가 있죠. 브라우저 창 전체를 차지합니다... 그럼 자주 사용되는 몇개의 Block-Level Element들을 알아보겠습니다.

Legend : Optional, Forbidden, Empty, Deprecated, Loose DTD, Frameset DTD   [표 보는 방법]
ElementStart tagEnd tagEmptyDeprecatedDTD
P O   
BLOCKQUOTE     
PRE     
H1 ~ H6     
DL     
DT O   
DD O   
HR FE  




1. P Element

P Element 는 문단(Paragraph)을 나누는 Element입니다. 따라서 사용 빈도가 아주 높은 Element라고 할 수 있습니다. 위의 DTD Table을 보면 End Tag이 선택사항으로 되어있습니다. 사용되는 Attribute(속성)는 아래와 같으며 자세한 내용은 공통 속성표를 참조

Attributes align, class, dir, id, style, title


  • End Tag을 사용할 경우
    본래의 용도인 P Tag 속에 들어간 내용물을 문단으로 구분하고, 문단의 아래와 위의 내용물 사이를 각각 한 줄씩 띄워줍니다.

    입력
    <P>Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph</P>
    <P>Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph</P>


    출력결과

    Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph

    Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph


  • End Tag을 사용하지 않을 경우
    단순히 한 줄을 띄우는 기능을 하며, 여러개를 사용해도 처음 사용한 <p>Tag만이 유효합니다.
    예) <p><p><p><p><p><p>로 여러개를 사용해도 <p> 하나를 사용한 것과 같습니다.

    입력
    Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph<P><P><P>
    Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph

    출력결과
    Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph

    Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph


위의 결과로는 별로 다른게 없지만 한 가지 분명한 것은 End Tag이 있어야 원하는 내용물 만큼에 Attribute 값이나 Keyword를 적용할 수 있다는 사실입니다. 예를 들어

...........................................
...........................................
<FONT color="#808000">
...........................................
...........................................

와 같이 font 의 Start Tag 만 주고 End Tag </font>로 닫아 주지 않으면 어떻게 될까요?... <FONT color="#808000"> 이후의 모든 글자색이 #808000으로 됩니다. 한 번 실험해 보시져...



2. BLOCKQUOTE

어떤 내용을 인용할 때 사용하는 Block Level Element로서 오른쪽으로 들여쓰기가 됩니다. 사용되는 Attribute(속성)는 아래와 같으며 자세한 내용은 공통 속성표를 참조

Attributes align, class, dir, id, style, title
cite 인용한 문장 원문의 uri, 예) http://www.w3.org/TR/html4/references.html


입력
<HTML>
    <HEAD>
        <TITLE>Blockquote</TITLE>
    </HEAD>
    <BODY>
        <BLOCKQUOTE cite="http://www.mycom.com/tolkien/twotowers.html">
        They went in single file, running like hounds on a strong scent,
        and an eager light was in their eyes. Nearly due west the broad
        swath of the marching Orcs tramped its ugly slot; the sweet grass
        of Rohan had been bruised and blackened as they passed.
        </BLOCKQUOTE>
    </BODY>
</HTML>


실행 결과와 같이 Blockquote 된 내용 전체가 오른쪽으로 들여쓰기가 됩니다.



3. PRE (PRE-formatted Block)

HTML 문서에서 칸을 바꾸려면 앞에서 설명한 <BR> Tag을 사용한다고 했습니다. 사실 어떻게 생각하면 워드 프로세서를 사용하던 사람의 경우 <BR> Tag에 익숙해 지는데 시간이 좀 걸리죠. 이 때 사용하면 좋은 Element가 바로 'PRE' Element 입니다. 사용되는 Attribute(속성)는 아래와 같으며 자세한 내용은 공통 속성표를 참조

Attributes align, class, dir, id, style, title


입력
<HTML>
    <HEAD>
        <TITLE>PRE(PRE-fommated block)</TITLE>
    </HEAD>
    <BODY>
        <PRE>
       Higher still and higher
         From the earth thou springest
       Like a cloud of fire;
         The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.
        </PRE>
    </BODY>
</HTML>


실행 결과와 같이 <br>을 사용하지 않았지만 줄이 바뀌었고, space도 그래도 유지됩니다. 즉, 모양이 흐트러지지 않는다는 뜻이져...



4. DL(Definition List), DT(Definition Term), DD(Definition Data)

위의 Element 들은 용어와 용어의 설명을 하는 Block-Level Element들입니다. 아래의 문서 구조와 같이 DT로 용어를 먼저 제시하고, DD에 설명을 적습니다. 실행하면 DD의 용어 설명이 오른쪽으로 들여쓰기가 됩니다. 사용되는 Attribute(속성)는 아래와 같으며 자세한 내용은 공통 속성표를 참조

Attributes align, class, dir, id, style, title


입력 입력
- <html>
- <head>
  <title>DL, DT, DD</title>
  </head>
- <body>
- <DL>
  <DT>Dweeb</DT>
  <DD>young excitable person who may mature into a Nerd or Geek</DD>
  <DT>Hacker</DT>
  <DD>a clever programmer</DD>
  <DT>Nerd</DT>
  <DD>technically bright but socially inept person</DD>
  </DL>
  </body>
  </html>

출력결과
Dweeb
young excitable person who may mature into a Nerd or Geek
Hacker
a clever programmer
Nerd
technically bright but socially inept person




5. HR (Horizontal Rules : 수평선 그리기)

HR Element 는 입체감있는 수평선을 그려줍니다. 아주 간단하면서도 잘 이용하면 여러가지 효과를 낼 수 있는 Element 가 되겠습니다. 그런데 웹 페이지를 돌아다니다 보면 의외로 이 Element 를 사용한 문서를 찾기 힘들더군요. 다른 Element 도 그렇지만 너무 많이 사용하면 난잡해 보일 수 있지만 이 수평선을 그리는 HR Element 의 경우 활용만 잘 한다면 예상 외의 효과를 볼 수 있습니다. 아래는 HR Element 의 속성표 입니다.

HR Element
color
수평선의 색상 (색상, 길이단위 참조)
예) <HR color="silver">
size
수평선의 두께 Pixel 기본값 2 (길이단위 참조)
예) <HR color="silver" size="1">
noshade
입체감 없는 수평선
예) <HR color="silver" size="1" noshade>
width
수평선의 길이 Pixel, % (길이단위 참조)
예) <HR width="100%" size="3" noshade color="silver">
공통 속성
align, dir, class, id, style 등은 (공통 속성표 참조)


예제
입력
<HR>
<HR color="silver">
<HR noshade="noshade">
<HR size="5">
<HR width="450">
<HR width="50%">
<HR align="center" width="50%">
<HR align="right" width="50%">
<HR color="red" size="1" width="100%">
<HR color="#ff0000" size="10" width="100%">


실행 창의 폭을 늘이거나 줄이면 상대 크기인 '%' 를 사용한 수평선은 창 크기에 따라 길이가 변하게 되지만 절대 크기인 '450'으로 지정한 수평선은 변화가 없습니다.



회색 계열 색상 대비를 이용한 음각 효과
입력
<HTML>
    <HEAD>
        <TITLE></TITLE>
    </HEAD>
    <BODY bgcolor="#c0c0c0"> <!-- named color 로 silver -->
        <HR>
    </BODY>
</HTML>
출력결과



배경색 silver(#c0c0c0)에서 가장 두드러진 음각 효과가 납니다.




6. Block-Level Tag의 면적 알아보기 - InLine Style

과연 어떤 Tag이 얼마만큼의 면적을 가지고 있을까?... 정말 궁금하지 않습니까? 저는 무지 궁금했었습니다. 이 때는 Inline Style로 배경색을 지정하면 한 눈에 면적을 볼 수 있습니다. InLine Style 사용 법은 면적을 차지하는 Tag 속의 Element 뒤 어느 위치에서든지 style="background-color: color;" 와 같이 입력하면 차지하고 있는 면적을 볼 수 있습니다.

입력
<HTML>
    <HEAD>
        <TITLE>면적 알아보기</TITLE>
    </HEAD>
    <BODY>
        <H1 style="background-color: #ffd700;" align="center">제목 1</H1>
        <H3 style="background-color: #ffd700;">제목 3</H3>
        <P align="right" style="background-color: #ffd700;">Paragraph</P>
    </BODY>
</HTML>


실행 결과를 살펴보면, Heading Tag이나 P Tag 같은 경우 <BR> 이 없어도 줄바꿈이 되어있고, 각각 Line 전체를 차지한다는 사실을 알 수 있습니다.

이번 페이지는 별로 어려운 내용도 없고 웬지 좀 허전하고 싱겁다는 생각이 들지 않으십니까? Coding하고 실행하면 결과가 나오는 것 까지는 좋은데 이런 Element를 왜 쓰는지 모르겠다고 생각하시는 분들이 있을 겁니다. P, PRE는 문단 Block을 잡을 때 사용하고, BLOCKQUOTE, DL등은 오른쪽 들여쓰기할 때 사용하는데, 들여쓰기를 하는 이유는 이렇습니다. 사람의 눈은 수직이나 수평으로 글씨를 읽을 때 튀어나오거나 들어간 부분에서 시선을 멈춘다고 합니다. 즉 요철(凹凸)을 주게되면 그 부분이 강조가 되는거죠. 다음 페이지에 나올 목록 만들기 같은 Element도 다 그런 이유에서 사용하는 겁니다.

그러나 너무 그런 요철이 너무 잦으면 오히려 문서의 가독력(可讀力 : Readability)을 떨어뜨리게 되어 문서를 보는 사람의 눈을 혼란스럽게 만들 수도 있죠. 적당히 이런 Element를 사용하면 강조될 부분이 강조되고 전체적으로 안정감 있는 문서를 만들 수 있습니다.





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색