반응형
블로그 header와 footer 의 경우, 스타일 태그로 background 이미지를 불러와서 사용했는데
아래처럼 모서리가 각이 져 있어서 좀 불만스러웠습니다.
▼기존 header와 footer
그래서 포토샵으로 라운드 처리를 해서 다시 올릴까 하다가 스타일 태그로 하는 방법은 없을까 싶어서 찾아봤는데
스타일 태그만으로 간단하게 이미지 라운드 처리를 하는 방법이 있어서 공유할까 합니다.
아래는 이미지 라운드 처리 후에 블로그 캡쳐 화면입니다. 확실히 라운드 처리 된 후에 더 정리된 것처럼 보여서 맘에 드네요
이미지 모서리 라운드 처리 전과 후를 클로즈해서 비교해보면 확실히 다르게 느껴지네요
적용 방법은 의외로 간단한데 바로 border-radius 태그를 이용하는 겁니다.
아래는 헤더에 적용한 스타일 태그입니다.
#header {
background:url(images/header.jpg) 0 0 no-repeat;
height:132px;
width:100%;
border-radius :15px 15px 0 0 ;
}
border-radius : 왼쪽위 오른쪽위 왼쪽아래 오른쪽아래 ; 해서 값을 입력하시면 되고
px 값은 라운드 되는 정도를 나타냅니다.
아래쪽 모서리를 하는 경우라면 border-radius : 0 0 15px 15px; 하시면 됩니다.
포토샵과 안 친한 프로그래머에게 딱 맞는 방법이 아닐까 하네요
이상 DIV 스타일을 이용한 이미지 모서리 처리 방법을 소개드렸습니다.
반응형
'생활정보' 카테고리의 다른 글
다시 시작하는 영어 공부 그리고 선택한 영어 교재들 (0) | 2012.11.06 |
---|---|
최선의 결정은 어떻게 내려지는가(Judgment Calls) 도서 리뷰 (0) | 2012.10.28 |
작고 공간 효율성이 좋은 네스프레소 U 머신 체험기 (0) | 2012.10.27 |
안전을 생각한다면 순성 데일리 오가닉 카시트 (0) | 2012.10.24 |
Tumblr 가 만든 사진합치기 어플 Photoset (1) | 2012.10.16 |
소비자들의 기대를 저버린 iPod Nano 7세대 (0) | 2012.10.12 |
운전할 때 애용하는 졸음 올 때 씹는 껌 (2) | 2012.10.11 |