Block-Level Element

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

Legend : Optional, Forbidden, Empty, Deprecated, Loose DTD, Frameset DTD [표 보는 방법]

Element

Start tag

End tag

Empty

Deprecated

DTD

BLOCKQUOTE

PRE

H1 ~ H6

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

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

<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>

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

<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>

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

- <html>

- <head>

</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>

<DD>technically bright but socially inept person</DD>

</DL>

</body>

</html>

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

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

과연 어떤 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를 사용하면 강조될 부분이 강조되고 전체적으로 안정감 있는 문서를 만들 수 있습니다.