떳다! 진보네

본문

프로필 사진이 너무 크면 블로그를 처음 열때 로딩 시간도 많이 걸리고,
메뉴 부분 틀이 의도치 않게 망가지는 경우가 있습니다.

그래서 지난 번에는 이미지를 손쉽게 꾸밀수 있는 프로그램 알see를 이용한 방법을 소개했고,
이번에는 좀더 간단한 꼼수를 알려 드리고자 합니다.

역시 진보네는 꼼수죠!

잊혀진 비운의 블로그
http://blog.jinbo.net/debug_mode/ 를 잠깐 보실래요? 지금 스킨을 제가 이렇게 저렇게 장난을 치면서 바꾸다 만 상태인데, 일단 프로필 이미지 부분만 봐주세요.


원래 이미지는 이런 크기의 이미지에요.
그런데 디버그 모드 블로그에는 가로 80 세로 80으로 작아저있죠.skin수정을 통해서 간단하게 할수 있는 방법이 있답니다.

불로그 관리에서 스킨 편집 메뉴로 가셔서 CSS파일을 열어보세요. 그럼 아마도 profile_img라는 클래스가 있을겁니다.예를 들어 이런식으로요.

/*프로필 이미지*/
.profile_img {  text-align:center;  }


결론부터 말씀드리면, 저 아래에 이런식으로 적어주시면 됩니다.
.profile_img IMG{
  width:80px;

  height: 80px;
  }


width:가로; height:세로;를 알아서 써주시면 되는거에요.
메뉴폭에 맞게 정해주시면 되겠죠. 물론 큰 이미지를 작게 줄이면 이미지가 뭉개지겠지만.


원리는 간단합니다.

.profile_img  클래스는 실제로 HTML파일에서 아래처럼 프로필 이미지를 보여주는 IMG 태그를 감싸고 있죠

.profile_img IMG{ width:80px; height: 80px;}를 덧붙이면 .profile_img가 감싸고 있는 IMG태그에 대한 속성을 이렇게 정의해라 하는 뜻이 되는겁니다.


응용해서 이미지에 테두리를 주려면
.profile_img IMG{
width:80px;
height: 80px;
border:#cccccc 1px solid; <--이부분을 추가 하면 됩니다.

}

뜻은  색깔은 #CCCCCC이고 굵기는 1px인 solid속성의 테두리(border)를 준다는 게 됩니다.
solid는 그냥 막힌 일반적인 직선을 의미하고
dashed 혹은 dotted라고 주면 점선(진보네 최근덧글 메뉴를 감싸고 있는 점선 박스처럼)을 의미하죠.

간단하죠? 한번 해보세요 :)
border는 여기저기에 많이 쓰이고 있으니까 응용해 보셔도 좋겠네요