[블로그 꾸미기] 사진에 액자만들기

  안녕하세요. 오늘은 개인적인 사정이있어서 포스팅이 많이 늦었습니다. 오늘도 블로그 꾸미기로 첨부되는 이미지에 대해 사진 액자를 만들어보겠습니다. 사진에 액자효과를 넣으면서 한번더 사진을 효과적으로 표현할수있도록 도와주는 역활을 하게됩니다. 보통 저처럼 스크린샷을 찍어서 글에대한 이해를 돕기위해 첨부를 하는 경우에는 조금더 자세하게 볼수있도록 도와주고 사진과 글의 경계를 나눠주기때문에 글을 보는 사람들에게는 도움이 됩니다. 블로거 에서는 라이트 박스가 작동을 하지 않습니다. 유일한 방법이 수동으로 매번 사진마다 라이트박스를 지정해줘야한다는 불편함이 있습니다. 이게 방법이 있을지는 모르겠는데 만약있다면 제보 부탁드리겠습니다 (__) 라이트 박스가 있다가 사진을 구분을 해주는거는 아닙니다만 페이지 변경이 없기때문에 보기에는 좋다고 할수있습니다.

라이트 박스는 아니지만 CSS 를 이용하여 사진에 라이트 박스를 적용할수있습니다. 지금부터 그 설명을 하도록 하겠습니다. 이번에는 HTML 편집은 하지 않습니다. CSS 만 이용합니다.

[ 이번에는 이곳만 이용하게 됩니다. css 추가 ]

CSS 는 저번 글에서 모두 설명했기때문에 대부분 아실겁니다. 간단하게 스타일시트입니다. 스타일을 지정해주는 하나의표? 형식? 양식? 그쯤일것같네요.

위에서 액자라고 했지만 조금더 이해를 돕기위해 사진의 테두리라고 하겠습니다. 사진에 테두리를 넣기위해서는 일단 class 를 알아야 합니다. 이것도 저번에 설명했듯이 class 는 그 한 부분의 지정 이름 으로 생각하시고 있으시면 이해가 쉬우실겁니다.

.separator 이 부분이 이미지를 띄워주는 곳의 class 가 되겠습니다.

 .separator

 .separator 이곳을 활용하면 된다는 말이죠. 테두리는 특별하게 어떤걸 따라서 하기는 그렇고 지금 보이시는 제 블로그를 기준으로 설명을 해드리겠습니다.

1. background:#eee; 
2. padding:10px; 

위와같이 적용되어있습니다. 설명을 해드리면 순서대로 "배경색은 색상 회색, 공간은 상하좌우 10 " 으로 지정되어있습니다. 어때요? 정말 간단하죠. 하지만 제 블로그에서는 hover 도 적용시켜 놨습니다.

hover ?

쉽게말해 띄운값입니다. 호버보트 있죠? 바람의 힘으로 떠서 가는 배. 그때 쓰는 호버 입니다. 즉 마우스를 올렸을때 애니메이션 이라고 생각하시면 되겠습니다.
hover 에는 아래와같이 적용되어있습니다.

1. background:#333;    

간단하게 배경색상만 옅은 검정으로 지정되어있습니다. 즉 롤오버 했을시에는 저 배경색이 보인다는 겁니다. 쉽죠?


이제 각 부분 설명을 마쳤으니 완성본을 봅시다.

.separator img {
background:#eee;
padding:10px;
}

.separator img:hover {
background:#333;
}

이렇게 해서 완성했습니다. 정말 간단하죠? 아! 위에서 설명을 안한 부분이 있는데 잘 보시면 .separator img 에서 img 가 보이실겁니다. 위에서는 설명을 안했죠. 혹시 헤깔리실까봐 하단부분에 설명을 적었습니다. .separator 띠고 img 라는 말은 .separator에 상속되어있는 img그림 이미지 라는 겁니다.즉 그곳에 해당되어있는 모든 부분을 컨트롤 한다는게 아니고 IMG 파일만 움직이게 할것이다! 라는 말이 됩니다. 테두리는 그림에만 적용해야하기때문에 img를 따로 적어주는 겁니다.


어때요? 이해가 가시죠?




저는 칙칙하게 검정색과 회색만으로 테두리를 만들었지만 언제든지 원하는 색상을 넣으실수있습니다. 처음 보여지는 화면에서 padding 10을 주었지만 이렇게 말고 border 10을 주셔도 됩니다. 저는 박스를 키워서 보여주게 하였지만 원래는 보더로 10을 주는게 맞습니다.



위와같이 적어주시면 저의 블로그처럼 이미지파일에 테두리가 생겨납니다. 이 글이 도움이 되었으면 합니다. 잘안되는 부분이나 궁금하신거는 언제든지 덧글 주세요:D
보는즉시 답글 드릴께요...