DIV 스타일을 이용한 이미지 모서리 라운드 처리

블로그 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 스타일을 이용한 이미지 모서리 처리 방법을 소개드렸습니다.