[블로그일지] 오른쪽 사이드바 완성편!(2) -3-

 

오른쪽 사이드바를 완성해보자!

아마 지난 포스트에서 알려준대로만 하면

이게 왜 이런 뚱딴지 같은 곳에 있지!? 하게 될거다

블로그를 떡! 하니 가리고 있을테니 말이다.

 

이제 오른쪽 사이드바라고 부를 수 있게 만들어주자!

 

사이드바를 추가하는 것보다 사이드바를 오른쪽에 구성하는 방법을

이해하는게 더 어려웠다.ㅠㅠ

CSS라는 제 2의 외계언어를 써야하는데

몇 시간이나 이거 해보고 저거 해보고

구문을 계속 고쳤는데 안됐었다..

그리고 지인의 도움으로 잘못된 부분을 알게되었다.

 

적용하는건 그렇게 어렵지 않으니

천천히 따라오시길 바랍니다.

 

팔로팔로미

 

1. 어제에 이어 '스킨편집' 에서

2. HTML로 들어간다.

3. CSS를 선택한다.

 

내가 이해한 바 로는

HTML은 머리를 말리면서 뼈대를 만드는 과정

CSS는 왁스와 스프레이로 머리를 잡아주는 과정

이라고 보면 됐다.

 

/*
 * rightsidebar
 */
#rightsidebar { position: fixed; right: 0px; top: 0px; bottom: 0; padding: 0; width: 160px; height: 100%; background-color: #f1f1f1; border-right: 1px solid #ddd; cursor: default; }
@media ( max-width: 600px; )
 #rightsidebar {display: "none"}

4. 이제 이거 넣을겁니다. 

요놈이 사이드 바를 오른쪽에 있게 해줍니다.

 

 

오른쪽 사이드바css.txt

0.00MB

/*

* content

*/

이거 바로 위에 복붙하세욥

 

이러면 진짜로 오른쪽으로 사이드바가 이동한다.

 

다음은

사이드바가 자동으로 사라지게

만들겁니다.

 

 

제에에에에에에일 마지막줄에 가시면

@media all이 있을겁니다.

{

#sidebar-toggle { display: none; }

}

이 구문 아래로 가서

@media all and (max-width: 1506px) {
	#rightsidebar { display: none; }
}

오른쪽 사이드바 @media all.txt

0.00MB

이거 넣으세욥!

이러면 진짜로 끝납니다!

-----------------------------------

응용방법 몇개만 알려드리겠습니다.

 

지금까지 알려드린 오른쪽 사이드바는

광고 넓이 160px 기준입니다.

 

오른쪽 사이드바의 위치와 넓이를 변경할 수 있는데

그게 바로 

이 구문안에서

right, top, width 부분입니다.

right = 오른쪽 여백

(스크롤과의 여백)을 얼마나 줄 것인가?

(요놈이 오른쪽에 있게 해줍니다.)

top = 위의 여백은 얼마나 줄 것인가?

width = 사이드 바의 가로길이는 어느정도인가?

 

width를 수정하고 나면

@media all and (max-width: 1506px) {
#rightsidebar { display: none; }

 

이거 있쥬?

(꼭꼭 "rightsidebar"가 있는 @media all)

 

(max-width: 1506px)

얘를 바꿔가면서 사라지는 지점을 맞춰주시면 됩니다!

 

 

이상!

오른쪽 사이드바에 광고넣기

공유였습니다!

 

다음에도 좋은 팁으로 만나요~

빠빠룽~