앞에서 말했듯이 CSS 3는 모듈화 되어 있다. 여기서는 그 모듈 중 하나인 Background와 Border 모듈에 대해서 살펴보자.이름에서 알 수 있듯이 Background와 Border를 설정할 수 있는 모듈이다. 기존 CSS의 background 속성이나 border 속성을 기반으로 하고 있으며 몇몇 추가적인 속성을 지니고 있다. 기존 속성에 대해서는 이미 어느 정도 안다고 가정하고 새로운 속성에 대해서 알아보자. (모른다고 해도 아래의 링크를 따라가보면 이름만 봐도 대충 머하는 넘인지를 알 수 있을 듯...)
우선 background에 추가된 속성은 'background-clip', 'background-break', 'background-origin' 속성이다.
'background-clip'과 'background-origin'은 background 이미지가 보더 영역이나 패딩 영역 까지 칠해질지와 시작지점을 결정하는 것이다. 웹 디자인을 하다보면 배경이미지가 패딩 또는 보더 영역에 원하는대로 칠해지지 않아서 패딩을 0으로 하고... 안에 블럭을 또 만들어서 패딩을 주고 하는 등의 작업을 해본 경험이 있을 것이다. 바로 이 속성으로 인해 이제는 더이상 그런 작업을 할 필요가 없어졌다. 'background-break'은 출력을 할때 배경 이미지를 다루는 방법으로 페이지가 넘어 갔을때 앞 페이지에서 이어서 표시할지 아니면 매 페이지마다 다시 표시할지를 표시한다. (사실 이러한 속성에 대해서는 관심이 많은데 그것은 내가 CSS가 완전하지 않은 시절, 프린팅을 위한 마크업 언어를 이용한 HTML 출력 프로그램인 MLReport 개발에 참여했기 때문이다. 이것은 아직 판매되고 있는데 CSS 3까지 완벽히 나온다면 쩝... 하지만 IE가 그럴것 같아 보이지 않기 때문에 아직도 상당히 유용하다. 게다가 여전히 CSS에서 지원하지 못하는 기능들도 제공한다.) 또한 이밖에도 background-attachment 속성에 local 값이 새로 생겼는데 이는 overflow를 이용해서 element의 block이 스크롤 가능할때 이 스크롤에 따라 배경 이미지도 같이 스크롤 되도록 하는 것이다.
border에 추가된 속성은 'border-image', 'border-radius', 'border-break'이다. 특히 'border-image', 'border-radius'는 매우 유용한데 웹 디자인을 하다보면 보더를 둥글게 하달라던지 이미지를 이용해서 해달라던지 하는 요구를 많이 들었을 것이다. 기존에는 이를 할 방법이 없기 때문에 Table을 이용해서 이미지를 배열하는 것이 유일한 방법이었고 이는 테이블을 Layout을 위해 사용하는 대표적인 이유였다. (물론 박스 전체크기로 만들어서 배열할 수도 있지만 박스 크기에 맞추어 이미지를 제작해야 하므로 해결책이라고 하기는 어렵다.) 그런데 바로 이 두 속성이 border를 이미지로 설정하고 보더를 둥글게 하는 기능을 제공한다. 그리고 'border-break'의 경우에는 프린트 할때 페이지가 넘어가는 경우 잘린 부분의 보더가 표시되지 않아 지저분하게 표시되는 것을 방지한다. (역시 내가 만든 제품과 비슷한 기능이다. 쩝...)
그리고 마지막으로 'box-shadow'라는 기능이 생겼는데 이는 파워포인트의 그림자 효과 같은 효과를 줄 수 있는 속성이다. 이 역시 기존에는 수행하기 위해서 박스 크기에 맞추어 이미지를 만드는 방법 밖에 없었는데 이러한 속성이 생기면서 그럴 필요가 없어졌다.
PS: 참고로 MLReport는 ActiveX로 만들어져 있다. (따라서 IE에서만 동작한다.) Netscape 플러그인으로도 만든 적이 있긴 한데... 별로 요구하는 데가 없어서 지지부진하다. 나름대로 유용하면서도 재밌는 기능을 보여준다. 요새 다시 만든다면 CSS 3에 있는 것을 최대한 수용하고 그래도 안되는 것들은 별도의 namespace의 태그 등으로 해결하고 싶긴하지만... 요새는 개발에서 손을 뗀지라...
CSS3 Backgrounds and Borders Module: http://www.w3.org/TR/2005/WD-css3-background-20050216
MLReport: http://www.infraware.co.kr/ml_kr/index.asp
우선 background에 추가된 속성은 'background-clip', 'background-break', 'background-origin' 속성이다.
'background-clip'과 'background-origin'은 background 이미지가 보더 영역이나 패딩 영역 까지 칠해질지와 시작지점을 결정하는 것이다. 웹 디자인을 하다보면 배경이미지가 패딩 또는 보더 영역에 원하는대로 칠해지지 않아서 패딩을 0으로 하고... 안에 블럭을 또 만들어서 패딩을 주고 하는 등의 작업을 해본 경험이 있을 것이다. 바로 이 속성으로 인해 이제는 더이상 그런 작업을 할 필요가 없어졌다. 'background-break'은 출력을 할때 배경 이미지를 다루는 방법으로 페이지가 넘어 갔을때 앞 페이지에서 이어서 표시할지 아니면 매 페이지마다 다시 표시할지를 표시한다. (사실 이러한 속성에 대해서는 관심이 많은데 그것은 내가 CSS가 완전하지 않은 시절, 프린팅을 위한 마크업 언어를 이용한 HTML 출력 프로그램인 MLReport 개발에 참여했기 때문이다. 이것은 아직 판매되고 있는데 CSS 3까지 완벽히 나온다면 쩝... 하지만 IE가 그럴것 같아 보이지 않기 때문에 아직도 상당히 유용하다. 게다가 여전히 CSS에서 지원하지 못하는 기능들도 제공한다.) 또한 이밖에도 background-attachment 속성에 local 값이 새로 생겼는데 이는 overflow를 이용해서 element의 block이 스크롤 가능할때 이 스크롤에 따라 배경 이미지도 같이 스크롤 되도록 하는 것이다.
border에 추가된 속성은 'border-image', 'border-radius', 'border-break'이다. 특히 'border-image', 'border-radius'는 매우 유용한데 웹 디자인을 하다보면 보더를 둥글게 하달라던지 이미지를 이용해서 해달라던지 하는 요구를 많이 들었을 것이다. 기존에는 이를 할 방법이 없기 때문에 Table을 이용해서 이미지를 배열하는 것이 유일한 방법이었고 이는 테이블을 Layout을 위해 사용하는 대표적인 이유였다. (물론 박스 전체크기로 만들어서 배열할 수도 있지만 박스 크기에 맞추어 이미지를 제작해야 하므로 해결책이라고 하기는 어렵다.) 그런데 바로 이 두 속성이 border를 이미지로 설정하고 보더를 둥글게 하는 기능을 제공한다. 그리고 'border-break'의 경우에는 프린트 할때 페이지가 넘어가는 경우 잘린 부분의 보더가 표시되지 않아 지저분하게 표시되는 것을 방지한다. (역시 내가 만든 제품과 비슷한 기능이다. 쩝...)
그리고 마지막으로 'box-shadow'라는 기능이 생겼는데 이는 파워포인트의 그림자 효과 같은 효과를 줄 수 있는 속성이다. 이 역시 기존에는 수행하기 위해서 박스 크기에 맞추어 이미지를 만드는 방법 밖에 없었는데 이러한 속성이 생기면서 그럴 필요가 없어졌다.
PS: 참고로 MLReport는 ActiveX로 만들어져 있다. (따라서 IE에서만 동작한다.) Netscape 플러그인으로도 만든 적이 있긴 한데... 별로 요구하는 데가 없어서 지지부진하다. 나름대로 유용하면서도 재밌는 기능을 보여준다. 요새 다시 만든다면 CSS 3에 있는 것을 최대한 수용하고 그래도 안되는 것들은 별도의 namespace의 태그 등으로 해결하고 싶긴하지만... 요새는 개발에서 손을 뗀지라...
CSS3 Backgrounds and Borders Module: http://www.w3.org/TR/2005/WD-css3-background-20050216
MLReport: http://www.infraware.co.kr/ml_kr/index.asp
공유하기 버튼
|
|
최근 덧글