Side Bar 전문가용 도움말

 

◆사이드바섹션

#section_sidebar1 {//사이드바 개수가 늘어남에 따라 sidebar1, sidebar2, sidebar3
margin:0;
float:right; //속성 값(left, right)
text-align:left;
}

Q&A
Q: 사이드바의 위치를 이동하려면?
A: float속성으로 사이드바와 컨텐츠 영역의 위치를 바꿀 수 있습니다.
   사이드바의 float 속성 값 과 컨텐츠 영역의 float 속성 값을 반대로 설정하여 위치를 바꿀 수 있습니다.



 

◆프로필이미지영역

.menu_profile .profile_image img {
width:px;
height:px;
border: 1px solid #CCCCCC;
}

Q&A
Q: 프로필 이미지 영역의 크기를 줄이려면?
A: width, height 속성의 픽셀(px)값을 조정하시면 됩니다.


 

◆프로필설명

.menu_profile .profile_desc {
margin: 10px 0 0; // (오른쪽/위/왼쪽/아래)
color: #999;
font-size: 11px;
font-weight: normal;
font-family:verdana,sans-serif;
}


Q&A
Q: 프로필 설명의 글씨체를 바꾸려면?
A: font-family값을 원하시는 글씨체로 바꾸시면 됩니다.


 

◆프로필닉네임

//by
.menu_profile .profile_desc .profile_usernick .by {
color: #999;
font-size: 11px;
font-weight: normal;
font-family:Comic Sans MS;
}

//닉네임
.menu_profile .profile_desc .profile_usernick {
color: #999;
font-size: 11px;
font-weight: normal;
font-family:Comic Sans MS;
}


Q&A
Q: 프로필 닉네임의 글씨체를 바꾸려면?
A: font-family값을 원하시는 글씨체로 바꾸시면 됩니다.


 

◆사이드바 위젯 별 영역

.column .widget {
margin: 0 0 10px;
overflow: hidden;
padding: 2px 10px;
text-align: left;
}

 

◆위젯제목

.column .widget h3 {
font-size:12px;
font-weight:bold;
color:#333; //제목을 보이지 않으려면, 배경색과 동일하게
border-bottom:1px solid #333;
margin:0;
padding:3px 0 1px 0;
background:url('(이미지 url)') no-repeat 0 center;
}


Q&A
Q: 위젯 제목 앞에 아이콘을 추가하려면?
A: background속성 값의 (이미지url)부분을 원하는 아이콘이미지의 링크로 바꾸세요.
   이미지는 인터넷상에 업로드(본인 블로그에 비공개로 업로드해도 됩니다)되어 있어야 하며, 업로드되어 있는 이미지를 우클릭 
   하여 속성을 보면 이미지 url을 알 수 있습니다.)


 

◆위젯목록

//위젯 목록 영역전체
.column .widget .widget_content {
width: 200px;
font-size:13px;
//기타 폰트속성들..
padding-top:10px;
overflow:hidden;
word-break:break-all;
background:url('http://4.bp.blogspot.com/-AoxRGA-8qC0/TyDNCqOc2KI/AAAAAAAAAg4/GhF4Ichp3ak/s640/20120120-123150.jpg') no-repeat 0;
}

//메뉴목록 한 개의 영역
.menu_selfmenu li{
padding-top:10px;
overflow:hidden;
word-break:break-all;
background:url('http://4.bp.blogspot.com/-AoxRGA-8qC0/TyDNCqOc2KI/AAAAAAAAAg4/GhF4Ichp3ak/s640/20120120-123150.jpg') no-repeat 0;
}





위젯테스트