애용하는 CSS Hack 2가지.

HTML  코딩을 하다보면 어쩔 수 없이 CSS Hack을 사용해야 만 하는 경우가 있다.
저질 IE6만 특별하게 왕따를 시키거나, FF만 특별대우를 해주거나, 혹은 IE6, IE7, FF 각개격파를 하거나..
일반적으로 비중이 높은것이 IE6왕따시키기, FF 특별대우 해 주기 인데
이것들을 Hack하는 방법은 여러가지가 있겠지만 아주 간단한 Hack 한가씩만 공개(?)를 한다.

먼저 IE6(저질)만 왕따시키기 방법은

  1. IE6에만 적용시킬 CSS를 쓰고
  2. IE7, FF에 적용시킬 CSS는 style name을 쓰고 한 칸 공백을 준 후 /**/(주석) style value를 적어주는 방법이다.
  3. 여기서 중요한것은 순서인데 IE6 CSS를 먼저 쓴 후 IE7, FF CSS를 적는것이다.
    순서를 바꿔서 IE7, FF CSS을 먼저 적었다면 IE7, FF는 자기들을 위해 마련된 CSS를 적용한 후 IE6 CSS도 적용하면서 덮어씌워지기 때문이다.

말로 적으니 역시 무슨말인지 모르겠네;; 여기 간단한 예제를 보자.

padding:0px; /* Only IE6 */
padding /**/:5px; /* IE7, FF */

IE6만 왕따시키는 방법을 알았으니 이제 FF를 특별대우 하는 방법도 알아보자.

  1. FF CSS를 적고
  2. IE형제들에게 적용시킬 CSS는 style name 앞에 *(곱하기)를 붙인다.
  3. 이것 역시 순서가 중요한데 FF용이 먼저 쓰고 IE형제들이 나중에 쓴다. 이유 또한 마찬가지다.
    (IE형제를 먼저 썻다고 가정할 경우)IE형제가 자기들용 CSS를 읽고 다시 FF용 style을 읽으면서 덮어씌워지기 때문이다.

이것 역시 말로 적으니 뭔말인지..영…숭구리당당 하다. 역시 예제가 최고다!

padding:0px; /* For FF */
*padding:5px; /* IE brothers */

이 두개의 Hack만 있으면 일반적인 상황은 거진 다 해결된다.

ps. IE6 저질…!

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중