전문가용 스킨편집 도움말

*하단의 "영역별 CSS소스보기"를 통해 수정하고자 하는 영역의 소스를 알아내고, "색상표""Q&A"를 참고하여 해당 부분의 속성들을 수정하시면 됩니다.

 

◆Q&A 전 영역에서 공통적으로 자주 하는 질문
*해당 영역에서 아래에서 설명드리는 속성을 추가/수정 하시면 됩니다.

<질문 바로가기>
Q1.글씨 스타일(글꼴, 색깔, 크기, 굵기, 기울기, 밑줄 등..)을 바꾸려면 어떻게 해야하나요?
Q2.테두리를 추가하려면 어떻게 해야하나요?
Q3.여백을 설정하려면 어떻게 해야하나요?


 
Q1.글씨 스타일(글꼴, 색깔, 크기, 굵기, 기울기, 밑줄 등..)을 바꾸려면 어떻게 해야하나요?

각 스타일 속성을 개별적으로 설정하는 방식과 한번에 설정하는 방식이 있습니다.

1)속성 한번에 설정
font-style, font-weight, font-size, font-family 순서로 값을 설정해야하며, 필요한 값만 쓰시면 됩니다.

font: bold 45px '08서울한강체 L','돋움',sans-serif;

*브라우저 마다 지원하는 글꼴이 다르므로 속성 값에 콤마로 구분하여 보조 글꼴을 지정해 준다. 순서대로 첫 번째 글꼴이 없으면 다음 글꼴이, 다음 글꼴이 없으면 그 다음 글꼴이 적용된다.


2)속성 별 설정

2.1)글꼴

2.1.1)글꼴 이름으로 지정
font-family:sans-serif;
원하는 글꼴 명을 속성값에 사용하시면 됩니다.브라우저 마다 지원하는 글꼴이 다르며, 1)에서처럼 보조 글꼴을 지정할 수 있습니다.

2.1.2)글꼴 종류로 지정
generic-family:fantasy;

◦serif : 삐침 있는 글꼴
◦sans-serif : 삐침 없고 굵기가 일정한 글꼴
◦cursive : 손으로 쓴 것 같은 글꼴
◦fantasy : 판타지한, 화려한 글꼴
◦monospace : 글자 폭과 간격이 일정한 글꼴


2.2)색깔
color:#000000;
*없앨 수 없는 텍스트 부분을 숨기려면 글씨 색깔을 배경색과 똑같이 설정하시면 됩니다.

2.3)크기
font-size:10px;


2.4)굵기

굵은 글씨
font-weight:bold;

수치로 굵기 설정
100, 200, 300, 400(기본값), 500, 600, 700, 800, 900
font-weight:100;


2.5)기울기
normal(표준), italic(기울임)
font-style:italic;

*기울기를 없애려면 해당속성을 지우거나 속성값을 normal로 변경하시면 됩니다.


2.6)밑줄
none(미지정), underline(밑줄)
text-decoration:underline;

*밑줄을 없애려면 해당속성을 지우거나 속성값을 none으로 변경하시면 됩니다.

 
Q2.테두리를 추가하려면 어떻게 해야하나요?


1)전체 테두리
border: 2px solid #000000;
왼쪽부터 테두리 두께, 테두리 스타일, 테두리 색입니다.
테두리 스타일 값: solid(실선), dotted(둥근점선), dashed(사각실선)

2)일부 테두리border-top:
border-bottom:
border-right:
border-left:


 
Q3.여백을 설정하려면 어떻게 해야하나요?

1)바깥쪽 여백

1.1)모든 여백을 동일하게 설정

margin:30px;

1.2)방향 별 여백 설정

margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left; 4px;

1.3)방향별 여백설정 줄임표현

margin: 25px 50px;
위쪽와 아래쪽 25px, 오른쪽과 왼쪽 50px

margin: 25px 50px 75px;
위쪽 25px, 오른쪽과 왼쪽 50px, 아래쪽 75px

margin: 1px 2px 3px 4px;
위쪽 1px, 오른쪽 2px, 아래쪽 3px, 왼쪽 4px



2)안쪽 여백(설정 방식 margin과 동일)

padding:30px;

 

◆영역별 CSS소스 보기

수정하고자 하는 부분을 클릭하시면, 해당 도움말 페이지로 이동합니다.
도움말의 소스를 그대로 편집기에 붙여 넣으시거나, 도움말을 참고하여 기존의 소스의 { }안의 속성들을 수정하시면 됩니다.
(*HTML소스에는 별도로 표기해 놓았으며, 이외에는 모두 CSS소스입니다.)


헤더영역블로그 제목블로그 주소탑 메뉴사이드바영역프로필 이미지프로필 설명프로필 닉네임개별 위젯위젯 제목위젯 목록
컨텐츠영역포스트 제목/카테고리명포스트 정보포스트 내용태그포스트 메타정보포스트 테일트랙백핑백덧글포스트 아카이브라이센스 정보

 

◆CSS 색상표 및 색상 선택 도구

1.색상표
색상표를 보고 원하는 색상의 hex code를 참조하시면 됩니다.

corlor chart 보러가기


2.색상 선택 프로그램
원하는 색상을 선택하면 그에 해당하는 색상 코드가 보여집니다.

Color Cop (free download)
Adobe Kuler (web-based)


Content&Footer 전문가용 도움말

 

◆컨텐츠영역 전체

//컨텐츠 영역
.content_wrap {
margin:0;
padding:0 0 25px 0;
float:leftt; //속성 값(lefr, right)을 사이드바와 반대로 설정하여 위치 교환 가능
}

//전체 정렬
.post_view {
text-align: left;
}


 

◆포스트제목/포스트카테고리

