HTML의 기본 <DIV>태그 활용하기 #.1
블로그 라인을 살리기~!! HTML 기본 태그 <DIV>의 "margin" 속성에 대한 이해
기본적인 HTML의 DIV태그에 사용되는 명령어 중에서도 오늘은 Style에 속하는 "margin"에 대해서 알아보겠습니다.
"margin"은 기본적으로 위치이동 명령어라고 생각하시면 됩니다. DIV를 포장지라고 한다면, DIV로 포장된 내용을
원하는 자리로 이동 시켜주는 것이죠.
DIV태그를 사용할 때 가장 기본 바탕이 되는 명령어기 때문에 DIV태그를 제대로
사용하기 위해서는 꼭 익혀야되는 기본 속성입니다. 블로그 꾸미기에는 필수 스킬~!! 활용도 100%~! ㅋㅋ
아래 그림에 나와있는 것이 "margin"을 사용한 DIV태그의 기본 형식입니다.
<DIV>태그의 "margin" 속성으로 HTML에서 시각적으로 표시되는 모든 것을 마음대로 이동시킬 수 있습니다.
자~! 그럼 그림을 통해 "margin"을 사용해 내용을 밀어내는 방법을 배워보겠습니다.
기본적으로 div로 내용을 감싸게 되면, 보이지 않는 투명한 테두리가 생기게 됩니다. 그것을 중심으로 픽셀(px)를 증가
시킴에 따라 내용이 밀려나게 되는 것이죠. 아래 그림 처럼 픽셀(px)를 증가시키면 위, 아래, 오른쪽, 왼쪽으로 내용을
이동 시킬 수 있게 됩니다. 테이블 내부에서 사용할 수도 있고, 테이블을 감싸 테이블 자체를 이동시킬 수도 있습니다.
이번에는 마이너스 픽셀(px)로 내용을 끌어당겨 보겠습니다.
왜 굳이 "-px"을 사용해서 내용을 끌어당겨? 반대편에서 밀어주면 되잖아?라고 생각하실 수도 있지만, 픽셀(px)를
증가시키는 것은 말 그대로 픽셀(px)로 이뤄진 보이지는 않지만 두꺼운 선이 생기는 것과 같습니다. 그렇기 때문에
내용을 감싸고 있는 DIV의 크기도 함께 증가하게 되죠. 그러나 "-px"로 내용을 끌어당기게 되면, 중심은 그대로 있는
상황에서 내용을 탈선시키는 것이라고 할 수 있습니다. 비슷하지만 쓰임새는 엄연이 다릅니다. 푸훗~!!
당기기와 밀어내기가 이해가 안 안되신다구요? 친절한 하노비의 추가 설명~!!
아래와 같이 픽셀(px)을 증가시켜 위치를 이동시키면, 내용을 감싸고 있는 div크기가 커져버리게 됩니다. 가로x세로
50x50인 그림을 div로 감싸서 왼쪽으로 50px를 이동시킨다고 하면, 왼쪽에 50px크기에 해당하는 굵은 선이
생겨버리는 것이죠. 그럼 자동적으로 50x50을 감싸고 있는 div박스는 100x50의 크기가 되어버리는 것입니다.
반대로 픽셀(px)을 마이너스로 바꿔, 예를들어 50x50크기의 사진을 테이블(Table)표를 만들어서 사진을 넣는다고
가정했을 때, div로 그림를 감싸고 픽셀(px)을 증가 시켜버리면 테이블도 커져버립니다. 그러나 "-50px"으로 그림을
당겨주면 테이블은 그대로 있는 상태에서 그림만 밖으로 삐져나가게 되어버리는 것이죠. 이제 확실히 이해 되시죠?
DIV태그의 "margin" 속성과 함께 사용하면 좋은 것이 바로 "정렬" 명령어입니다.
"align" 속성을 사용해, 정렬 위치를 변경시켜줍니다. center(중앙), left(왼쪽), right(오른쪽)입니다. 그럼 왜?
"margin"을 함께 써야할까요? 정렬을 하다보면, 미묘하게 라인이 맞지 않습니다. 그럴 때 "margin"을 이용해서
라인을 맞춰주는 것이죠. 이 두가지 DIV태그 속성만 잘 이용해도 포스팅의 라인이 살아난답니다. 푸훗~!!
아! 특히 티스토리의 사이드바에 위젯을 설치할 때 라인이 맞지 않아 허접해보일 때, <DIV>로 감싸서 라인을 맞춰
주시면 됩니다. 어렵지 않죠? 이제 자신의 블로그의 라인을 살리는 일만 남았습니다. 몸매는 S라인~! 그럼 얼굴은?!
|
