[해피CGI][cgimall] 프로필 사진처럼 이미지 동그랗게 (동그란 이미지) 처리하는 방법

페이스북이나 각종 SNS 웹페이지에서 주로 보여지고 있는 둥근 프로필 이미지를
포토샵없이 CSS만으로 가능한데요, 바로 border-radius 를 이용하면 됩니다..


만약 이미지 크기가 100px * 100px 라면

img {
    width: 100px;
    height:100px;
    border-radius: 50px; /* 이미지 반크기만큼 반경을 잡기*/
} 

2. 레이어에 백그라운드 이미지 깔고 border-radius 사용

 #radius-box {
    width: 100px;
    height: 100px;
    background-image:url("배경이미지경로");
    border-radius: 150px; /* 레이어 반크기만큼 반경을 잡기*/    
    display: table-cell;
    vertical-align: middle;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}

 단, 위 내용은 CSS3에서만 적용가능하며, 
일부 브라우저 에서는 지원이불가능 합니다.

이때 사용할 수 있는 팁으로, 
가운데 원형을 제외한 영역이 채워진 png이미지를 만들어 
absolute를 활용해 이미지 위에 겹쳐 포개는 형식으로 대체하실 수 있습니다.