'전체'에 해당되는 글 104건

크로스브라우징을 위한 CSS핵

강좌/CSS/HTML/JS

웹디자인/개발을 하시다보면 파이어폭스,크롬,사파리 등의 브라우저에서는 제대로된 레이아웃을 볼 수 있지만.
IE(6,7,8,9)에서 지원하지 않는 속성, 버그들 로 인하여 레이아웃이 깨져
의도하지않은 형태가 나올 수 있습니다. 이것을 해결하기 위해 나온 궁여지책이 핵(hack)입니다.

CSS핵이란*  브라우저별로 CSS를 분리하여 관리하지 않고도 각 브라우저에 따로따로 CSS를 주는 기법중에 하나입니다.
(사실 사용하지 않는 편이 좋은 코드입니다 ㅜ 그런데 사용하지 않을 수가 없다던..)

핵의 원리는 크게 2가지로 볼 수 있습니다.
1. CSS에서는 같은 속성을 중복으로 주게되면 나중에 적용된 속성으로 표시됩니다 
하단의 예를 봅시다. :)

#element {
	color: blue;
}
#element{
	color: red;	
}

이렇게 되면 먼저 color : bule 로 텍스트의 색상을 파란색으로 지정했지만.
바로밑에 같은 엘리먼트에 color: red; 를 썻으므로 앞의  color : bule 는 무효화되어 최종적으로 글씨는 빨간색이 됩니다.

2. 본래 표준 브라우저에서는 속성의 앞이나 뒤에 특수문자가 붙으면 인식을 하지못하지만.
(여타프로그래밍 언어에서 int를 _int로 오타를 내면 인식을 못하는 것 처럼)
브라우저별로 앞이나 뒤에 사용되어도 정상적으로 인식할 수 있는 문자 혹은 문자열이 존재합니다.

위 두가지 원리를 이용한 핵의 원리입니다.

#element {
	color: blue;
}
#element{
	_color: red;			/*  IE6  용 */ 
	*color: white;			/*  IE6+7 용 */
	color: green  \0/IE8+9; /*  IE8+9  용 */
}
:root #element{
	color: pink  \0/IE9;    /*   IE9 용  */
}

핵을 사용하는 것 자체가 표준이 아니기 때문에 꼭 사용할 사항이 아니라면 사용하지 않는 것이 옳다고 봅니다.


+추가내용.

브라우저별 핵을 아주 자세하게 모아 놓은 외국 사이트를 발견했습니다.
참고하시면 좋을 것 같습니다. :) 
http://browserhacks.com/

Name
Password
Homepage
Secret