[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>
     <blockquote> 여기에 사용된 blockquote는 위의 스타일이 적용됨 </blockquote>
</div>

 <blockquote> 이곳에 사용된 blockquote는 위의 스타일 적용이 안됨 </blockquote>

위의 예제에서 <div class=article>과 </div> 속에서 사용된 <blockquote>는 위에서 선한한 스타일이 적용되고 <div> 밖에서 사용된 <blockquote>는 위의 스타일이 적용되지 않는다.


본문에 삽입되는 이미지에 적용된 스타일

이미지에 적용하는 스타일에 대해서는 앞전에 발행한 (css) border로 꾸미는 나만의 이미지 스타일에서 설명한바 있지만 설명을 못한 부분도 있고 복습하는 의미에서 다시 보도록 하자.

블로그 포스팅시 포스트에 삽입되는 이미지에 대한 스타일은 아래와 같이 선언되어 있다. 물론 스킨에 따라서 다를 수 있다. 그렇기 때문에 css 를 배우는 이유이기도 하다. 자신만의 스타일을 만들기 위해서..........

/* 그림 */
    .imageblock      { border:1px solid #ddd; padding:3px; margin:5px 0; text-align:center; }

/* 이미지 아래 캡션 스타일 */
    .cap1                   { color:#999;  text-align:center; padding:4px 0; margin:0;}

/* 그림을 2개 배치했을 때 사용할 스타일 */
    .dual                   { background-color:#fff; margin-bottom:5px;}

/* 그림을 3개 배치했을때 사용할 스타일 */
    .triple                 { background-color:#fff; margin-bottom:5px;}

< 설명 >

.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는 다 알겠지만 부가적인 내용이나 글이 길어질경우 내용을 보이지 않게 숨겨놓고 방문자가 클릭하여 숨겨진 내용을 볼 수 있는 기능이다. 이름하여 더보기 기능에 대한 스타일은 아래와 같이 선언되어 있다.

/* 더보기 - more / less */
    .moreless_fold          { background:url(images/iconMore.gif) top left no-repeat;  padding-left:20px; color:#000;}
    .moreless_top           { background:url(images/iconLess.gif) top left no-repeat;  padding-left:20px; color:#000;}
    .moreless_body          { }
    .moreless_bottom        { background:url(images/iconLess.gif) top right no-repeat;  padding-right:20px; color:#999; text-align:right;}

< 설명 >

.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

댓글을 달아 주세요

댓글창에 배경그림 넣는방법

  1. BlogIcon 구차니 2009.11.05 15:06 신고  댓글주소  수정/삭제  댓글쓰기

    fold는 한번 적용해보고 싶어지네요 ㅎ

  2. BlogIcon 드자이너김군 2009.11.05 15:31 신고  댓글주소  수정/삭제  댓글쓰기

    CSS를 조금만 이해하면 블로깅이 참 즐거워 지는데 말이죠~
    근데 그 조금을 이해하기가 참 어렵더라구요. :)

  3. BlogIcon 보시니 2009.11.05 16:34 신고  댓글주소  수정/삭제  댓글쓰기

    저도 한 동안 블로그 스타일 만지다가 요샌 귀찮아서 만져보지 못했는데,
    카이님 강좌로 다시 시도해 봐야겠습니다.

    • BlogIcon Kay~ 2009.11.06 10:49 신고  댓글주소  수정/삭제

      ㅋㅋ 다 그런것 같아요
      한동안 정신없이 들여다보고 수정하다가 또 한동안 잊어버리고 살다가..
      다시 또 만지는... ㅋㅋㅋ
      티스토리와 css 는 뗄레야 뗄 수가 없는 존재죠!

  4. 2009.11.05 19:27  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  5. BlogIcon 비프리박 2009.11.05 21:45 신고  댓글주소  수정/삭제  댓글쓰기

    more less fold 요건 너무 밋밋해서 방법이 없을까 고민을 했는데요.
    저는 포스트 작성시에 뭔가 스킬을 발휘해야 하는 건가 했다죠.
    일단 css 건드리니 말 잘 듣네요. ^^
    넘흐 유용한 정보를 이리 무단으로 배워도 되는 것인지. ^^

    다시 한번 머리를 맑게 해주신 nkay님에게 머리 숙여 감사를. ^^

    p.s.
    근데 more less fold 아이콘 색깔 바꾸는 건
    제가 아이콘을 만들어서 올려놓은 후에 수정을 해야 하는 것인가요?
    요건 적어주신 내용을 봤는데도 이해가 잘. ^^;

    • BlogIcon Kay~ 2009.11.06 11:02 신고  댓글주소  수정/삭제

      아하! 바로 적용을 하셨군요!
      ㅋㅋ 무단으로 머리에 담아서 이용하셔도 아무 문제 없습니다. ㅋㅋ
      아이콘은 별도로 꾸며야 합니다. 포토샵등으로 만들어서 스킨자료실에 업로드해야 합니다.
      비프리박님 댓글보고 본문에 덧글을 달았는데 간단하게 하려면 같은 이름으로 해서 저장을 하면 편하지요! ^^

  6. BlogIcon 김치군 2009.11.06 12:41 신고  댓글주소  수정/삭제  댓글쓰기

    역시 언제나 도움되는 글들이 가득..^^*

    more/less는 저도 한번 써봐야겠는데요 ㅎㅎ

  7. BlogIcon ageratum 2009.11.06 12:56 신고  댓글주소  수정/삭제  댓글쓰기

    저같이 사진이 많은 글은 moreless를 써야될거 같긴한데..
    솔직히 귀차니즘으로..ㅜ.ㅜ

  8. BlogIcon 못된준코 2009.11.06 16:05 신고  댓글주소  수정/삭제  댓글쓰기

    ㅋ ㅑ~~아!! 역시 케이님~~세심한 부분까지 제대로 신경쓰십니다.
    케이님 블로그 오면....html이나 스타일시트를 공부하고 싶은 맘이 저절로 생겨요.
    오늘도 좋은하루 마무리하세요.~~~

    • BlogIcon Kay~ 2009.11.09 09:54 신고  댓글주소  수정/삭제

      ㅋㅋ 준코님.. 마구 마구 의욕이 생길때 해보면
      금새 한두가지 뚝딱 배울수 있죠.. ㅋㅋ
      하지만 css는 굳이 배울필요없이 필요할때 찾아서 해결하는 방법도 좋은것 같아요! ㅋㅋ

  9. BlogIcon 아디오스(adios) 2009.11.09 01:51 신고  댓글주소  수정/삭제  댓글쓰기

    변경된 more스타일 딱 맘에 드는데요 ㅎㅎ 매번 저거 어케 바꾸나? 이러고 있었는데 ㅎㅎㅎ

    • BlogIcon Kay~ 2009.11.09 09:56 신고  댓글주소  수정/삭제

      예. 그게 숨겨져 있는 내용에 대한 제목인데..
      디폴트는 잘 안 보여서 more 쓰기가 꺼려지더라고요!
      그래서 조금 눈에 잘 띄게 한다면 맘껏 가려놔도 좋을것 같아요! ㅎㅎ

  10. BlogIcon Energi2er 2010.04.10 03:21 신고  댓글주소  수정/삭제  댓글쓰기

    더보기 기본 그림이랑 펼쳤을때 그림을 다 삭제하고 일반 글씨처럼 보이게
    하고 싶은데 어떻게 해야 하나요?

    앞에 아이콘같은 그림을 삭제하고 글씩 색만 바꾸고 싶습니다..

  11. BlogIcon 이세진 2012.06.15 14:16 신고  댓글주소  수정/삭제  댓글쓰기

    상세한 설명 감사합니다!!ㅎㅎ