패스트부트 반응형 웹 티스토리 스킨 상단에 배너달기.

 패스트부트 반응형 웹 티스토리 스킨 상단에 배너달기.

제 동생 블로그에 패스트부트 반응형 웹스킨을 적용해주었는데요.

반응형스킨상에서 블로그 최상단의 블로그 이름 옆에 배너를 다는 법에 대해 궁금해하시는 분이 댓글로 질문해주셨어요.

웹퍼블리셔로 일하는 저로서는 그냥 간단한 작업이었는데, 

아무래도 일반인 분들은 CSS개념이라든지, 반응형 미디어 쿼리에 대해 잘 모르시니까 어렵게 느껴지실 것 같긴 하네요.

모든 반응형 웹 티스토리 블로그 스킨이 똑같은 구조가 아니라서 단정적인 방법을 설명해드릴 수는 없네요.

일단은 제가 주로 사용하고 있는 패스트부트 반응형 웹 티스토리 스킨 버전 1.6.1을 기준으로 해서 설명을 드릴게요.

그 전에 일단 중요한 핵심에 대해서 얘기하죠. 

이 부분은 패스트부트 스킨이 아니더라도 반응형 웹이라면 고려해야할 사항입니다.

일단 반응형 웹은 다양한 디바이스의 가로폭에 대응하도록 고안된 웹 페이지 레이아웃인데요.

어렵게 생각지 마세요. 단순히 가로폭이 달라지면 모양도 달라진다는 말이고, 실제 구현 기술도 그 말 그대로 적용되는 굉장히 단순한 기법입니다.

배너를 달기 위해서 고려해야할 부분은...

단순히 배너를 위치시키는 것은 쉽고 간단하지만, 모양이 달라졌을 때 그 배너를 어떻게 처리할 것인가? 하는 문제를 고려해야 합니다.

즉, 반응형 웹스킨이 화면의 가로폭이 달라질 때 마다 홈페이지(블로그)의 모양이 변경됨에 따라 배너도 위치나 크기가 변경되어야 한다는 지극히 당연하고 단순한 논리 인 셈이죠.

반응형 웹이라는 기법의 가장 기초적인 문구는 미디어 쿼리라고 불리는 CSS 스타일 시트의 문법에 있습니다.

기본적인 미디어 쿼리 문법의 예시는 다음과 같죠.

@media screen and (min-width: 1400px) { }
@media screen and (min-width: 992px) { }
@media screen and (max-width: 991px) { }
@media screen and (max-width: 767px) { }

대충 짐작이 되시죠?

@media 라는 것은 "홈페이지를 보여줄 매체가~" 라는 뜻입니다.

그 다음에 오는 screen은 "니 모니터 화면에~" 라는 뜻이죠. 이 부분은 screen 이외에도 all이라든지 print가 올 수 있어요. print라고 쓰고 {} 안에 스타일을 기술하면, 홈페이지를 프린터로 출력할 때의 모양을 변경할 수 있는 것이죠. 

screen이라고 쓴 것은 "홈페이지를 보여줄 매체가 모니터 화면일 때~" 라고 해석하시면 됩니다.

and는 말 그대로 "그리고" 겠죠? 별거 아니예요. 

컴퓨터의 언어가 영어로 쓰여 있으면 영어일 뿐이예요. 외계어가 아닙니다^^; 물거나 해치지 않으니 쫄지 마세요.

(min-width:1400px) 이 부분은 "최소 폭이 1400px일 때" 라는 뜻입니다.

그러니 @media screen and (min-width: 1400px) {  } 라는 문구는 

"홈페이지를 보여줄 매체가 니 모니터화면이고, 최소 폭이 1400px이상인 경우에는 {}의 내용을 실행해라" 

라는 뜻이 됩니다.

max-width:991은 "화면 폭이 최대 991px" 이라는 뜻이겠죠?

위와 같이 화면의 폭이 어느 정도일 때 어떤 CSS의 모양을 보여줄지를 미리 시나리오를 짜고, 각 시나리오일 때 보여줄 모양을 지정만 해주면 그게 바로 "반응형 웹" 입니다.

별거 아니죠?

물론 원리는 그렇습니다만... 이 미디어 쿼리를 이해 못하는 웹브라우저를 아직도 쓰는 집단들이 있어서요. 웹퍼블리셔들의 고민이 바로 그런 부분이어서 전문가 집단들이 존재합니다.

티스토리 블로그의 패스트 부트 반응형 웹스킨 상단에 배너 광고 하나 띄우는 것 정도는 여러분도 충분히 따라 할 수 있으니...쫄지마셈.

