그럼 오늘부터 본격적으로 '구조'에 관해서 들여다 보죠.
지난번에 써먹었던 test.html과 test.css를 불러와 봅니다.
<!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="./test.css" />
<title>테스트용 html</title>
</head>
<body>
</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="./test.css" />
<title>테스트용 html</title>
</head>
<body>
</body>
</html>
body {background-color:green;}
자 그럼 <body>와 </body>사이에 다음 엘리먼트를 집어 넣어 한 구획을 만들어보도록 하죠.
<div id="container">
</div>
</div>
<div></div>는 division이죠. 아님 말고요. ㅋㅋ 일단 여기서 중요한 속성인 id는 현재의 division에 '고유명칭'을 부여하는 겁니다. '고유'한 명칭이니까, 한 페이지 당 오직 '하나'만 쓰일 수 있겠죠? 이 외에 한 페이지 내부에서 '동일한 방식'으로 여러 번 등장하는 division은 id 속성외에 class 속성으로 명칭을 부여하면 됩니다.
그러면, 왜 이런 '명칭'을 부여하느냐?
바로 CSS에서 해당 명칭이 사용된 division에 연출을 사용하기 위해서지요. 해당 id나 해당 class에만 독립적으로 연출을 할 수 있거든요.
여기서 오해를 하시면 안되는게 저 id와 class는 <div></div>에만 쓰이는 것이 아니라 꽤 여러 엘리먼트에 쓰이게 됩니다. 뭐 그건 차차 얘기하기로 하고.
<!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="./test.css" />
<title>테스트용 html</title>
</head>
<body>
</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="./test.css" />
<title>테스트용 html</title>
</head>
<body>
<div id="container">
</div>
</div>
</body>
</html>
html 파일을 이렇게 저장하시고 브라우저로 열어 보세요. 아마 아무런 변화도 없을 겁니다. 왜냐구요? 일단 'container'라는 이름을 가진 division에 아무런 컨텐츠가 없어서 구역이 나누어져 있어도 보이질 않는 거죠.
그러나 저 <div>와 </div>사이에 - id 속성은 편의상 생략 - 글씨를 넣어보죠. 그리고 저장 후 새로 고침을 하면?
브라우저의 좌측 상단에 여러분이 써 넣은 글이 한 줄로 나타날 겁니다. 위와 같이 두 줄로 나온 이유는 제가 브라우저 창 크기를 줄여서 그런 거죠.
자, 저렇게 '글씨'를 넣은 부분이 바로 division의 컨텐츠 영역입니다. 그럼 지금부터 마진과 보더, 패딩이라는 개념을 알아보도록 하죠.
우선 전체적인 개념은 이렇습니다.
컨텐츠
패딩
보더
마진
어쨌든, 하나의 '구획'이 가지는 영역의 크기는 위에 이야기 된 4가지 영역의 '총합'과 같아요.
지금부터 그것을 CSS를 통해 설명해 보죠.
CSS의 body 아랫줄에 다음과 같이 입력합니다.
#container {background-color:yellow;}
저장하시고 새로 고침을 눌러 보세요.
자, 어떤가요? 글씨가 들어간 컨텐츠의 배경색이 '노랑'으로 바뀌었죠? 재미난 것은 컨텐츠의 좌측과 상단은 여백이 없는데 하단에는 여백이 생겼죠? 그것은 사실 여백이 아니라 줄 간격입니다. line-height라는 값을 CSS에서 조정해주지 않으면 저렇게 기본 값으로 여백처럼 보이죠.
그럼 여기서 약간의 수정을 해 봅시다.
컨텐츠의 '가로 크기'인 width 값을 줘 보죠. CSS로 갑니다.
#container {background-color:yellow; width:200px;}
파란색 부분을 추가해 줍니다. width 앞의 한 칸 여백은 있거나 말거나 상관없습니다. 아예 엔터를 쳐서 다음 줄로 내려도 상관없습니다. 중괄호 - { } - 안에만 있으면 됩니다.
저장하고 새로고침하면 위와 같은 가로 200px의 노란색 컨텐츠 영역이 생깁니다. 창의 크기를 늘여도 200px에서 딱 끊기고 글씨가 다음 줄로 내려갑니다.
그럼 여기서 잠깐.
px란 무엇인가? 군대 내부의 충성클럽이 아닙니다.
pixel의 축약형인데, 픽셀은 화소죠. 디카 얘기할 때, '몇 만 화소야?' 하는 개념과 크게 다르지 않습니다. 일반적으로 컴퓨터 모니터는 1인치 - 2.54cm - 당 72픽셀을 가지고 있습니다. 1인치 길이 안에 - 그것이 가로든 세로든 - 72개의 화소, 즉 점이 박혀있다는 얘기죠.
위에서 가로인 width를 200px 이라 지정해 주었기 때문에 저 컨텐츠는 가로로 200개의 점이 군집되어 이루어진 영역입니다. 저 노란색은 200개의 점이 가로로 모이고, 세로로는 늘어난 길이만큼 다시 점이 찍힌 거죠.
픽셀은 여러분 모니터의 '해상도'에서도 나옵니다. 자주 접하게 되는 1024*768 해상도니 800*600 해상도니 하는 얘기는 가로 1024픽셀, 세로 768픽셀의 점들로 구성된 - 곱하기 해 보면 전체 점의 개수가 나오겠죠? - 해상도란 이야기지요. 생각보다 '점'이 적죠?
어쨌든 다시 돌아가보죠.
자 이젠 패딩을 줘 봅시다.
다시 CSS에 추가를 합니다.
#container {background-color:yellow; width:200px; padding:10px;}
이젠 자동으로 저장하고 새로 고침이 되시죠?
자, 어떻습니까? 노란색 영역이 더욱 커졌죠? 왜일까요?
자 width 값은 '컨텐츠 영역'만 해당됩니다. 그리고 위에서 밝힌 바와 같이, 하나의 구획 - 여기서는 division - 은 "컨텐츠 영역 + 패딩 영역 + 보더 영역 + 마진 영역"으로 이루어진다고 했죠. 그럼 width 값에, 패딩 값을 더해주었으니 영역이 커지는 것은 당연하겠죠?
그럼 여기서 픽셀 값을 어떻게 주느냐를 잠깐 알아보죠. 위와 같이
padding:10px;
이라고 주게 되면 위, 오른쪽, 아래, 왼쪽. 4방향 모두 10픽셀씩 '패딩'을 주게 됩니다. 자 제가 '위, 오른쪽, 아래, 왼쪽'이라고 순서를 준 이유는 패딩 값을 각각 따로 주고 싶을 때의 방법이 저런 '시계방향' 순이기 때문이에요.
예를 들어
padding:3px 7px 12px 64px;
이렇게 4개 값을 주면 '위=3픽셀', '오른쪽=7픽셀', '아래=12픽셀', '왼쪽=64픽셀'로 주어지게 되는 겁니다. 이건 띄어쓰기 하셔야 해요.
사실 위에 보여드린 예는 '축약형'에 들어가죠.
축약형의 또 다른 예로
padding:12px 42px;
요렇게 두 개만 주게 되면 첫 번째 값은 '위와 아래', 두 번째 값은 '오른쪽과 왼쪽'이 됩니다.
반면, 아예 한쪽 값만 주는 방법도 있어요.
padding-left:38px;
이러면 왼쪽 패딩값만 주게 되죠.
이런 방식은 '마진'에서도 동일하게 적용된답니다.
자, 그럼 보더로 넘어가보죠.
또 다시 CSS를 엽니다.
#container {background-color:yellow; width:200px; padding:10px; border:4px solid blue;}
뭔가 복잡해 보이죠? 사실 4px만 주셔도 보더는 생기는데, 좀더 쉽게 알아보려고 나머지 옵션도 준 겁니다. 결과를 볼까요?
자, 보시다시피 '파란색 - blue', '실선 - solid'가 굵기 4픽셀 짜리로 생겼죠. 컨텐츠와 패딩의 바깥에 저렇게 자리 잡습니다. 실선 외에도 점선, 두 줄 등등의 속성이 있죠. 컬러도 마음대로 바꾸셔도 되고, 안 하시면 각 브라우저 별 기본 값이 잡히죠.
자, 마지막으로 마진을 잡아 볼까요?
#container {background-color:yellow; width:200px; padding:10px; border:4px solid blue; margin:20px;}
마진을 좌우상하 모두 20픽셀을 줬습니다.
결과는?
오우 좌측과 상단에 공간이 확 생겼죠? 그런데 왼쪽 마진과 상단의 마진이 크기가 다르죠? 분명 마진 값을 20픽셀로 동일하게 줬는데 말이죠.
자 그럼 여기서 문제.
위로 두 번째 그림을 보면 굳이 마진 값을 주지 않았는데도 보더 왼쪽과 상단에 약간의 여백이 있습니다. 이건 뭘까요? 그리고 '마진'에는 왜 배경색인 '노랑'이 안 나타날까요?
우선 첫 번째 질문에 대한 답은, 브라우저의 '마진 기본값'이 <body></body>영역에 할당되어 그렇게 나타나는 겁니다. 마진 값을 직접 지정하지 않으면 브라우저가 기본으로 정합니다. 그런데 우린 CSS에서 body 영역에 대한 연출에서 '마진값'을 정하지 않았거든요.
더불어 양쪽 - 오른쪽과 왼쪽 - 의 마진은 서로 겹치지 않지만, 상하의 마진은 만나게 될 경우 서로 '포개집니다'. 그러니 body의 기본 마진과 container의 마진값이 창의 왼쪽과 상단에서 각각 다른 결과로 나타나게 되는 거죠.
그리고 두 번째로 마진에는 배경색인 '노랑'이 나타나지 않아요. 이는 아까 택배 상자를 예로 설명 드렸는데 박스 자체 - 보더죠? - 의 외부에 있는 '마진'에게, 한마디로 '바깥'여백인 마진에게 배경색이 그대로 적용되면 말이 안 되죠? 택배 박스 외부로 내용물의 아우라가 나오면 그건 그때부터 택배 박스가 아니라 인디아나 존스에 나오는 성물이 되죠.
자 그럼 CSS를 수정해 봅시다.
body {background-color:green; margin:0px;}
#container {background-color:yellow; width:200px; padding:10px; border:4px solid blue; margin:20px;}
#container {background-color:yellow; width:200px; padding:10px; border:4px solid blue; margin:20px;}
body 영역에 마진값 0px을 추가했네요.
결과를 보면?
자 좌측과 상단의 여백이 맞죠?
그럼 또,
body {background-color:green; margin:0px;}
#container {background-color:yellow; width:200px; padding:10px; border:4px solid blue; margin:0px;}
#container {background-color:yellow; width:200px; padding:10px; border:4px solid blue; margin:0px;}
컨테이너의 마진을 0px로 바꾸면?
마진이 사라졌으니까 왼쪽과 상단에 짝 달라 붙죠.
좌상단에 붙는 이유는 다름이 아니라 브라우저가 문서를 읽어나가면서 보여주는 순서가 좌상단에서 우하단으로 흘러가기 때문이에요.
자 그럼 여기서 재미난 것을 붙여보죠.
body {background-color:green; margin:0px;}
#container {background-color:yellow; width:200px; padding:10px; border:4px solid blue; margin:0px auto;}
#container {background-color:yellow; width:200px; padding:10px; border:4px solid blue; margin:0px auto;}
위에서 설명했듯이, 마진 속성의 값을 2개로 넣을 경우 앞 부분은 '위와 아래', 뒷 부분은 '오른쪽과 왼쪽'입니다. 그럼 저렇게 오토로 주면?
브라우저의 '중앙'에 들어가게 됩니다. 좀 더 정확한 개념으로 말하자면 해당 division이 속한 가로축의 중앙에 놓이는 거죠. center의 개념이 아니라 양쪽의 마진이 '자동'으로 잡혀서 중앙에 놓이는 겁니다.
그럼 위 아래도 오토로 줄 수 있을까요? 아니요. 그건 안 되네요^^
자 그럼 오늘은 여기까지 이야기하고 '구조와 연출'에 대한 기본 개념을 마칩니다.
다음 글에서는 '블록 엘리먼트'와 '인라인 엘리먼트'에 대해서 다뤄보죠.
정말.
갈길이 멀군요 -0-
Posted by 함장
