전문가용 스킨편집 도움말

*하단의 "영역별 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)





위젯테스트