[CSS] 본문중에 사용되는 인용문, 이미지, moreless 스타일을 내맘대로
오늘은 티스토리의 포스트 본문에 사용되는 인용문(구)과 이미지, more less에 대한 스타일시트(css)에 대해서 알아보도록 하겠습니다.
여기서는 티스토리 스킨에 이미 선언된 스타일시트에 대해서 설명하지만 스타일시트는 얼마든지 직접 선언하여 사용을 할 수가 있습니다. 각각의 속성만 알고 나면 다른곳에도 응용할 수가 있다는 것이지요! ^^
여튼 css 는 설치형 블로그에서는 필수적으로 알아야 할 내용이며, 블로그뿐만아니라 홈페이지나 커뮤니티에서도 유용하게 활용할 수가 있습니다. css를 블로그를 시작하면서 접하신 분들은 조금 어렵겠지만 몇번 사용하다보면 마음이 편안해집니다. 많이 몰라도 됩니다. 관련 전문직 일을 하지 않는다면 기본적으로 사용되는 속성만 알면 됩니다. 저 또한 기본만 알고 사용하고 있습니다. 지금부터 편의상 존칭 생략하겠습니다. *^*
"Bing Necklace 1" of Recycled Aluminum Cans ~ 2 of 2 photos by urbanwoodswalker
티스토리 인용문에 적용된 스타일은 아래와 같다. (pure black 스킨 기준)
| .article blockquote { background:url(images/iconBlockquote.gif) top left no-repeat; padding-left:25px; margin:10px 20px;} |
위의 인용 스타일을 적용한 예는 아래와 같다.
< 설명 >.article blockquote
클래스 article 속에 출연하는 blockquote 태그에 대해서만 스타일이 적용된다.(아래 ex 참조)
참고로 blockquote는 인용문이나 인용구에 사용되는 html 태그이다.background:url(images/iconBlockquote.gif) top left no-repeat
background에 대한 설명은 앞에서 했듯이 배경을 지정할때 사용되는 속성이다. 여기서는 배경에 이미지(iconBlockquote.gif)를 지정하고 배경이미지 표시 기준 위치를 왼쪽 위로 지정했으며 배경이미지를 반복하지 말라(no-repeat; 생략하면 반복됨)는 의미다.padding-left:25px
padding은 border와 인용문(contents) 사이의 공백을 지정하는 속성으로,
여기서는 왼쪽 공백을 25 픽셀로 지정했다.margin:10px 20px
margin은 border 바깥쪽 여백을 지정할때 사용하며,
위쪽과 아래쪽 여백은 10 픽셀, 왼쪽과 오른쪽 여백은 20픽셀이 되도록 선언했다.
|
ex. <div class=article> 위의 예제에서 <div class=article>과 </div> 속에서 사용된 <blockquote>는 위에서 선한한 스타일이 적용되고 <div> 밖에서 사용된 <blockquote>는 위의 스타일이 적용되지 않는다. |
이미지에 적용하는 스타일에 대해서는 앞전에 발행한 (css) border로 꾸미는 나만의 이미지 스타일에서 설명한바 있지만 설명을 못한 부분도 있고 복습하는 의미에서 다시 보도록 하자.
블로그 포스팅시 포스트에 삽입되는 이미지에 대한 스타일은 아래와 같이 선언되어 있다. 물론 스킨에 따라서 다를 수 있다. 그렇기 때문에 css 를 배우는 이유이기도 하다. 자신만의 스타일을 만들기 위해서..........
|
/* 그림 */ /* 이미지 아래 캡션 스타일 */ /* 그림을 2개 배치했을 때 사용할 스타일 */ /* 그림을 3개 배치했을때 사용할 스타일 */ |
< 설명 >
|
.imageblock => 포스트에 삽입한 이미지(사진,그림)에 적용할 스타일 이름(클래스). border:1px solid #ddd; padding:3px; margin:5px 0; text-align:center; 은 이미지에 1픽셀의 solid border를 rgb색 #dddddd 색으로 표시하고, 이미지와 테두리 사이 공백을 상하좌우 3픽셀, 테두리 바깥쪽 여백은 위,아래는 5픽셀, 좌우는 0픽셀로 하며 중앙정렬이 되도록 지정한 스타일이다. .cap1 => 이미지 아래에 표시되는 이미지 설명 스타일 color:#999; text-align:center; padding:4px 0; margin:0 은 글자색을 #999999 로 표시하고, 중앙정렬하며 위아래 4픽셀의 공백을 지정한 스타일이다. |
more less는 다 알겠지만 부가적인 내용이나 글이 길어질경우 내용을 보이지 않게 숨겨놓고 방문자가 클릭하여 숨겨진 내용을 볼 수 있는 기능이다. 이름하여 더보기 기능에 대한 스타일은 아래와 같이 선언되어 있다.
|
/* 더보기 - more / less */ |
< 설명 >
|
.moreless_fold => 더보기가 접혔을때의 스타일, 앞부분에 표시할 이미지를 배경으로 지정. .moreless_top => 더보기를 펼쳤을때 위쪽 제목에 대한 스타일 .moreless_bottom =>더보기를 펼쳤을때 아래쪽 제목에 대한 스타일 |
more less
pure black 스킨의 더보기 스타일은 위의 그림처럼 매우 normal하다.
그래서 글속에 있으면 눈에 잘 띄지 않는다.
그래서 조금 눈에 잘 띄게 글자색과 굵기를 아래스타일처럼 바꿔보았다.
.moreless_fold { background:url(images/iconMore.gif) top left no-repeat;
padding-left:20px; color:#0060C8; font-weight:bold;
}
아래는 moreless_fold 스타일을 수정한 후 적용된 모습이다.
변경된 more 스타일
촌스럽긴 하지만 처음 설정된 스타일에 비하면 눈에 잘 띈다.
스타일시트는 이렇게 수정을 하면 기존에 올렸던 모든 포스트에 동시에 적용이 되어서 좋다.
덧. 위의 more 문구 앞에 작은 이미지 아이콘은 배경 이미지입니다.
이 아이콘을 변경하기 위해서는 별도로 이미지를 만들어서 스킨자료실에 업로드를 해야 합니다.
업로드 할때 같은 이름(위의 예제에서는 이름이 iconMore.gif)으로 하면 별도로 수정할 필요없이
바로 적용이 되고, 다른이름으로 저장을 했다면 저장한 이름으로 수정을 해주면 적용이 됩니다.
여기까지 해서 포스트 본문에 사용되는 스타일중 이미지와 인용문, moreless에 대한 스타일시트에 대해서
알아봤습니다.
다음에는 contents 영역중 포스트제목과 댓글, 트랙백 스타일에 대해서 알아보도록 하겠습니다. 끝.
- 스타일시트(CSS) 이해하기 for 티스토리
- 스타일시트(CSS)의 선언방법 1
- 스타일시트의 선언방법 및 사용 예제 2
'CSS for 티스토리' 카테고리의 다른 글
| [CSS] 티스토리 스킨 댓글, 트랙백 스타일 이해하기 (13) | 2009.11.11 |
|---|---|
| [CSS] 티스토리 포스트 제목 스타일(style) (31) | 2009.11.08 |
| style.css 완전정복 3 <블로그 본문 영역 css> (26) | 2009.11.03 |
| [css]스타일쉬트 여백 지정시 꼭 알아야 할 padding, margin, width 정리 (24) | 2009.10.23 |
| 티스토리 스킨 style.css 완전정복 2 (32) | 2009.10.21 |