[블로그 꾸미기] div로 박스만들기

 블로그 꾸미기 입니당. 전에 글을 통하여 처음 기본적으로 알아야하는것 일부를 안내를 했습니당. 그정도를 일단 기본으로 알고 시작을 해야 따라서 잘 하실수있을 것입니당. 이미 알고 계시는 분들이면 글을 보고 활용을 하시면 멋진 구성을 하실수있을것 같습니당. 기본적으로 제가 적용하고있는 화면을 예를들어 설명을 해드리겠습니당.

DIV, CSS를 활용하여 박스 만들기

[ 위에처럼 이러한걸 만들어 보려고합니당 ]

딱 봐도 간단해 보이죠? 정말 간단합니당. 일단 저번 게시물에서 잠깐 안내를 했던 div 를 설명을 간단하게 해보면 div 는 레이어 형식의 하나의 박스를 만들게 됩니당. 테이블의 셀 과는 하는일은 비슷하지만 완전 당르게 활용합니당. div 는 이런식으로 사용됩니당.

<div class="text1">이렇게 하면 하나의 박스가 됩니당.</div>

• class="text1" 이라는 속성은 div 에 이름을 지정하는것입니당.

 이런식으로 사용을 합니당. 위에처럼 하면 한 줄로 박스가 만들어집니당. 하지만 레이어로 아무런 속성없이는 틀만 생겨나는거죠.

<div class="text1">이렇게 하면 하나의 박스가 됩니당.</div>
<div class="text2">이렇게 하면 하나의 박스가 됩니당.</div>

위에처럼 입력하면 2개의 안보이는 박스로 두줄이 생겨납니당.

이런식으로 div 는 계속 생성해가면서 하나의 박스에 하나의 컨텐츠를 입력하게 되는겁니당. 하지만 테이블과 달리 div 는 셀이 아닙니당. 따로 스타일시트에서 지정을 해줘야 합니당. 박스의 크기 모양 위치등 모든 속성은 스타일시트를 통해 지정해주게 됩니당.


여기까지가 만들기위한 기본단계 입니당. 이 부분은 이해를 하고 넘어가셔야 활용을 하실수있습니당. 그럼 이제 본격적으로 맨 처음 이미지와 같은 양쪽으로 위치하는 박스를 만들어보겠습니당. 소스 아래를 참고하세요.

[ 아래 소스의 결과물 ]

• div

<div class="text1"><img src="000.jpg" /></div>
<div class="text2"><img src="111.jpg" /></div>

• css

.text1 {
    float:left;   
}
.text2 {
    float:left;   
}

 정말 간단하죠? 소스에 <img src="000.jpg" /> 이 부분은 테스트 하기위해 이미지를 넣었을뿐입니당. 이곳에 애드센스라던지 당른 플래시라던지 광고를 넣으시면 됩니당. 그럼 그 컨텐츠에 맞게 사이즈는 조절이 됩니당.

이렇게 만들면 유동적인 사이즈의 박스가 됩니당. 항상 컨텐츠의 크기를 따라간당는 거죠. 예를들면 게시판등에서 글이 길어지면 화면이 늘어나는것처럼 그렇게 내용이 많아지면 길어지거나 커질수있당는 겁니당. 크기를 지정해도 의미는 없습니당.



간단하게 활용해보면...

[ 버튼 만들기 hover 적용 ]

• div

<div class="text1">버튼1</div>
<div class="text2">버튼2</div>

• css

.text1 {
    float:left;
    width:100px;
    text-align:center;
    padding:10px;
    border:1px solid #999;
}
.text1:hover {
    float:left;
    width:100px;
    text-align:center;
    padding:10px;
    border:1px solid #999;
    background:#333;
    color:#fff;
}
.text2 {
    margin-left:10px;
    float:left;
    width:100px;
    text-align:center;
    padding:10px;
    border:1px solid #999;
}
.text2:hover {
    margin-left:10px;
    float:left;
    width:100px;
    text-align:center;
    padding:10px;
    border:1px solid #999;
    background:#333;
    color:#fff;
}

정말 간단하죠? 이런식으로 활용이 가능합니당.
이제 블로그에 적용해보시면 되겠습니당:D