조용한 라이브 통기타 모음 01 내마음 갈 곳을 잃어 ㅡ 이경운 02 봄날은간다 ㅡ 윤태규 03 사랑은 받는 것이 아니라면서 ㅡ 박강수 04 나는 못난이 ㅡ 백미현 05 널사랑하겠어 ㅡ 바다새 06 나같은건 없는 건가요 ㅡ 김재성 07 사랑은 ㅡ 김희진 08 러브 ㅡ 윤현석 09 목마를 타고간사랑 ㅡ 김철민 10 내사랑 울보 ㅡ 유리상자 11 화요일에 비가 내리면 ㅡ 최지연 12 내일로 가는 마차 ㅡ 이진석
<DIV style="BORDER-TOP: rgb(170,170,170) 1px solid; HEIGHT: 568px; BORDER-RIGHT: rgb(170,170,170) 1px solid; VERTICAL-ALIGN: top; BORDER-BOTTOM: rgb(170,170,170) 0px solid; POSITION: relative; LEFT: 0px; BORDER-LEFT: rgb(170,170,170) 1px solid; Z-INDEX: 1; TOP: 0px; WIDTH: 700px">
<DIV style="HEIGHT: 500px; POSITION: absolute; LEFT: 0px; Z-INDEX: 1; TOP: 0px; WIDTH: 700px"><EMBED type=application/x-shockwave-flash height=500 width=700 src=http://cfile299.uf.daum.net/original/1732C5354E4BCFE624F255 allownetworking="internal" allowscriptaccess="sameDomain" scale="exactfit" wmode="transparent"></DIV>
<DIV style="POSITION: absolute; LEFT: 290px; Z-INDEX: 2; TOP: 190px"><IMG id=A_195F0946505A8563145DE1 class=txc-image style="HEIGHT: 300px; FILTER: alpha(opacity=100, style=2,finishopacity=0); WIDTH: 400px" src="http://cfile286.uf.daum.net/image/195F0946505A8563145DE1" width=380 height=300> </DIV>
<DIV style="POSITION: absolute; LEFT: 100px; Z-INDEX: 3; TOP: 30px"><PRE><FONT style="FONT-SIZE: 13pt" color=#ffffff face=돋움>
<B>조용한 라이브 통기타 모음 </B></FONT>
<FONT style="FONT-SIZE: 11pt" color=#00ff00 face=바탕>
01 내마음 갈 곳을 잃어 ㅡ 이경운
02 봄날은간다 ㅡ 윤태규
03 사랑은 받는 것이 아니라면서 ㅡ 박강수
04 나는 못난이 ㅡ 백미현
05 널사랑하겠어 ㅡ 바다새
06 나같은건 없는 건가요 ㅡ 김재성
07 사랑은 ㅡ 김희진
08 러브 ㅡ 윤현석
09 목마를 타고간사랑 ㅡ 김철민
10 내사랑 울보 ㅡ 유리상자
11 화요일에 비가 내리면 ㅡ 최지연
12 내일로 가는 마차 ㅡ 이진석</FONT></PRE></DIV>
<DIV style="HEIGHT: 0px; POSITION: absolute; LEFT: 0px; Z-INDEX: 4; TOP: 500px; WIDTH: 0px"><EMBED type=audio/x-ms-wma height=68 width=702 src=http://para5.ivyro.net/p406g9r8e.asx allownetworking="internal" invokeurls="false" allowscriptaccess="never" showstatusbar="1" volume="0" loop="-1" autostart="true" enablecontextmenu="1" wmode="transparent"> </DIV></DIV>
위 무비는 '서승제17' 음악 감상실 게시글입니다.
"더 보기"를 클릭하면, 소스를 볼 수있습니다.
공부를 다 하신 다음에 복사해서 태그연습장에 연습 해 보세요~
과제) 여자사진을 내 사진으로 바꾸고 위치를 조절 해 보세요~ 질문은 질문/답변 방에......
공부할 대상의 구조와 원리를 먼저 파악하면, 처음에는 힘들더라도 나중에는 아주 많은 도움이 됩니다.
Div 태그는 Table태그와 비슷합니다. 좀 발전된 테이블 태그인셈이지요~~"
웹페이지는 커다란 웹브라우져란 박스에 작은 박스들에 조합으로 보시면 됩니다.
큰박스안에 작은 박스(Table, Div, Iframe,)들을 넣은거지요.
우리가 쓰는 게시글 공간도 하나의 박스 일부이지요~
Div 태그에는 항상 함께 따라 다니는 것들이 있는데 오늘은 그것들에 대해서 알아볼까 합니다.
Padding(패딩)이나 Margin(마진), 혹은 Border(보더) 이런 용어들 많이 들어 보셨을 겁니다.
Div 박스와 연관된 용어들을 먼저 정의해 드리겠습니다.
1.Content(콘텐츠) - 박스에 담길 내용물입니다. 라면 박스라고 상상해 주세요. 라면이 바로 콘텐츠입니다.
2.Padding(패딩) - 라면 봉지에서 부터 박스 안쪽 면까지의 거리를 패딩이라고 합니다.
3.Border(보더) - 라면 박스 자체의 두께입니다. (골판지(??)의 두께) 보더를 한국말로 테두리라고 합니다.
4.Margin마진) - 라면 박스가 트렁크 안에 있다고 가정하면, 라면 박스의 겉면에서 부터 트렁크 안쪽 면까지의 거리입니다. 마진은 즉 여백입니다. (처음 배우시는 분 들이 어려워하는 부분이지요 완전히 이해가 될 때까지.... 아싸~!)
5.Width(위드) - 라면 박스의 가로 너비 입니다. 예를들어 트렁크 안에 300픽셀 너비의 Div박스가 하나 있다고 가정을 해보겠습니다.
※ 테두리에 두께를 10픽셀 주었다면 이 박스의 크기는 300픽셀이 아닌 320픽셀이 되는 이치입니다.
좌우 양쪽에 10픽셀씩 더해졌으니까요.
6.Height(하이트) - 박스의 세로 높이 입니다. 마찬가지로 보더까지 포함됩니다.
이상 여섯 가지 용어를 설명드렸는데 이해를 돕기 위해서 Box Model(박스 모델) 을 만들어 보겠습니다.
[Box Model]
회색부분은 박스가 놓여있는 공간(배경)입니다.
흰색 테두리에 노란색 부분이 실제 박스가 수용할 수 있는 공간이고 지금 그 공간에는 'Content' 라는 텍스트가 있습니다.
위 박스(노란색)의 크기는 300×100픽셀 입니다.
여기에 패딩이 20픽셀 들어가 있고, 보더가 10픽셀, 그리고 마지막 마진이 100픽셀 들어가 있습니다.
당장은 이해하기 좀 어려운 부분이 있지만 그림을 조금더 자세히 분석해 보시면 각 용어들이 어느 부분을 가리키고 있는지 알수 있을 겁니다.
여기에서 중요한 점은 패딩, 보더, 마진을 줌으로써 박스의 전체 크기가 그 만큼 늘어 난다는 사실 입니다.
다시 말해서 원래 300×100픽셀 이었던 박스가 위의 속성들이 추가됨에 따라 그 크기가 나중에는 560×360픽셀로 늘어난다는 뜻입니다.
하나씩 살펴 보면서 그 원리도 함께 공부해 보겠습니다.
먼저 패딩(Padding)은 텍스트 'Content' 에서 보더(Border) 안쪽 면 까지의 거리 입니다. 여기에서 기준은 보더 안쪽의 좌상귀 입니다.
하얀색 부분이 보더(Border)입니다. 라면 박스로 치면 박스의 종이 두께가 보더 입니다. 다른 말로는 테두리 라고도 합니다.
마진(Margin)은 박스의 테두리 바깥쪽에서 부터 상위 더 큰 존재까지의 떨어져있는 거리 입니다. 이것도 역시 기준이 상위 요소의 좌상귀입니다.
마진은 다른 말로 여백이라고 하죠.
여러분들은 레이아웃을 짜실 때 실제 콘텐츠가 들어가는 박스는 물론이고, 패딩이나 보더, 그리고 마진의 크기까지 염두해두고 작업을 하셔야 합니다. 그것을 고려 안하면 나중에 박스가 엉뚱한 곳에 생겨 나거나 생각지도 않은 공간이 생겨 버립니다.
지금 박스의 공간이나 패딩, 보더, 마진 등의 정보 값은 눈으로 확인하기 힘든데, 드림위버 에서는 눈으로 쉽게 확인 할 수 있습니다.
디자인 창에서 박스를 선택해 주세요.
한 눈에 패딩과 마진을 볼 수 있고 그 수치도 알 수 있습니다. 빗금이 그려진 부분들이죠.
위 그림을 보고 다시 한번 설명해 드리겠습니다.
처음에 가로 300픽셀, 세로 100픽셀짜리 박스를 만들었습니다.
텍스트 "Content"가 시작하는 부분(빗금 없는 노란색 부분)으로 실제로 Div 박스가 수용 할 수 있는 공간입니다.
여기에 패딩 20픽셀, 보더 10픽셀, 마진 100픽셀을 상하좌우에 주었더니 위 그림처럼 된 것입니다.
원래 크기 300×100 크기가 패딩, 보더, 마진 값을 줌으로써 얼마나 커졌는지 계산해 보세요.
먼저 늘어난 부분은 패딩 값이 40픽셀(좌우), 보더가 20픽셀, 마진은 200픽셀 늘었습니다. 가로와 세로로 260픽셀 씩 커진 것이죠.
그래서 제가 서두에 이 Div박스의 전체 크기가 560×360픽셀이라고 한 것입니다.
margin은 왜 셈하냐고요? 마진은 비록 여백이지만 엄연한 Div박스의 구성원 입니다. 이 박스가 어디에 위치하든지 투명한 유리가 박스의 사 면에 붙어 있는 것 처럼 항상 따라 다니며 공간을 차지한다고 생각하시면 됩니다.
대충 개념을 잡으셨다면 위 에서 말한 텍스트가 있는 부분(빗금이 없는 노란색 부분)이 정말 300×100픽셀이 맞는지 실험을 해 보겠습니다.
안쪽에 작은 박스를 하나 더 만들어서 이 수치와 비교해 보면 될 것입니다.
저는 텍스트 "content" 를 감싸는 Div박스를 하나 더 만들겠습니다.
Div박스로 텍스트를 감싸는 것은 전 시간에 설명드렸으니 방법은 생략하겠습니다.
안쪽의 Div박스에도 css로 배경색을 주겠습니다. id(명명)로 이름도 주고 배경을 준 김에 정렬도 시켜 볼께요.
겉의 Div 는 id로 이름은 box1로 정하겠습니다.
그리고 방금 새로 만든 안쪽의 Div박스는 id를 box2로 정하겠습니다.
box2의 내용은 배경색을 #066으로 그리고 텍스트의 색은 #FFF로 해 주시고, 'text-align=center' 로 가운데 정렬 시킵니다.
현재 box1의 크기는 일단 마진(회색)은 제외하고, 패딩과 보더 포함 360×160픽셀 입니다.
box2(초록색)의 크기는 아직 아무 것도 정하지 않았습니다. box1에서 패딩값이 20픽셀로 들어가 있기 때문에 이처럼 보이는 것이죠.
제가 box1의 원래 넓이가 300픽셀이라고 했고 그 크기는 변함이 없고 패딩과 보더가 바깥쪽으로 커진 것이라고 말씀드렸습니다.
그렇다면 위 그림에서 box2에는 넓이 값이 없지만 굳이 넓이를 재 보자면 300픽셀이 되어야 맞을 겁니다.
확인을 해 보려면 box2의 속성에 width=300px을 주어 변화가 있는지 없는지를 보면 될 것입니다.
결론은 변화가 없습니다. 증거 사진은 생략할께요. ^^;
이렇게 의심할 수도 있을 겁니다. box1의 크기가 너무 작아서 box2의 넓이가 짤려서 제대로 확인 할 수가 없다?
그러면 box2의 width 값을 400픽셀로 수정해 볼께요. <table> 태그만 익숙하신 분들은 여기에서 착각을 많이 합니다.
box2의 넓이를 400픽셀로 늘였더니 box1 을 뚫고 나옵니다. 여기에서 <div>가 <table>와 확실히 다르다는 점을 알 수 있습니다.
사실 box2가 비록 box1 태그의 자식 태그로 구조상 속해 있지만 그것은 그냥 위에 얹혀 있는 것입니다.
이번에는 크기를 조금 줄여서 width는 100픽셀을 주고 height에는 50픽셀을 줘 보겠습니다.
이 상태에서 box2 에 margin 100 픽셀을 주겠습니다.
box1에는 젼혀 변화가 없고 box2만 이동하게 됩니다. 당연히 box2 에만 마진을 주었기 때문입니다.
왜 저 위치로 이동되는지 원리를 아시겠죠?
box2를 선택해서 방금 입력한 margin을 눈으로 볼 수 있습니다. 위 그림에 표시해둔 기준점이 중요합니다.
이 기준점과 box2의 기준점 사이에 여백이 가로 100, 세로 100픽셀이 생기는 것이죠.
다시 말한다면 box1의 입장에서 기준점은 가장 안쪽 부분의 왼쪽 윗 부분이고, box2의 입장에서는 가장 바깥쪽의 왼쪽 윗 부분 입니다.
현재 box2의 원래 크기는 100×50픽셀 이었지만 조금전에 준 마진 100픽셀 때문에 300×250픽셀로 커져있는 상태입니다.
먼저 현재 상태를 이해하셔야 합니다.
이 상태에서 다시 box2에 패딩을 50픽셀 줘 보겠습니다. 어떻게 될지 상상이 가시나요? 가신다면 오늘 공부는 성공입니다.
box2가 더 커질 겁니다.
이렇게 box2에도 패딩이 들어가면서 전체적인 크기가 커졌습니다.
하지만 실제 수용 공간, 즉 텍스트 "Content"가 있는 부분은 100×50픽셀 크기로 변함이 없다는 점이 중요합니다.
box2를 클릭해 보세요.
이렇게 보니 이해가 더 쉽죠? box2 의 실제 수용 공간은 100×50픽셀 이지만 전체적인 실제 크기는 얼마나 늘어났을까요?
width - 원래의 콘텐츠의 넓이 100px + 좌우 패딩 합쳐서 100px + 좌우 마진 합쳐서 200px, 합이 400픽셀.
height - 원래 콘텐츠의 높이 50px + 상하 패딩 합쳐서 100px + 상하 마진 합쳐서 200px, 합이 350픽셀. 보더는 없네요.
그래서 box2 의 실제 크기는 400×350 픽셀 입니다. 왜 이 위치로 왔으며 크기가 왜 이렇게 변했는지 그 원리를 이해 하셔야 합니다.
이 강좌만 이해하시다면, 이미지나 무비를 깔끔하고 예쁘게 포스팅 할 수있습니다.