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

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

라이트 박스는 아니지만 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
보는즉시 답글 드릴께요...