텍스트와 이미지 이쁘게 정렬하기 - 이미지 위치 조정하기

요즘 블로그들을 방문해보면 포스트 하단에 구독 버튼을 단 경우가 많습니다  이게 해외 블로그에서 많이 보던 것이였는데, 언젠가부터 국내 블로그들도 많이들 달아 놓았더군요

이런 구독 버튼을 보면 텍스트와 아이콘을 같이 배열해 놓고 있습니다  저같은 경우도 마찬가지로 텍스트와 아이콘을 배치해 놓았구요  그런데 텍스트와 이미지를 배열해 놓다 보니 이미지가 텍스트보다 약간 올라간듯이 보여 이쁘지가 않다군요  제가 성격이 더러워서인지는 몰라도 이게 참 신경이 쓰이더라구요  그래서 제가 예전부터 쓰던 방법을 간략하게 소개할까 합니다  물론 그냥 둬도 괜찮다는 분은 이 방법을 쓸 필요가 없습니다  제 눈에만 안 이뻐 보일수도 있으니까요 ^^;;;

위 이미지는 이웃 블로그의 버튼과 제 블로그의 버튼입니다  보시다시피 그냥 설치를 하면 텍스트보다 아이콘 이미지가 약간 올라간게 좀 안 이뻐 보이죠  아이콘이 약간만 내려가면 좋을거라는 생각이 듭니다

마우스 제한 임시 풀기

<img src=" http://fs.tistory.com/custom/blog/10/101996/skin/images/feed-icon-pink-01.png" span style="position: relative; top: 0.6em"/>

그럼 아이콘 이미지만 약간 아래로 내려 보도록 하겠습니다  위의 코드는 제 이미지 아이콘 코드입니다  다들 아이콘 이미지를 불러오기위에 <img > 코드를 쓸텐데요 그 코드 내부에 분홍색으로 칠해진 내용을 추가만 하면 됩니다  마지막 부분의 [top:0.6em]을 보면 알다시피 상단에서 0.6만큼 내리란 말입니다  이 수치를 각자 조정해서 적당하게 넣으면 됩니다  제 아이콘 이미지는 0.6을 넣으니 딱 이더군요  (0.XX 단위로 조절하세요)

작업을 한 후 입니다  분홍색의 RSS 아이콘이 텍스트의 중간에 알맞게 위치하게 되어 아까보다는 훨 이뻐 보입니다

top 뿐만 아니라 left,right 등 모든 수치가 가능합니다  저 같은 경우 이방법을 통해 미세한 위치 조정을 자주 하는 편입니다