Cross Browsing : 자바스크립트로 스타일시트 변경하기

Computer/Programming 2007/09/28 16:41

Runtime시에 실시간으로 자바스크립트로 스타일시트를 변경하기 위해서는 두 가지 방법이 존재한다. 두 개의 스타일시트 클래스를 만들어 놓고 Object의 Class 속성을 변경하는 방법이 가장 많이 쓰이는 방법이나, 이는 변경의 폭이 매우 제한적이다. 또 다른 방법은 스타일시트 자체를 변경해 주는 것이다.
두 방법 모두 브라우저 간에 방법이 다르기 때문에 Cross Browsing 문제에 대해 신경을 써야 한다. 본 포스트에서는 두 번째 방법에 대해서만 설명한다.

개체의 width는 30으로, height은 15로 조절하고 싶을 때

IE의 경우
obj.style.cssText="width:30px; height:15px;";

비 IE 브라우저의 경우
obj.style.width="30px;";
obj.style.height="15px;";

IE가 좀 더 편한 듯 보이나, 위 예제 후 width를 제외한 height만 다시 변경할 경우를 보자.

개체의 height만 25로 조절하고 싶을 때

IE의 경우
obj.style.cssText="width:30px; height:25px;";

비 IE 브라우저의 경우
obj.style.height="25px;";

IE의 경우 height 속성만 적어주면 width 속성이 초기화되기 때문에 두 속성을 모두 적어주어야 하지만 비 IE 브라우저의 경우 속성별로 조절을 해 줄 수 있기 때문에 스타일을 자주 변경할 경우에는 비 IE 브라우저가 더 편하다.




2008년 1월 19일 이후 작성된 모든 글에 대해서 퍼가는 것을 금지합니다.
퍼가고자 하시는 분은 링크를 달아 주시기 바랍니다.
Posted by Harry
TAG Cross Browsing, CSS, Firefox, height, IE, Internet Explorer, Javascript, Microsoft, Stylesheet, width, 스타일시트, 자바스크립트
Trackback 0 , Comment 0

Cross Browsing : 투명도 조절 Stylesheet

Computer/Programming 2007/09/28 08:50
IE와 비IE 브라우저 간 차이를 보이는 Stylesheet 중 하나가 투명도에 관련된 Stylesheet이다. 일반적으로 투명도를 조절할 때 스타일시트를 다음과 같이 써 준다.

opacity:0.80; filter:alpha(opacity=0.80);

사실 이 코드 자체가 브라우저 간 호환성을 고려한 코드이다. 왜냐하면, opacity라는 속성은 비IE 브라우저에서만 작동하고, filter라는 속성은 IE에서만 작동하기 때문이다. 또한 Stylesheet는 정의되지 않는 속성 이름이 있어도 오류를 내지 않고 무시하고 넘어가기 때문에 이와 같이 써 주어도 무방한 것이다.

하지만 자바스크립트로 투명도를 조절해야 할 때에는 어차피 스타일시트를 자바스크립트로 조작하는 방법이 브라우저간 차이가 있기 때문에 각각에 맞는 스타일만 써 주어도 될 것이다. 다음과 같다.

if(IE) obj.style.cssText="filter:alpha(opacity=0.80);";
else obj.style.opacity="0.80;";


2008년 1월 19일 이후 작성된 모든 글에 대해서 퍼가는 것을 금지합니다.
퍼가고자 하시는 분은 링크를 달아 주시기 바랍니다.
Posted by Harry
TAG alpha, Cross Browsing, CSS, filter, Firefox, IE, Internet Explorer, Javascript, Microsoft, opacity, Opera, Stylesheet, 브라우저, 스타일시트, 자바스크립트, 투명도, 호환성
Trackback 0 , Comment 0

Cross-Browsing : 브라우저간 호환성 확보

Computer/Programming 2007/09/26 19:46

