in 웹 디자인

CSS opacity Hacks

전남대

웹디자인 작업시 보통 롤오버 이미지를 만들 때는 Adobe Imageready나 Macromedia Fireworks를 이용한곤 한다. 특히 Fireworks는 드림위버와 연동되는 코드와 자바스크립트를 자동으로 생산해주기 때문에 롤오버 메뉴 버튼 등을 만들때 자주 이용했었다.

그러나 이런 프로그램들의 대부분이 Table-Layout으로 태그를 생산하기 때문에, Xthaml-css 에서 권장하는 div, ul, ol, li 태그들로 변경하기 위해서는 또 다시 Hand-Coding을 요구했다.

이런 문제들은 CSS : alpha 필터를 이용하면, 쉽게 해결할 수 있다. 우측의 이미지를 클릭 해보자. 별도의 자바스크립트를 요구하지 않으며, 롤오버 이미지도 필요 없다. 결과적으로 CSS 코딩의 특징인 코드가 무척 단순해지며, 이에 따라 코드의 수정 및 재생산도 편해진다.

이 페이지의 예제는 이곳에서 확인할 수 있으며, 사용된 CSS는 이곳에서 확인할 수 있다.

CSS opacity은 CSS3에서 지원하는 속성으로 CSS2에서는 지원하지 않는다. 다만 인터넷익스플러, 파이어폭스, 사파리 등 최근 버전의 브라우저에서 자체적으로 지원하고 있는 CSS 속성일 뿐이다. 그러므로 현재지원되고 있는 W3C의 CSS Validator를 통과할 수 없다. CSS3 opacity 속성에 대한 설명은 W3C에서 확인할 수 있다.

아.. code 퀵태그가 잘 안먹는다. 이거 먼가 대책이 필요한데… 코드 안에

가 나오면 어떡하냐?!! 결국 txt 파일 다운로드로 대처해야 하는가!

댓글 남기기

  1. 좋은 방법이네요. 감사합니다.
    하지만, 리스트의 원래의미를 구현한 태그는 ul, li(ol li)이잖아요. W3C에서는 메뉴 리스트도 ul, li 를 사용하는 게 올바르다고 하던데요. (저도 주워 들은 얘기예요 ㅜ.ㅜ)

  2. 맞아요 w3c 에서는 메뉴를 구현하기 위해서 ul li(ol li)를 이용하라고 나와 있습니다
    메뉴가 아닌 부분에 비슷한 효과를 줄때 유용하게 사용중입니다 🙂

  3. 워드프레스 지원센터에 문의해보니 제가 사용중인 textile1.0 플러그인의 문제라고 하네요. code 태그 안에서도 p 태그를 자동으로 생성하는 오류가 있더군요. textile2.0에선 이런 문제가 해결됐다고 하는데, 파일크기가 넘 커서 포기하렵니다