날나리 강좌. ㅋ 레이아웃 짜기, 광고 영역(?)

날나리 강좌. ㅋ 레이아웃 짜기, 광고 영역(?) 정보

HTML 날나리 강좌. ㅋ 레이아웃 짜기, 광고 영역(?)

본문

김군 왈, " A군아 모하니~ "

A군 왈, " 맨날~ 놀지용 "

김군 왈, " 어랏 오늘은 안 까칠한데? "

A군 왈, " 내가 언제.. 왜... "

김군 왈, " 그렇다면 나 이거 광고 넣는 영역 만들려 하는데 도와줘... "

A군 왈, " 나~~~ 갈래... "

김군 왈, " ㅋㅋㅋㅋ 역시... 그래도 다 말할 것 아니여... "

A군 왈, " 아이구... 그래그래... 원하는 것이 무엇이드냐? "

김군 왈, " 그러니까, 레이아웃 짠 거 양 옆에다 광고 넣는 영역을 만들어 놓을려고 해. 그리고 어디서 봤더라? 네이트에서 본 것 같은데.. 그게 스크롤은 본문 크기에만 여전히 그대로 작동하고 외부에 붙은 광고는 상관없이 옆에 그냥 있는 것 같더라고... "

A군 왈, " 아.. 본문외 추가적인 크기가 스크롤에 영향을 주지 않는 광고 영역이라고 이름을 붙여야 하나? 어찌든 그러하면 그건 네이트 가서 소스를 열어보면 알 것 아니야? "

김군 왈, " 아. 그렇군.. ... "

잠시 뒤...

김군 왈, " 어랏 없네.. 언제 없어졌지 ㅡ.,ㅡ "

A군 왈, " 거봐 그런거.. 하지 말라는 것이야. 나는 딱 홈페이지 갔을 때, 몬가 자꾸 팔락팔락 거리고, 스토커 마냥 따라 다니고 그런 거 보면 싫더러고. 그냥 얌전히.. 아주 얌전히.. .조용히 있는 곳이 좋더라고... "

김군 왈, " 귀찮아서 그런거지? ㅎㅎ 아니 .. 이 사람 별소리를... 다 그런 것은 경우에 따라 다르다고... 뭔가 화려한 페이지도 임펙트 있게 사람에게 알릴 광고 목적도 있는 것이라고오... "

A군 왈, " ....... 눼~ 그래그래... 고민 좀 해보자 "

김군 왈, " 만들 줄 몰라? 해본적 없어? "

A군 왈, " 어. 그런 것 같은데... "

김군 왈, "..... "

A군 왈. " ~라고 말하면 안해도 되나? "

김군 왈, " 야.. 잡소리에 벌써 양이 장난아니다. 얼렁 얼렁 뱉어내시오. "

A군 왈. " 그런 것이 따로 모 방법이 있겠어? 원리를 알면 만들어 낼 수 있겠지.. 방법은 여러가지일 꺼야.. 어떤 것이 좋은지는 아직 잘 모르겠다. 일단 만들어보자. 대충 생각해보면 일단 임의의 영역이 겹치지 않게 하기 위해서 absolute가 필요하겠고, 스크롤 처리를 위해서는 overflow:hidden이 필요하겠고... 해당 영역 만큼 width랑 전체의 100% 설정도 필요하겠네... 궁시렁궁시렁... "

김군 왈, " 가능하겠어? "

A군 왈, " ㅡ.,ㅡ 다 사람이 만드는 건데 안되는 것이 어딨어... "

<div style="width:960px;margin:0 auto;background:red;">
HEADER
</div>
<div style="width:960px;margin:0 auto;background:blue;">
CONTENT
</div>

위와 같이 있다고 하자.. 그런데 어디 쯤에 넣고 싶어? Header 양옆, 아니면 Content 양옆? 그리고 광고 폭은? "

김군 왈, " 어... CONTENT 양옆에 그리고, 폭은 200px "

A군 왈, " 야... ㅎ 몬놈의 광고가 그리커? 벌써 960px의 폭인데 광고 200px 2개면 1360px이나 되는 문서네... "

