네이버에 프로필 사진을 넣을때는 용량제한이 아주 심합니다. 일반이미지 이면 별 상관없긴 하지만 GIF이미지는 기준 용량에 맞추면 화질열화가 아주 쩔게 됩니다.
이를 어떻게 우회할지 고민을하다가 그냥 기본 프로필 위젯에서 사진을 꺼버리고 별도로 프로필 이미지를 만들어 넣은것이 현재 제 네이버 블로그 스킨의 형태입니다.
그리고 한가지 일반 프로필 넣는 방식과 다른점은 원형 테두리 안에 들어가 있다는 것이죠. (물론 IE8이하에서는 네모 낳게 보이겠지만... 네이버는 IE6쓰는 사람이 잔뜩 오잖아? 아마 안될거야) 원형 테두리는 CSS3 속성인 border-radius를 이용하면 구현이 가능합니다. 사실 원형 이미지를 쓰면 잘리는 부분이 너무 많아서 그다지 좋다는 것은 느끼지 못하겠던데, 이전까지의 웹 환경에서는 구현하기 힘든 것이 CSS3 부터는 구현이 되다보니 신기해서 개나소나 다 가져다 쓰고 있는 판국이죠 (애플, 구글, 등등등)
이렇게 프로필 이미지를 만들어 넣으면 장점이 있습니다.
1, 사진을 내 마음대로 넣을 수 있다.
2. 프로필 내용과 이미지 위치를 따로 지정이 가능하다
3. 원한다면 자신이 원하는 메시지를 마우스 호버링시에 띄울 수도 있다.
4. 링크도 걸어진다.
코드는 맥빠질 정도로 간단합니다.
<div style="width:170px; height:170px; -webkit-border-radius: 500px; -moz-border-radius: 500px; border-radius: 500px; overflow:hidden; background:red; " title="Captain Slow">
<img src="http://postfiles16.naver.net/20130504_47/incusx_1367600775750t2mo6_GIF/guiyomi.gif?type=w1" style=" margin-left:-100px; " />
</div>
저 같은 경우 GIf이미지가 170x170이라는 컨테이너 크기에 딱 맞지 않아서 margin-left로 밀어 냈습니다. 딱 맞는 이미지를 쓰시는 분들은 지우셔도 되고 아닌 분들은 자기 임의 대로 더 움직이면 됩니다. 이미지는 보통 테두리의 위쪽끝과 왼쪽 가장자리에 고정이 되며 margin-left를 통해 마이너스 수치는 왼쪽으로, 플러스 수치는 오른쪽으로 밀어 낼수 있습니다. margin-top은 위쪽 기준으로 마이너스 수치는 위로 당기고 플러스 수치는 아래로 내립니다.
border-radius 수치는 네이버 위젯 가로폭 제한인 170px기준으로 충분히 원형을 만들어 주니 따로 건드리지 않으셔도 됩니다.
div요소의 title 부분에 자신이 원하는 문구를 넣고 마우스를 위로 올리면 해당 메시지가 출력됩니다.
div 태그전체를 a 태그로 감싸면 특정 사이트로 링크도 걸수 있습니다. → 적용페이지 참고