//포스트 제목
.post_view .post_t-tle h2 {
font-size:14px;
font-weight:bold;
color:#81AC00;
border-bottom:3px dotted #54B3BA;
background:url('(이미지 url)') no-repeat 0 0; //포스트 제목 앞에 아이콘을 추가하는 효과
padding-left:60px;
}

//포스트 제목 색깔
.post_view .post_t-tle h2 a:link,.post_view .post_t-tle h2 a:visited {color:#81AC00;text-decoration:none;}
.post_view .post_t-tle h2 a:hover,.post_view .post_t-tle h2 a:active {color:#81AC00;text-decoration:underline;}

//게시물 카테고리
.post_view .post_title .post_title_category {
font-size: 12px;
font-weight: normal;
}

//포스트 제목 색깔
.post_view .post_title .post_title_category h2 a:link,
.post_view .post_title h2 .post_title_category a:visited {color:#333;text-decoration:none;}
.post_view .post_title h2 .post_title_category a:hover,
.post_view .post_title h2 .post_title_category a:active {color:#fff;text-decoration:none;}


 

◆포스트정보


//공통
.post_view .post_info {
color:#EFDDC3;
font-size: 10px;
font-family: verdana,sans-serif;
font-weight: bold;
font-style: italic;
}

//작성자 닉네임(by #ID)
.post_view .post_info .post_info_author {
color:#EFDDC3;
font-size: 10px;
font-family: verdana,sans-serif;
font-weight: bold;
font-style: italic;
}

//작성일시
.post_view .post_info .post_info_date {
color:#EFDDC3;
font-size: 10px;
font-family: verdana,sans-serif;
font-weight: bold;
font-style: italic;}

//포스트 URL
.post_info_link a{
color:#EFDDC3;
font-size: 10px;
font-family: verdana,sans-serif;
font-weight: bold;
font-style: italic;
}

//덧글수
.post_view .post_info .post_info_cmtcount {
color::#333;
font-size: 10px;
font-family: verdana,sans-serif;
font-weight: bold;
font-style: italic;
}


 

◆포스트내용

//포스트 본문
.post_content {
text-align:left;
color:#999;
font-size:12px;
font-family: verdana,sans-serif;
}


 

◆태그클라우드

//Tag 색깔
.post_taglist a{
color:#333;
}


 

◆포스트 메타 정보

//포스트 메타정보 영역
.post_meta_area{color:#999;}

//전체 텍스트
.post_meta_area ul.post_meta_content{color:#999;font-size:12px;}

//포스트 제목 부분
.post_meta_area ul.post_meta_content a{color:#999;font-size:12px;}

//퍼블리싱 정보 상위 목록(트랙백/내보내기/추천)
.post_meta_area ul.post_meta_content strong{color:#999;font-size:12px;}

//포스트 작성자 닉네임 부분(by 닉네임)
.post_meta_area ul.post_meta_content em.fn {color:#999;font-size:12px;}

//포스트 작성 일시
.post_meta_area ul.post_meta_content em.date {color:#999;font-size:12px;}



Q&A
Q: 포스트 메타정보 영역을 안보이게 하려면?
A: 해당부분은 안보이게 하려면 CSS소스에 아래소스를 추가해주세요.

.post_meta_area {
        display:none;
}


 

◆포스트 하단 영역◆

//수정/삭제/체크포스트
.post_view .post_footer_area .post_admin a{ color:#333;}

//트랙백/핑백/덧글
.post_view .post_footer_area .post_tail a{ color:#333;}




 
◆트랙백/핑백/덧글

전체영역(트랙백/핑백/덧글 공통)

//배경
.post_link {
background: none repeat scroll 0 0 #E6F3F3;
padding: 15px 20px;
width:50%;
}

//링크걸린 텍스트
.post_link a{
color:#EFDDC3;
}

//제목(트랙백.핑백,덧글)
.post_link h3 {
font-size:11px;
letter-spacing:-1px;
border-bottom:1px dotted #EFDDC3;
}

//링크걸린 텍스트(트랙백 도움말 제외)
.post_link h4 {font-size:12px;}

-트랙백-

//트랙백 url, 도움말 영역
.post_trackback .trackback_help {border-bottom:1px dotted #EFDDC3;}

//트랙백 url
.post_trackback .trackback_help em {
font-family: verdana,sans-serif;
font-size: 20px;
font-style: normal;
}

//트랙백 도움말
.post_trackback .trackback_help a{
color:#EFDDC3;
font-size: 12px;
}

//작성 일시
.post_trackback .trackback_list li h4 span.trackback_datetime { font-family: verdana,sans-serif; font-size: 10px; font-weight: normal;}

-핑백-

//작성 일시
.post_pingback .pingback_list li h4 span.pingback_datetime {
font-family: verdana,sans-serif;
font-size: 12px;
font-weight: normal;
color:#333;}

-덧글-

//작성 일시
.post_comment .comment_list h4.comment_writer_info span.comment_datetime {
font-family: verdana,sans-serif;
font-size: 12px;
font-weight: normal;
color:#333;
}

//덧글 입력란
.post_comment .comment_write textarea {
height: 80px;
margin: 2px 0;
padding: 0;
width: 99%;
}


 

◆포스트 아카이브(이전글/다음글)
.post_navi a{ color:#333; font-size:12px;}

 

◆스킨 하단 license 정보

//텍스트 크기
.footer{ font-size:12px;}

//링크없는 텍스트
.footer{ color:#999;}

//링크걸린 텍스트
.footer a:link, .footer a:visited{ color:#333;}.footer a:hover, .footer a:active{ color:#999; text-decoration:none;}


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;
}


1 2 3 4 5 6 7 8 9 10 다음



위젯테스트