Blue Plate 레이아웃의 뼈대.
상단에 메뉴가 있고 왼쪽엔 내용, 오른쪽엔 서브메뉴와 위젯이 나타나는 구조이다.
레이아웃의 CSS 파일을 열어보면 각각에 대하여 이름과, 속성이 지정되어 있다.
#columnRight { position:relative; width:199px; margin-top: 10px; margin-bottom: 10px; padding:10px 5px 10px 5px; float:right; background-color:#ffffff; border-left:1px solid #dddddd }
#columnLeft { width:680px; float:left; margin:5px 0px 0px 0px; padding:25px 10px 25px 10px; background-color:#ffffff; }
#footer { width:920px; height:60px; margin:0; padding:0; background:url(../images/default/bgfoot.png) left top repeat-x; clear:left; }
CSS 파일에서 각 상자를 지정하는 코드만 뽑아온 상태.
header와 footer는 코드와 이름이 같지만, 콘텐츠 영역과 사이드바 영역은 div이름과 달라 따로 표시했다.
#이 붙어있는 각 줄 제일 앞의 단어들이 각 div의 이름으로 나중에 html에서 div 속성을 가져올 때 저 이름을 사용한다.
<div id="header"> <!-- css파일에서 header라는 div 속성을 id로 가져오는 코드 --!>
<div class="widget"> <!-- css파일에서 widget div 속성을 class로 가져오는 코드 --!>
위젯 소스 1 영역입니다
</div>
레이아웃 HTML 파일을 살펴보다보면 div id가 있고 div class가 있는데,
div id는 유일한 개체일 경우, 즉 div 속성을 그 박스에만 쓰고 다른 곳에는 쓰지 않을 경우에만 사용한다.
자바가 연동된 레이아웃 HTML에 div id로 불러온 속성을 다시 한 번 불러오려고 하면
'그런 거 엄슴. 에러임.'이 뜨므로 주의.
위젯같이 같은 div를 여러개 불러와야 할 경우엔 div class를 사용하여 속성을 가져오도록 하자.
대범하게 자바를 연동시키지 않는 것도 방법이라면 방법이지만 권장하지 않는다.
그럼 이제 각 div의 속성을 제어해주는 부분을 보도록 하자.
header의 CSS 코드를 보면 다음과 같이 되어있다.
background:url(../images/default/bgHeader.png) no-repeat left top;
z-index:99;}
여기서, div의 이름 옆 { }로 묶여있는 부분이 div의 속성을 지정한 부분이다.
; 으로 구분되어 있는 각 단어 묶음에서 : 의 앞에 자리한 것이 속성 이름이고, 뒤에 있는 것이 옵션.
예를 들어, width:920px; 이라는 묶음에서는 width가 상자의 가로를 제어하는 속성 이름이며
920px이 그 속성의 옵션, 속성을 지정한 부분이라는 것이다.
div의 { } 사이에 있는 속성들은 꼭 저런 구조로 넣어주어야 하며,
특히 마지막의 ; 를 빼먹었다간 브라우저를 뒤덮는 에러 문구를 감상을 하게 된다.
대부분의 레이아웃에서 CSS로 div 속성을 보았을 때 제일 앞에 나오는 녀석은 position 인데,
이 녀석에겐 absolute, relative, fixed 라는 옵션이 있다.
원래 div를 HTML에서 죽 늘어놓으면 무조건 위에서 아래로 줄지어 내려오게 된다.
이렇게. -_-
이런 곤란한 상황을 막기 위해서 쓰는 것이 position 속성이라고 할 수 있다.
position의 옵션 중 absolute는 해당 div가 다른 div보다 아래에 있는 상자라고 하더라도
상자의 순서를 무시하고 지정해 준 위치에 가서 자리잡게 되는 옵션이다.
보통 레이아웃에선 전체 배경이 되는 body 초 대형 상자 안에 header, footer등 큰 상자를 넣고
header라는 큰 상자에 검색, 메뉴, 필요에 따라서는 로고나 2차 메뉴 상자까지도 다 집어넣게 되는데,
이렇게 넣어서 코딩을 해보면 상자들이 일렬종대 아름다운 모양으로 줄지어 서서 사람을 약 올린다.
그때에 absolute 옵션을 준 후, left/right에서 몇 px, top/bottom에서 몇 px 에 띄울 건지 결정해주면
원래 그 상자가 어떤 상자안에 들어있었든, 원래 있어야하는 위치가 어디이든 상관없이
큰 상자 기준으로 지정해 준 위치에 상자가 위치하게 되어 div를 예쁘게 정렬시킬 수 있게 되는 것이다.
absolute는 상자를 원하는 위치에 붙일 수 있다는 장점이 있지만,
잠시 정신을 놓고 코딩을 했다간 상자끼리 겹쳐서 모양이 더 일그러지기도 한다.
absolute는, 일반적인 div들 처럼 브라우저 종이에 상자를 차례로 그리는 것이 아니라
다른 종이를 잘라서 브라우저 종이 위에 붙여놓는 식의 옵션이기 때문이다.
그렇기 때문에 붙여넣을 위치를 잘못 지정해주면 브라우저 종이에 그려진 div들을
absolute로 잘라 붙인 종이가 다 가려버리는 비극적인 사태가 발생하게 되는 것이다.
CSS를 수정할 때 absolute를 쓰려면 위치를 꼭 확인하여 겹치지 않게 붙여넣도록 하자.
다음은 relative로 레이아웃 CSS에서 사실상 제일 많이 보게되는 녀석이다.
relative도 브라우저 종이에 div종이를 붙여넣는 것이라는 부분은 absolute와 같다.
하지만 이 녀석은 absolute와 다르게 body나 큰 상자 기준이 아니라 원래 자기 위치 기준으로 움직인다.
position:relative; 뒤에 top:10px; left:-5px; 이라고 쓰면
원래 그 상자가 있어야 하는 위치에서 위로 10px, 왼쪽으로 -5px 이동한 위치에 붙는다는 것이다.
보통 relative를 제일 많이 볼 수 있는 것이 상단 메뉴 부분으로,
지금 계속 예를 들고 있는 Blue Plate의 경우엔 메뉴 부분의 코딩이 이렇게 되어있다.
참고로, 레이아웃을 아예 제작할 것이 아니라 수정해서 쓸 생각이라면
relative가 붙어있는 div들은 최대한 위치를 건드리지 않는 것이 좋다.
특별한 경우가 아니라면 위의 코드에서 보듯이 1px이나 2px 정도로 미세 조정을 해두었을 텐데,
이는 레이아웃에서 div의 강제 줄바꿈등을 막기 위해서 지정해둔 것으로
이것들을 함부로 건드렸다가는 '이 괴상한 물체는 왜 이런 곳에 있지?'미스터리에 빠지게 된다.
한번 건드려봤다가 메뉴가 일렬 종대로 브라우저 한가운데 널부러져 있는 모습을 본 적이 있다..
그리고 마지막으로 fixed.
fixed는 absolute, relative처럼 종이를 잘라 붙이는 방식이라는 것은 같다.
하지만 이 fixed는 브라우저 종이가 아니라 모니터 유리에 div 종이를 붙인다.
내 이글루 스킨을 보면 fixed의 위엄을 확실히 느낄 수 있다.
위의 스크린샷에서 볼 수 있듯이 스크롤바를 아무리 내려도 붉은 테두리의 상자는 움직이지 않고 있다.
붉은 테두리는 잘 보이라고 스크린샷에 표시한 것으로 원래 스킨엔 없다.
fixed에 top과 left 위치를 지정해주면 해당 div는 지정된 위치에 딱 붙어서
그 어떤 외압- 브라우저 크기, 무한 스크롤에도 굴하지 않고 그 자리를 딱 지키고 있게 된다.
단, fixed의 경우엔 각별히 조심해줘야 하는 부분이 있는데
top에서 450px 이상, left에서 700px 이상 떨어진 위치에 div를 붙일 경우
div나 브라우저의 크기에 따라서 해당 div가 안 보이거나 잘려나가는 불상사가 일어난다는 것이다.
브라우저의 크기를 획기적으로 줄여본 경우.
저렇게 잘려나간 div는 스크롤을 아무리 내려도 절대 보이지 않는다.
fixed를 쓸 때에는 top 위치와 div의 높이를 더하여 600px이 넘지 않고
left 위치와 div의 넓이를 더하여 980px이 넘지 않는 한도 내에서 설정하도록 하자.