우리는 시나리오를 간단하게 생각해봅니다

패스트 부트 티스토리 블로그 반응형 웹 스킨은 실질적으로는 총 3가지의 시나리오를 가지고 있어요.

1. PC모니터화면에서 풀사이즈로 보는 경우
2. 그보다 좀 폭이 좁은 화면에서 보는 경우
3. 그리고 모바일 스마트폰에서 보는 경우

이렇게 3가지 경우인데요. 

우리의 목적은 블로그 최상단에 배너 광고 하나 띄우는 거죠?

이 중에서 문제가 되는 경우가 바로 모바일 스마트폰에서 보는 경우인데요.

아래의 세가지 시나리오의 비교화면을 보다시피, 보통 반응형 웹스킨들의 모바일 폭의 디자인 레이아웃에서는 최 상단에 배너 광고를 넣기가 애매하게 그려지죠.

보통 모바일 상에서는 메뉴바가 최상단에 고정되어버리고, 마치 앱의 메뉴틀 처럼 고정되는 추세이기 때문인데요.

억지로 비집고 광고를 집어 넣을 수는 있습니다만..."안 이뻐요~"

그래서, 결론은 이겁니다.

대부분의 경우에는 최상단에 배너광고를 원하는 위치에 뿌리고 (PC 데스크탑 브라우저상에서는,..), 모바일 화면에서는 최상단의 배너광고를 보이지 않게 처리하자!

라는 아주 짧은 시나리오를 작성해 볼 수 있겠죠.

그러면 우리가 미디어 쿼리를 새로 작성해야 할까요?

네 그렇게 해도 무방합니다.

어쩌면 미디어 쿼리를 새로 쓰는게 일반인 분들은 간편할 수 있어요.

그 전에 먼저, 패스트 부트 반응형 웹 스킨의 html 문서 안에다가 광고를 집어 넣어야겠죠?

광고를 집어 넣을 위치가 최상단이고, 가운데 정렬된 홈페이지의 뼈대에서 특정위치에 "절대적"인 위치에 놓여야 하는데요. 

그런 조건에 가능하기 위해서는 패스트 부트의 skin.html의 구조상에서는

<div class="container">라는 태그 바로 다음에 배너 광고가 위치해야 합니다.

이 안에 광고 코드를 넣어 주면 됩니다.

<div id="dtopAd">라고 씌여 있는 부분의 div태그에 id로 dtopAd를 부여했는데요.

저 아이디를 이용해서 최상단 광고의 위치 속성을 정해 줄 것이기 때문에 그렇습니다.

dtopAd 아이디를 가진 div 태그 속에 광고가 놓이고 광고의 절재적인 좌표를 지정해 줄 건데요. 

절대적인 좌표 값을 부여하려면 기준 위치가 있어야 해요.

하지만 패스트부트 반응형 스킨은 뼈대가 브라우저의 가운데에 정렬되기 때문에, 브라우저의 폭이 미세하게 변하면, 절대적인 기준점도 변하게 됩니다.

html/css를 잘 모르시는 분들은 어려우실테니, 결론만 얘기하자면

class="container" 를 가진 div 태그에게 "너가 기준점을 가지거라!"라고 명령을 해주어야 해요.

패스트부트 반응형 웹 스킨의 기본 스타일에서는 container 클래스는 그런 속성을 갖고 있지 않아요.

그래서 container 클래스에 relative 속성을 부여합니다.

그리고 dtopAd의 절대 좌표를 부여해주고, 특정 폭 이하일 때는 "배너 광고야 사라져라~"라고 해버리면 됩니다.

별거 아닌 것을 장황하게 설명드린 이유는, 제가 추천하는 스타일 코드는 원리적인 부분만 구현된 것이거든요.

원리를 제대로 이해하시고, 입맛에 맞게 다양하게 응용을 해보실 분들을 위해서 좀 장황하게 설명했습니다.

해서..최종적으로...

여러분이 하실일은

skin.html에는

<div class="container"> 다음 줄에

이 안에 광고 코드를 넣어 주면 됩니다.

를 삽입해주시고.

style.css에는

#dtopAd { position:absolute; top:7px; left:170px;}
@media screen and (max-width: 767px) {
#desktopNav.fixed #dtopAd {display:none;}
#dtopAd { display:none}
}
@media screen and (min-width: 768px) {
#dtopAd { position:absolute; top:7px; left:170px;}
.container {position:relative}
}

를 맨 마지막 줄에 추가해주시면 끝입니다!