컴퓨터에서 Cross 라는 말이 붙으면 호환이 된다는 의미이다. Cross-Language라고 하면 언어 간 호환이 되는 패키지나 클래스를 일컫고, Cross-Platform이라고 하면 플랫폼간 호환이 가능한 것을 말한다. 마찬가지로, Cross-Browsing이라는 브라우저간 호환이 되도록 하는 것을 일컫는다.

Apec Cyber Academy의 과제 중 하나로 학교와 고장, 팀원을 소개하는 웹 페이지를 작성하게 되었다. 그런데 여기서 제시한 '잘 만들어진 페이지'의 기준 중 하나가 '모든 브라우저에서 정상적으로 작동한다'이다. 즉, Cross-Browsing이 얼마나 잘 되었느냐가 채점 시 반영된다는 것이었다. 때문에 페이지 하나를 만들면서도 Cross-Browsing 문제에 굉장히 예민해질 수밖에 없었다.

많은 사람들이 아직까지 Cross-Browsing에 대해 많은 지식이나 개념을 갖지 못하고 있는 것이 사실이다. Cross-Browsing은 브라우저를 크게 Microsoft Internet Explorer와 그 이외의 브라우저, 두 개로 나누었을 때 둘 간의 호환이 많은 부분 되지 않기 때문에 이를 해결해 주는 것이다. 역시 문제는 MS IE이다. IE 7로 넘어 오면서 상당 부분 개선된 것은 사실이나 아직 Opera나 Firefox의 표준 준수율을 따라가기에는 그 거리가 굉장히 멀다. 시장 지배력은 가장 큰 브라우저로서 페이지 제작과 이용의 편의를 위해 MS는 각성하고 하루 뻘리 표준 준수율을 높여야 할 것이다.

필자가 페이지를 작성하면서 두 브라우저간 소스를 다르게 작성한 부분은 다음과 같다.

호환성 확보 항목
  • Width & Height의 영역 차이
    • IE는 Width와 Height으로 정해진 범위 내에 Padding이 포함되지만, 이외의 브라우저는 Padding이 Width와 Height의 밖에 있다. 엄밀히 따진다면 IE가 옳지 못한 렌더링이다.
  • 투명도 관련 스타일의 차이
    • IE의 경우 투명도 값을 filter로 조절하지만, 이외의 브라우저의 경우 투명도 값을 opacity로 조절한다.
  • Javascript로 Stylesheet를 조절하는 방법의 차이
    • IE의 경우 object.style.cssText="width:100%;"와 같이 스타일을 변경할 수 있지만, 이외의 브라우저의 경우 object.style.width="100%;"와 같이 한다.
  • Event 객체의 전달 방법의 차이
    • IE의 경우 이벤트가 발생했을 때 호출된 함수에서 자유롭게 브라우저 내장객체인 event를 사용할 수 있지만, 이외의 브라우저의 경우 이벤트 발생 시점에서 함수에 매개변수로 event객체를 넘겨 주어야 함수 내부에서 이를 참조할 수 있다.
  • Class 속성 이름의 차이
    • IE의 경우 className이라는 속성 이름을 통해 객체의 Class 이름에 접근할 수 있지만, 이외의 브라우저는 class라는 속성 이름으로 접근해야 한다.
  • 동적 이벤트 할당 방법의 차이
    • IE의 경우 onclick 속성값에 함수 인스턴스를 할당하면 되지만, 비 IE 브라우저의 경우 setAttribute 함수를 이용해야 한다.



2008년 1월 19일 이후 작성된 모든 글에 대해서 퍼가는 것을 금지합니다.
퍼가고자 하시는 분은 링크를 달아 주시기 바랍니다.
Posted by Harry
TAG Apec Cyber Academy, Class, Cross Browsing, CSS, Event, Firefox, Internet Explorer, Javascript, Microsoft, Opera, Stylesheet, Web Browser, 객체, 브라우저, 브라우저 호환성, 스타일시트, 표준, 호환
Trackback 0 , Comments 2