김군 왈, "아.. 사람은 크게 벌어야... 그럼 100px.. ㅎ"

A군 왈, "일단은 100%의 크기를 가진 것을 만들고 거기안에 넣어서 overflow:hidden으로 처리되게 해보자. "

<div style="width:960px;margin:0 auto;background:red;">
HEADER
</div>
<div style="position:absolute;width:100%;left:0;overflow:hidden">
<div style="width:960px;margin:0 auto;">
광고 컨텐트
</div>
</div>
<div style="width:960px;margin:0 auto;background:blue;">
CONTENT
</div>

A군 왈, "position:absolute는 다음 요소가 해당 영역 무시하게 올라오게 하는 것이고, 아니면 margin-bottom을 이용해서 해당 높이만큼 빼면 되겠지? 아 그리고 IE6에서 left에 설정된 초기값 auto가 해당 위치가 아니어서 다시 설정하느냐 추가했고...

내부 자식 div는 일단 해당 본문의 크기 정도 폭을 할당했어. 이제 저 안에 광고를 넣을 div를 넣으면 되겠지? 이때 광고 컨텐트는 좌우에 붙이면 되는데, 우선 그동안 익힌 기초를 이용하면 2가지 방법을 생각할 수 있겠네.

하나는 다시 position:relative를 이용해 절대 좌표계를 사용하는 광고를 배치하는 법

다른 방법은 float를 이용해서 좌우에 넣고 음의 마진을 사용해서 빼는 방법이 있지비.

일단 전자의 방법을 사용하면 다음과 같이 돼...

전에도 말했듯이 절대 좌표계인 position을 사용할 경우, 좌표계의 기준을 생각해서 relative를 설정할 필요가 있으며, 이때 사용할 좌표계 기준은 부모가 되니 거기서 relative를 설정했지. 그 뒤 내부 광고는 left와 right의 음의 값을 위치했고.. 이들을 모두 둘러싸는 것의 overflow:hidden이 있으니 이제 스크롤바도 안생기겠지.."

김군 왈, " 오호.. 오호.. 수고했어.. 그리고 float를 사용하는 방법은? "

A군 왈, " 아.. float를 사용하는 방법은 IE6에서 음의 마진 값을 사용하는데 이때 문제가 있어. 그러나 해결이 가능해. 일단 IE6에서는 음의 마진을 가진 경우, 결과와 해결을 먼저 적는다면 영역 밖으로 나간 부분은 표시되지 않고 짤려나가. 이를 방지하기 위해서 position:relative를 설정하면 해결이 돼.. 이 문제를 좀더 살펴보자.

[IE6에서 음의 마진 값 사용시, 짤려져 사라지는 버그]

<div style="height:100px;width:100px;background:#f00;margin:20px auto;">
<div style="margin-left:-50px;width:100px;height:50px;background:#0f0;">
ABCDEFGH
</div>
</div>

이제 이를 고치기 위해 float와 함께 relative를 넣어서 작성해보자고...

[position이 static과 아닌 값에서 중첩시 우선 순위 & IE 투명 배경 관통 현상]

또 하나 처리할 것은 z-index의 초기값 auto에 대한 이해야. 광고 컨텐츠를 가장 밖에서 둘러싼 div의 position 속성 값은 absolute로 하면서 해당 위치에 다음 따라오는 블록 요소가 이들이 없는 것처럼 서로 겹치게 되어 있어. 그런데 누가 위에 올라온 것일까?

결과를 먼저 적으면 광고 영역은 이런 흐름과 달리 중첩된 다음 블록보다 위에 있게 돼. 보기에는 광고 영역의 배경이 투명이어서 이를 바로 확인 못했을 뿐이야. 이렇게 가리면 뒤에 있는 것들은 본래 중첩된 content는 클릭이 안되어서 문제가 발생하지. 그러나 IE는 IE9를 포함하여 투명인 배경이 위에서 겹칠때 독특하게 처리하고 있어. 마치 없다 듯이 뒤에 있는 것도 선택이 가능하지. 그렇지만 다른 브라우저는 이와는 달리 엄격하게 뒤에 있는 것을 선택할 수가 없어. 따라서 이어 오는 블록 요소와의 겹칠 경우, 누가 우선인지 명확히 결정해 놓아야겠지?

