잘 사용되지 않지만 유용한 5가지 CSS2 속성들

잘 사용되지 않지만 유용한 5가지 CSS2 속성들

위치: Firejune Blog 작성자: 파이어준

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 속성을 사용하여 마스크하는 방법을 다룹니다. 일단

요소의 position속성을 relative로 설정하고, 요소의 position을 absolute로 지정합니다.

.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으로 설정된 요소는 구조 요소 처럼 변환됩니다. 즉

,

그리고

요소가 가진 특성을 가지는 것이죠. inline은 그 반대입니다. 구조 요소를 , 그리고 요소와 같은 문자 요소의 특성을 가지게 됩니다.

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