태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

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

13년 전

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

이미지 클립하기 (예제)
다음 예제에서는 이미지에 clip 속성을 사용하여 마스크하는 방법을 다룹니다. 일단 <div> 요소의 position 속성을 relative로 설정하고, <img> 요소의 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으로 설정된 요소는 구조 요소 처럼 변환됩니다. 즉 <div>, <h1> 그리고 <p> 요소가 가진 특성을 가지는 것이죠. inline은 그 반대입니다. 구조 요소를 <em>, <span> 그리고 <strong> 요소와 같은 문자 요소의 특성을 가지게 됩니다.

.block em {
  display: block;
}

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

추천 목록

번호	제목
54	CSS Hack for IE6
53	!important와 언더바핵
52	target(href) 타겟사용법
51	location.href 와 location.replace()....
50	style.css.php css 내용이 많거나 파일이 나누어져있을때 코드압축
49	자바스크립트 타겟지정
48	링크 클릭시 점선테두리 한방에 없애는 법!
47	드롭다운 메뉴 26개 - Dropdown Navigation Menus
46	스타일 시트를 경량화하는 11가지 팁
	잘 사용되지 않지만 유용한 5가지 CSS2 속성들
44	CSS 속성
43	style css - 링크의 색, 밑줄, 점선밑줄, 점선박스, 배경, 두께, 크기 표현하기
42	마우스를 이미지 위에 올렸을때 이미지 흔들기
41	퀵메뉴 스크립트
40	흐르는 TOP 버튼
39	무조건 링크건 화일 다운받기
38	링크를 클릭하면 화면이 흔들리면서 해당페이지로 이동합니다.
37	CSS 슬라이딩 확장 좌측메뉴
36	HTML 문서에서 글자 세로로 쓰기
35	테이블 셀에 링크 걸기
34	링크에 마우스 커서 적용하기
33	CSS 만으로 구현된 메뉴
32	마우스 오버 아웃 해당 이미지 바꾸기 스크립트
31	자바스크립트 쓰지 않고 퀵메뉴 사용하기
30	마우스 오버를 하면 올라오는 레이어창입니다.
29	메타 태그 화면전환
28	웹 페이지 본문 글씨 전체 색상을 동적으로 변경하는 방법
27	새창열 때 HTTP_REFERER 값넘기는 방법
26	폼 요소의 탭(Tab) 순서를 정하는 방법
25	한 번의 링크 클릭으로 두 개의 페이지를 여는 방법 (프레임)