티스토리 스킨 style.css 완전정복 2
이 글은 티스토리의 style.css의 내용에 대한 이해를 통하여 css도 배우고 티스토리 스킨을 변경하는데 도움이 되기를 바라는 마음에서 포스팅을 하며 "티스토리스킨 style.css 완전정복 1"에서 이어지는 글입니다. 편의상 평어체를 생략합니다.
사설없이 바로 들어가겠습니다. ^^
h는 글자크기를 지정하는 태그입니다. h1이 가장 큰글자이고 h2, h3, h4...h6 까지 숫자가 클수록 글자는 작아진다.
<h1>style.css 완전정복 </h1>의 결과물은 아래와 같습니다.
style.css 완전정복
h1의 원래크기는 위와 같지만 스타일쉬트를 아래와 같이 지정하면
h1 {font-size: 0.8em;color:#003366}
; h1 태그를 사용하는 경우 글자크기를 0.8em, 글자색이 바뀌도록 설정
결과는 아래와 같습니다.
style.css 완전정복
; font 속성은 글자크기, 색상, 폰트종류, 두께등을 지정할때 사용한다.
※ font에서 지정가능한 값
- font-family => 폰트종류
- font-style => 폰트형태 지정 ( italic,oblique,normal(기본값) 을 지정가능)
- font-variant => 대문자로 표시 (지정값은 small-caps)
- font-weight => 폰트두께 지정 (값은 bold, bolder, 100,200,..,900 까지의 숫자)
- font-size => 폰트크기 지정
- color => 폰트색을 지정 RGB 색상코드표
※ font size 에서 사용되는 단위
- px, pt는 절대크기 (일반크기는 12px)
- em, %는 상대적 크기 (예. 0.75em, 75%)
- 웹 브라우저의 기본크기는 1em, 100%로 특별히 크기를 지정하지 않으면 이 크기로 표시됨.
- 필자의 블로그는 12px 로 지정되어 있으며, 0.75em, 75%와 같은 크기이다.
예제) 카테고리 옆에 표시되는 숫자에 대한 스타일
.c_cnt { font:0.75em Tahoma, Helvetica, Arial, Gulim, sans-serif; color:#f30;}
위 스타일은 카테고리 옆에 표시되는 글의 갯수에 대한 스타일이며 약식표기이다. 글자 크기를 0.75em으로 지정하고 기본글꼴은 tahoma, 대체글꼴은 Helvetica, Arial, Gulim, sans-serif 순으로 대체되고 글자색은 #f30으로 지정한 예이다.
#f30 은 #ff3300을 줄여서 표현한것이다.
관련글. RGB 색상코드표
색상 테이블 (컬러 테이블)
;자간(글자와 글자사이)을 조절
|
예제) <p>letter-spacing 비앤아이 블로그 - default</p> |
; 단어와 단어사이의 간격을 조절한다.
|
예제) <p>word-spacing - 기본 </p> |
; 영문의 대소문자를 변경하는 속성.
※ 값의 종류
- capitalize : 첫 글자만 대문자로 바꿔서 표시
- uppercase : 모든 영문자를 대문자로 변경
- lowercase : 모든 영문자를 소문자로 변경
width
;폭을 지정한다. div나 span의 영역폭, 이미지의 폭등을 지정할때 사용
height
;높이를 지정할 때 사용. div나 span의 영역 높이, 이미지의 높이(세로크기)등을 지정할때 사용
text-align
. 글자나 그림의 가로 정렬에 사용
. 정렬방식: left, center, right, justify (양쪽정렬)
생각보다 꽤 시간이 걸리는군요.
오늘은 여기까지입니다.
CSS 관련글 목록.
- 스타일시트(CSS) 이해하기 for 티스토리
- 스타일시트(CSS)의 선언방법 1
- 스타일시트의 선언방법 및 사용 예제 2
- 크리스마스 트리장식으로 알아보는 CSS
- 서식활용으로 포스팅 시간을 줄여보자.
- 서식으로 배우는 스타일시트(CSS)
- 티스토리 뽀개기 - 스킨 구조(skin.html) 이해하기
- 티스토리 뽀개기 - div 와 span
- (css) border로 꾸미는 나만의 이미지 스타일
'CSS for 티스토리' 카테고리의 다른 글
| style.css 완전정복 3 <블로그 본문 영역 css> (26) | 2009.11.03 |
|---|---|
| [css]스타일쉬트 여백 지정시 꼭 알아야 할 padding, margin, width 정리 (24) | 2009.10.23 |
| 티스토리 스킨 style.css 완전정복 1 (27) | 2009.10.20 |
| (css) border로 꾸미는 나만의 이미지 스타일 (29) | 2009.09.24 |
| 티스토리 치환자 정리 (31) | 2009.09.08 |