더불어 웹표준을 이야기하면서 그 수많은 브라우저의 버그들과 그걸 이용한 핵들을 펼쳐놓을 수도 없거니와, '이러면 ms 익스플로러에서는 돌아가지 않아요!'라면서 가르치는 건 제가 타겟으로 삼은 분들에게 의미가 없다는 생각이 들거든요.
그래서 연재를 이번 블록, 인라인 엘리먼트 개념과, 다음 회의 'float'를 끝으로 맺을까합니다.
그럼 시작해 보죠.
웹페이지를 html로 보게되면, 사실 몇 개의 '박스', 그러니까 '블록'들이 쌓여서 만들어진 형태로 볼 수 있습니다. 물론 이 박스들은 '중력의 법칙'을 받지 않습니다만, 그런데도 '쌓이는' 형태인 것은 분명합니다. 웹브라우저를 봤을 때 '윗쪽'으로 쌓이죠.
그런 의미에서 '블록 엘리먼트'라는 건 html - xhtml을 포함해서 - 에서 중요한 '구조' 역할을 하는 요소들입니다.
예를 들어보죠. 기존에 html의 대부분을 차지했던 'table' 엘리먼트는 '블록 엘리먼트' 중 하나입니다. 사실 저 엘리먼트는 '표'를 나타내기 위해서 쓰여야함에도, 사람들은 table로 모든 페이지를 만들어냈고, 이게 웹페이지인지 하나의 거대한 표인지 방불케 했으니까요.
블록 엘리먼트는 여러가지가 있습니다. 제목을 나타내는 h1부터 h6까지, 그 다음 Paragraph를 나타내는 p 엘리먼트, 앞서 설명한 Division의 div 엘리먼트 등등이죠. 이런 것들의 의미라면 지금부터 나타나는 '블록'이 어떤 '의미'를 가지고 있는지도 나타냅니다. h1~h6으로 이루어져 있으면 그 '블록'이 제목을 나타낸다는 것을, p면 그 부분은 문단, table이면 그 부분은 표.
완벽한 '의미'를 가진 웹페이지를 만드는 데 블록 엘리먼트는 필수 요소입니다.
그러면 '인라인 엘리먼트'는 무엇인가?
블록 엘리먼트가 각 블록 단위로 '단절'된 하나의 독립된 개체라고 볼 수 있을 때, 인라인 엘리먼트는 그 '블록' 안에서 일어나는, 바로 전, 후의 '행'이 가진 '흐름'을 그대로 받아들이는 엘리먼트입니다. img 같은 엘리먼트가 바로 그렇죠.
웹표준을 지키는 html이라면 인라인 엘리먼트는 반드시 블록 엘리먼트 안에 '감싸져야' 합니다. 블록 단위로 쌓이는 html에 인라인 엘리먼트 하나가 덩그러니 밖에 빠져 나와 있어서는 안 되죠.
그럼 예제를 하나 들어보겠습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" version="-//W3C//DTD XHTML 1.1//EN" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" media="screen" type="text/css" href="./untitled.css" />
<title>Block or Inline</title>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"><p><span id="s60">Studio 60</span> on the Sunset Strip</p></div>
<div id="box4"></div>
</body>
</html>
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" version="-//W3C//DTD XHTML 1.1//EN" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" media="screen" type="text/css" href="./untitled.css" />
<title>Block or Inline</title>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"><p><span id="s60">Studio 60</span> on the Sunset Strip</p></div>
<div id="box4"></div>
</body>
</html>
총 4개의 div 엘리먼트 - 블록이죠 - 로 만들고 세번째 블록 엘리먼트에 p 엘리먼트 - 블록이죠 - 를 넣고 그 안에 글을 넣었습니다. span 엘리먼트는 인라인 엘리먼트로써 블록 전체가 아닌 라인 안의 일정 부분에 디자인을 주기 위해서 사용됩니다. 어쨌든 저 상태에서 창을 열면 휑뎅그렁한 모습에 글씨만 뜰테니 CSS 파일을 만들어보죠
* {margin:0px; padding:0px;}
#box1 {background-color:red; height:25px;}
#box2 {background-color:orange; height:25px;}
#box3 {background-color:yellow; height:25px;}
#box4 {background-color:green; height:25px;}
#box1 {background-color:red; height:25px;}
#box2 {background-color:orange; height:25px;}
#box3 {background-color:yellow; height:25px;}
#box4 {background-color:green; height:25px;}
* 를 이용해 html 전체영역에 마진과 패딩값을 0으로 주고, 각 박스에 배경 색과 '높이'를 지정했습니다. 높이를 지정한 이유는 1, 2, 4번 박스에 컨텐츠가 없기 때문에 배경색을 보이게 하려고 이용한 겁니다.
어떻습니까? 이렇게 나오시나요?
창 크기를 아무리 변화시켜도 '블록 엘리먼트'는 한 블록의 전체를 잡아 먹을 겁니다. 횡으로 아무리 늘려도 자신의 '블록'을 놓치지 않죠. 반면에 span은 블록 안에서 원하는 부분에 디자인을 입힐 수 있는 '인라인 엘리먼트'입니다.
CSS에 한 구문을 추가해 보죠.
#s60 {color:blue;}
Studio 60만 글씨가 파란색으로 바뀌었을 겁니다. 더불어 span이 속한 '블록'에는 아무런 영향도 미치지 않죠. 물론 글씨 크기를 늘린다던가해서 블록의 경계를 넘어버리는 현상이 나타날 수도 있지만 실제로 '블록'이 가지는 영역을 깨버리지 않습니다. 논리적으로는 말이죠.
어쨌든 이런 형태의 블록 엘리먼트와 인라인 엘리먼트가 분류되어 웹페이지의 구조를 이루고, 그 엘리먼트를 사용하여 CSS에서는 적절한 프리젠테이션을 할 수 있는 겁니다.
그럼 이제 마지막으로, '박스가 저렇게 '쌓이기만' 하는지 궁금해하는 분을 위하여 'float'를 사용하는 css를 얘기를 다음 번에 하도록 하죠.
Posted by 함장
