아래는 스터디 시간에 제작 했던 UIO입니다.

paging2.jpg

display:inline-block 혹은 display:inline 속성을 주게되면 코드의 가속성을위해 사용한
띄어쓰기, 엔터(줄바꿈)을 하나의 공백문자로 인식하게되어 약 12px(한글기준) 1자정도의 공백이 생기는 현상이 있어
그 현상을 없애기위한 내용이었습니다.

일반적으로 #container나 가장바깥쪽을 감싸고있는 <div>에 아래와같이 font-size:0를 이용하여 빈공간간격을 없애준 후
글자크기가 필요로한 곳에 다시 재선언을 해주는 방법을 씁니다.

[CSS]

[HTML]

이렇게되면 모든 브라우저가 정상적으로 동작을 하게됩니다.
하지만……
역시(?) ie7은 1px이라는 간격을 끌어안고 있습니다.
pagingie7.jpg

유독 ie7에서 이런현상이 일어나, 나름 검색도해보고,
스펙도 찾아보고, letter-spacing:0;margin:0;padding:0;word-spcing:0; 까지 첨가해보며 해보았으나..
결국은

 

IE7이하버전에 적용하는 ‘Hack’을 사용하여 해결하였습니다!!
[*margin-right:-1px]
저는 개인적으로 핵을 왠만하면 안쓰려하긴하지만, 이런 경우엔 사용하는것도 적절하다고 생각합니다.

혹시 이글 보시는 분중 !! 다른방법이 있다면 꼭좀 ..공유해주셨으면 좋겠습니다~
저도 다른방법을 계속 연구해보려고합니다 !

 

그리고 꽤 재밌는 내용을 봤었는데요..
출처:http://goo.gl/g22jE

 

 

이런식으로 html코드의 “>”부분을 줄바꿈해버리거나 한줄로 붙여 쓰는방법도 있다고합니다!!

이상입니다. 감사합니다^^