Rev. 2.73

Web Designer Wall을 운영하는 Nick La씨는 평소 즐겨 사용되지 않지만 유용한 5가지 CSS 속성들의 사용방법을 소개합니다. 이 5가지 속성은 clip, min-height, white-space, cursor 그리고 display 입니다. 모두 CSS2에 명시되어 있는 속성들로 이미 모든 브라우저들이 이를 지원하고 있으며, 어떻게 응용하느냐에 따라서는 그 목적이 확연히 달라질 수 있음을 설명하고 있습니다.

1. CSS Clip

"clip"속성은 마치 마스크(mask)와 같습니다. 특정한 영역에 직사각형 모양의 컨텐츠를 삽입할 수 있습니다. clip 속성은 반드시 position속성을 absolute로 지정해야합니다. 그리고 top, right, bottom, left 값을 지정합니다.

이미지 클립하기 (예제)

다음 예제에서는 이미지에 clip 속성을 사용하여 마스크하는 방법을 다룹니다. 일단 <div> 요소의 position 속성을 relative로 설정하고, <img> 요소의 positionabsolute로 지정합니다.

.clip {
  position: relative;
  height: 130px;
  width: 200px;
  border: solid 1px #ccc;
}
.clip img {
  position: absolute;
  clip: rect(30px 165px 100px 30px);
}

이미지 리사이즈와 클립 (예제)

이 예제에서는 썸네일 갤러리에 사용하기 위해 이미지의 크기를 변경하고 불필요한 영역을 잘라내 보겠습니다. 원본 200 x 140픽셀인 직사각형 이미지의 크기를 50%로 줄이고 정사각형 모양으로 잘라낸 후 잘려나간 만큼 left값을 -15px로 지정하여 마치 클리핑 된 것처럼 했습니다.

.gallery li {
  float: left;
  margin: 0 10px 0 0;
  position: relative;
  width: 70px;
  height: 70px;
  border: solid 1px #000;
}

.gallery img {
  width: 100px;
  height: 70px;
  position: absolute;
  clip: rect(0 85px 70px 15px);
  left: -15px;
}

2. Min-height (예제)

min-height 속성으로 최소 높이를 지정할 수 있습니다. 레이아웃의 균형을 유지해야 할 때 유용하게 사용할 수 있습니다. 이 예제는 컨텐츠 영역이 항상 사이드바 보다 크게 유지되도록 조정 하는 것입니다.

.with_minheight {
  min-height: 550px;
}

IE6을 위한 Min-height 핵

IE6은 min-height 속성을 지원하지 않기 때문에 아래와 같이 핵을 사용해야 합니다.

.with_minheight {
  min-height:550px;
  height:auto !important;
  height:550px;
}

3. White-space (예제)

white-space 속성은 문자가 표시될 때 공백의 처리 방법을 정의합니다. 문자 요소에 이 속성의 값을 nowrap로 설정하면 어색하게 개행되는 문자열을 훌륭하게 처리할 수 있습니다.

em {
  white-space: nowrap;
}

4. Cursor (예제)

버튼의 동작이 변하는 경우에 마우스 커서의 모양도 변경되어야 합니다. 이 예제는 버튼의 활성화(clickable), 비활성화(default), 작동 중(wait)에 대한 상태를 감지하여 커서의 모양을 변경합니다. 이것은 웹 애플리케이션을 개발 할 때 유용합니다.

.disabled {
  cursor: default;
}

.busy {
  cursor: wait;
}

.clickable:hover {
  cursor: pointer;
}

5. Display inline / block (예제)

display 속성값들 중 block이 무엇을 의미하는지 잘 알고 있나요? block으로 설정된 요소는 구조 요소 처럼 변환됩니다. 즉 <div>, <h1> 그리고 <p> 요소가 가진 특성을 가지는 것이죠. inline은 그 반대입니다. 구조 요소를 <em>, <span> 그리고 <strong> 요소와 같은 문자 요소의 특성을 가지게 됩니다.

.block em {
  display: block;
}

.inline h4, .inline p {
  display: inline;
}

Comments

Got something to add? You can just leave a comment.

  • sunny sunny

    정말 유용한 정보네요~ 특히 1,2번은 정말 정말 많이 도움이 됐어요- 감사합니다 ^^

    reply edit

  • Dream.T Dream.T

    흠 안녕하세요. clip 에 대해 검색하다가 들어왔는데요.
    이상하게 dtd를 정의하게되면 clip가 먹통이되네요...?
    익스플로러에서 fixed 속성을 쓰기위해서 <!document 어쩌구~~> 를 페이지에 정의해놓는데
    그놈때문에 clip가 안먹히니.... 이거참 난감한데요 혹시 해결책을 아시는지요 ㅠ

    reply edit

  • 어떠한 doctype을 쓰시는지는 모르겠지만 이를 지원하는 doctype을 찾아 사용하시는 것이 좋을 듯합니다.

    reply edit

  • 허밍 허밍

    <em></em> 이란 건 어떤데 쓰는건가요? ^^;
    질문이 너무 광범위 한가요~ em은 폰트 단위말고도 저렇게 dd 안에 쓰이더라구요

    reply edit

Your Reaction Time!

captcha

avatar