(css) border로 꾸미는 나만의 이미지 스타일

블로그에서 사진은 빼놓을 수 없는 필수 요소입니다. 
블로그에 사진을 올릴때 style sheet의 border를 이용하면 각자의 원하는 스타일에 맞게 여러가지 모양의 테두리를 그려서 표시할 수가 있습니다.

가장 일반적인 방법이 이미지에 테두리를 표시하는 방법입니다.
그냥 이미지만 올리는 것보다 테두리를 표시하면 사진이 훨씬 깔끔해보이지요!

포토샵이나 기타 그래픽 툴을 이용하는 분이라면 사진에 워터마크도 삽입하고 테두리도 보기 좋게 넣어서 올리지겠지만 그래픽 툴에 대해서 모르는 분들은 그림의 떡이지요!

style sheet를 이용하면 그래픽 툴을 다루지 못해도 이미지 멋진 테두리를 삽입할 수가 있습니다.
여기서는 style sheet에 대해서 배우면서 이미지에 어떻게 적용을 시키는지에 대해서 알아보도록 하겠습니다. 

   

테두리 적용 전                                                             테두리 적용 후


<< 학습내용 >>

1. css의 기초 및 div, span에 대해서 기본적으로 알고 있어야 한다.

 - [CSS for 티스토리] - 티스토리 뽀개기 - div 와 span
 - [CSS for 티스토리] - 스타일시트(CSS)의 선언방법 1

2. border에 대한 기본적인 사용법

3. padding 에 대한 이해

4. 응용 및 티스토리 적용방법

학습내용중 1번은 링크된 글을 통하여 해결하면 되므로 바로 border의 사용법에 대해서 설명하겠습니다. 

border에 대한 이해 및 사용법

. border는 테두리선을 간단하게 그려주는 기능을 합니다.
. border 는 html의 각종 태그중 주로 div, span, p, td, img태그와 함께 사용을 합니다.
. 사용형식

   <태그 style="border:선굵기 선종류 선색깔;">

   선굵기: 픽셀단위로 입력 (ex. 1px, 10px, 30px)
   선종류: solid, dotted, dashed, double, groove, ridge, inset, outset 등이 있음
   선색깔: #000000 과 같은 방식이나 컬러명을 입력하면 됨 (RGB 색상코드표 참조)

예제1) <div style="border:1px solid red;"> 표시할 내용 </div>
예제2) <div style="border:5px dotted #cccccc;"> 표시할 내용 </div>

border를 사용하면 사각에 선이 표시가 되는데 위나 아래등 일부분에 대해서만 선을 표시하는 경우에는 border 대신 아래 속성을 사용합니다.

border-left  : 왼쪽 선을 표시
border-right : 오른쪽 선을 표시
border-top : 위쪽에 선을 표시
border-bottom : 아래쪽에 선을 표시

예제와 결과

1. <div style="border:2px solid #ff0000;"> 빨간 박스 </div>의 결과

빨간 박스

2. <div style="border:5px solid #cccccc;"> 선굵기 5픽셀 </div>의 결과

선굵기를 5픽셀

3, <div style="border:5px solid #cccccc;width:300px"> 넓이를 300픽셀로 했을때 </div>의 결과

넓이를 300픽셀로 했을때

4. <div style="border:5px solid #cccccc; width:300px; height:30px;"> 넓이300픽셀, 높이 30픽셀 </div>의 결과

넓이300픽셀, 높이 30픽셀

padding의 이해


padding은 테두리와 이미지(또는 텍스트) 사이의 공간을 지정할 때 사용는 속성입니다.

<< padding 의 사용형식 >>

   <태그 style="padding:5px;">      => 상하좌우에 5픽셀만큼 여백을 줌.
   <태그 style="padding:0 3 5 7;">  => 상하좌우를 따로 따로 지정 (위, 오른쪽, 아래, 왼쪽순)

 

이미지에 테두리 넣기