본래의 원칙대로 생각해보자. position의 기본 값은 static이야. 서로 동위에 겹치게 된다면 뒤에 오는 것이 우선하여 위로 올라오게 돼. 그러나 static이 아닌 경우는, 다른 static인 초기값에 대해서 자신이 위로 올라가는 선순위이 있어. 따라서 앞서 작성했던 것도 이러한 규칙에 따라 광고의 영역이 가리게 되었지. 이를 해결하기 위해서는 z-index를 사용하여 직접 결정하면 되는데, z-index는 static이 아닌 position에서만 작동하는 점이 있어.

그러나 굳이 z-index의 값으로 명확히 설정하지 않아도, static이 아닌 블록끼리 겹치면 역시 동위에서는 뒤에 것이 위로 올라오게 되었지. 다만 static은 그 이전에 순서에서 먼저 밀린 것이야. 그렇기에 이를 이해했다면 z-index의 값을 사용하지 않고 그저 content에서 relative만 설정하면 이제 content가 위에 올라오겠지?

또한 나온 김에 IE의 이러한 투명 영역처리가 관통해서 뒤에 있는 것을 선택가능한 점은 그리 좋은 것만은 아니야. 때로는 이를 방지하기 위해서 투명도가 아주 낮은 블록을 새로 생성해 가릴 수도 있으며, 다른 방법으로는 배경 자체를 투명 그림으로 사용하면 이련 효과도 사라지며, 한발 더 나아가 투명이 아닌 그림 파일이라도 보이지 않게 위치를 변경하는 트릭으로도 해결이 가능해.

자아~ 이야기가 길어졌다. 이제 이해를 다했으면 한번 완성을 시켜보자. "

김군 왈, " 어...정리하면 간단하네. static 끼리는 동위에서는 뒤에 것이 우선. static이 아닌 것과 만나면 후순. 따라서 static이 아닌 것으로 이어지는 중첩을 설정하면 위로 올라오겠네. 으흥.. 기달려봐...

<!doctype html>
<html>
<head>
<title>AD Block</title>
<style>
html, body { margin:0; padding:0 }

#header,
#content {
width : 960px;
margin: 0 auto;
height: 100px;
}
#header { background: red}
#content {
position: relative;
height: 200px;
background: blue;
}

#ADBlockWrap {
width: 100%;
position: absolute;
overflow: hidden;
left: 0;
}

#ADBlock {
position: relative;
width : 960px;
margin: 0 auto;
height: 100px;
}

#ADBlock div.items {
position: absolute;
width: 100px; height: 100px;
background: yellow;
}

#ADBlock div.items.left { left : -100px }
#ADBlock div.items.right { right: -100px }
</style>
</head>
<body>


<div id="header">
Header
</div>


<div id="ADBlockWrap">
<div id="ADBlock">
<div class="items left">
왼쪽 광고
</div>
<div class="items right">
오른쪽 광고
</div>
</div>
</div>


<div id="content">
Content
</div>

</body>
</html>

다 했어.. "

A군 왈, " 헉헉헉.. 왜 항상 니가 옮기는데 내가 힘드냐... "

<결과: 폭은 쭐였음... >

----

다음 시간에....

댓글 1개

baoro 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

13.03.08 14:36:41

잘보았습니다. 초보가 많은 도움되었네요.
차분히 공부할 시간이 없어서 급하게 사이트에 적용하려다보니,
우왕좌왕 하던 중이었는데, 개념상으로 많은 진전이 있었네요^^
급한거 마치면 차분히 공부부터 해야겠어요.

날나리 강좌. ㅋ 레이아웃 짜기, 광고 영역(?) > 퍼블리셔팁

퍼블리셔팁