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

(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