준비한 이미지

사용형식>

<div style="style 속성"><img src="이미지 url" border=0></div>

소스)

<div style="border:5px solid #5D6F5E; padding:7px">
<img  src=https://t1.daumcdn.net/cfile/tistory/1805261E4ABAFCFF49 border=0>
</div>

        << 결과 >>

 

 

<div style="border:5px solid #6F4D3A; padding:15px; background:#fefdcc; width:400px">
<img  src=https://t1.daumcdn.net/cfile/tistory/1805261E4ABAFCFF49 border=0>
</div>


 

티스토리에서의 적용

티스토리에서 이미지에 테두리를 적용 또는 기존의 테두리 스타일을 수정하기 위해서는 2가지 방법이 있습니다.

첫번째. 이미지를 삽입할때마다 매번 직접 스타일을 지정한다.
두번째. style.css를 수정한다.

첫번째. 이미지 삽입후 스타일 수정하기

이 방법은 각각의 이미지마다 스타일을 지정해주는 방법으로 많은 이미지를 삽입하는 경우에는 부적합니다.

1. 먼저 이미지를 삽입합니다.
2. 이미지를 삽입한다음 html 을 확인해보면 

   [ ##_1N|cfile8.uf@176D2D1E4ABAF00082AC0C.png|width="250" height="163" alt="" filename="cfile8.uf@176D2D1E4ABAF00082AC0C.png" filemime=""|_## ]

와 같습니다.

3. 위의 소스에 아래와 같이 스타일을 추가해주면 됩니다.

[ ##_1N|cfile8.uf@176D2D1E4ABAF00082AC0C.png|width="250" height="163" alt="" style="border:5px solid #5D6F5E; padding:7px" filename="cfile8.uf@176D2D1E4ABAF00082AC0C.png" filemime=""|_## ]

위의 빨간색 부분처럼 style을 추가해주면 되며 padding이나 border의 값들은 원하는 형태로 수정하면 됩니다.

두번째. style.css 수정하기

티스토리의 관리페이지의 스킨- html/css 편집에서 style.css의 내용을 수정하는 방법으로 이 방법을 이용하면 현재 올려진 이미지 및 앞으로 올리는 모든 이미지에 지정된 스타일이 일괄적용이 됩니다.

다만 이미지에 딱 맞게 테두리가 그려지는 것이 아니고 본문폭에 맞추어지는 단점이 있습니다.

방법은 아래와 같습니다.

1. style.css에서 .imageblock 를 찾습니다. (스킨에 따라서 이미지 스타일을 지정하는 방법이 다를 수도 있음)

      .imageblock             { padding:5px;  margin:5px 0;} 

2. 아래와 같이 border 스타일을 추가하거나 수정합니다.

      .imageblock         { border:5px solid #ddd;  padding:15px;  margin:5px 0;}

3. 저장을 하면 끝입니다.

다시 언급하지만 이 방법은 기존에 올린 이미지의 스타일도 바뀌므로 border나 padding 값을 적절히 조정하고
기존 이미지의 모양이 이상해지는 확인을 해야 합니다.

지금까지 설명한 border 스타일은 제목처럼 이미지에만 적용하는 것이 아니라 각종 box 를 만들때 사용하는 스타일 속성이며 그중에 이미지에 적용하는 예를 설명한 내용입니다.

이 방법을 이용해서 소제목 스타일을 지정해도 되고 여러가지 박스를 만들어서 사용할 수가 있습니다.

style sheet 관련글.
2008/10/21 - [CSS for 티스토리] - 스타일시트(CSS) 이해하기 for 티스토리
2008/10/24 - [CSS for 티스토리] - 스타일시트(CSS)의 선언방법 1
2008/10/27 - [CSS for 티스토리] - 스타일시트의 선언방법 및 사용 예제 2
2008/12/21 - [CSS for 티스토리] - 크리스마스 트리장식으로 알아보는 CSS
2009/02/13 - [블로그팁] - 서식활용으로 포스팅 시간을 줄여보자.
2009/02/16 - [CSS for 티스토리] - 서식으로 배우는 스타일시트(CSS)
2009/09/03 - [CSS for 티스토리] - 티스토리 뽀개기 - 스킨 구조(skin.html) 이해하기
2009/09/07 - [CSS for 티스토리] - 티스토리 뽀개기 - div 와 span

댓글을 달아 주세요

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

  1. BlogIcon 구차니 2009.09.24 17:00 신고  댓글주소  수정/삭제  댓글쓰기

    오 착시를 이용한 그림의 예시같아요 ㅋㅋ
    아 이쁘긴한데 구찮아요 ㅠ.ㅠ 징징징

    그러고 보니.. 저는 사진글이 별로 없구요 -ㅁ-!

    • BlogIcon Kay~ 2009.09.28 14:21 신고  댓글주소  수정/삭제

      아.. 그런가요? 착시 ㅋㅋ
      사실 css를 만지려면 조금 귀찮긴 하죠..
      가끔 이미지 한장만들어가거나 특정 이미지에 대해서 꾸며야 하는경우에 효과적일것 같아요! ^^

  2. BlogIcon 레이먼 2009.09.24 17:36 신고  댓글주소  수정/삭제  댓글쓰기

    잘 보았습니다.
    스킨html코드에서 사진 테두리 설정법은 어떻게 해야 하는지요
    이렇게 하면 포스트 작성시 삽입한 사진에 그대로 적용이 되니 수고로움이
    덜 할것 같은데요.

    • BlogIcon Kay~ 2009.09.28 14:23 신고  댓글주소  수정/삭제

      제일 마지막 부분에 티스토리에서의 적용에서
      두번째 방법을 이용하면 됩니다.
      style.css에 지정해주면 한번만 지정해주면 더이상 지정할 필요가 없답니다.

  3. BlogIcon 드자이너김군 2009.09.24 23:36 신고  댓글주소  수정/삭제  댓글쓰기

    오오~ 정말 너무나 유용한팁~ 전 왠지 보더 있는게 너무 인위적 이라서 빼버리긴 했는데.. 아쉬울때가 많더라구요..ㅎ

    • BlogIcon Kay~ 2009.09.28 14:24 신고  댓글주소  수정/삭제

      ^^ 그런가요?
      저도 티스토리 css를 이용한것은 빼고 별도 프로그램으로 보더를 삽입해서 쓴답니다. ㅎㅎ
      그래서 넣다 보니.. 나름 깔끔하고 보이고..
      사진이 더 잘 나와보이더라고요! ^^

  4. BlogIcon tamguja 2009.09.25 00:54  댓글주소  수정/삭제  댓글쓰기

    테두리 있으니 느낌이 다르네요 ^^*

  5. BlogIcon 넷테나 2009.09.25 07:49 신고  댓글주소  수정/삭제  댓글쓰기

    사진자체를 꾸미는것과는 다른 맛이 있네요. 좋은 정보 감사드립니다^^
    즐거운 하루되세요~

  6. BlogIcon ageratum 2009.09.25 07:50 신고  댓글주소  수정/삭제  댓글쓰기

    항상 좋은 팁 감사드립니다..^^
    언제 날 잡아서 스킨을 확 바꿔볼까 생각중인데..
    아.. 스킨은 건드리기 무서워요..ㅋㅋ

  7. BlogIcon 키르케♪ 2009.09.25 10:46 신고  댓글주소  수정/삭제  댓글쓰기

    일단 이미지 삽입후 소스를 수정하는 방법으로
    연습해봤습니다.

    역시 역시
    저는요~ 케이님이 설명해주시는 css가 제일 이해가 잘되요.
    앞으로 이런 팁 많이 많이 부탁드려요. ^^

    • BlogIcon Kay~ 2009.09.28 14:30 신고  댓글주소  수정/삭제

      다행입니다.
      사실 아는 사람은 쉽지만 모르는 사람에게는 어렵기 때문에
      쉽게 설명한다고 했지만 이해가 가는지 안가는지 모르거든요.
      이렇게 느낌을 알려주셔서 감사합니다. ^^

  8. BlogIcon 머니야 머니야 2009.09.25 12:26 신고  댓글주소  수정/삭제  댓글쓰기

    CSS를 잘활용할때 비로서 남과는 다른 자신만의 웹페이지, 블로그등을 꾸밀수 있게되는 거 같더군요~
    좋은글잘보구 가여^^

    • BlogIcon Kay~ 2009.09.28 14:35 신고  댓글주소  수정/삭제

      맞는 말씀입니다. css를 알면 나만의 특별한 블로그나 홈피를 꾸미기가 쉬워지죠.
      특히 티스토리는 더욱 그렇구요!

  9. BlogIcon 소인배닷컴 2009.09.26 23:51 신고  댓글주소  수정/삭제  댓글쓰기

    과연. . . 테두리가 있는 것과 없는게 천지차이군요. . . +_+;

  10. BlogIcon 둥이 아빠 2009.09.27 00:08 신고  댓글주소  수정/삭제  댓글쓰기

    이야`~ 잘 봤어요... 저도 블로그 좀 고쳐보려고 상단쪽을 ...

    그런데 소스에서 자꾸 엉키네요...ㅠ.ㅠ.

    • BlogIcon Kay~ 2009.09.28 14:36 신고  댓글주소  수정/삭제

      ㅎㅎ
      제일 어려운 부분이 헤더 부분이 아닐까 합니다.
      높이 조절과 위치조절에서 가장 복잡한 곳이거든요! ^^
      성공하길 바랄께요! ^6

  11. BlogIcon 윤뽀 2009.09.28 10:57 신고  댓글주소  수정/삭제  댓글쓰기

    으흠 좋은 팁이네요 ㅋ 제 블록 스킨쪽을 ㅅㅑ샥 손보고 싶은데 이건 진짜 하루 날을 잡아야 할 것 같아서말이죠 ㅋㅋ 직접 적용할때 또 찾아오게 될 것 같습니다

  12. BlogIcon 당당~ 2009.09.29 13:45 신고  댓글주소  수정/삭제  댓글쓰기

    능력자이십니다;;;

  13. BlogIcon 카푸리오 2010.04.29 12:42 신고  댓글주소  수정/삭제  댓글쓰기

    잘 보고 갑니다..^^
    공부 많이 해야 될 듯 하군요...
    이쁘게 만들어 보도록 노력해야겠네요.

  14. BlogIcon 피아노블로그 2011.01.01 23:57 신고  댓글주소  수정/삭제  댓글쓰기

    저번에 케이님이 올려주신 포스팅을 보고 변경했던 기억이 있는데요, 지금 제가 그림을 업로드하면 얇게 테두리가 생기는데 이게 보기싫어서 없애고 싶거든요.. 방법을 모르겠네요.

    혹시 시간 나신다면 http://sam2010.tistory.com/219 가서 봐주실 수 있나요?

  15. BlogIcon 일개미 2011.08.18 09:33  댓글주소  수정/삭제  댓글쓰기

    티에디션에서 제목부분의 나눔고딕체를 적용하셨는데 어떤 포스팅을 봐야 배울수 있을까요?
    본문적용 다 되었는데.. ㅎㅎㅎ

    티에디션의 제목부분이 반영되지 않아 귀찮게 덧글로 여쭤봅니다.
    감사합니다. ^_^ 복받으실 거예요.

  16. BlogIcon fiat novo uno 2012.07.07 05:15  댓글주소  수정/삭제  댓글쓰기

    공유에 대한 훌륭한 Post.thanks ... 더 기다려 .. ...