태그 자료실 1344

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

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

16년 전

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;
}

추천 목록

번호	제목
2,891	입력 필드에서 특정단어(예:#err)가 포함되었을 때 실시간 감지 및 경고창 띄우기
2,890	데이터베이스 최적화와 쿼리 효율성을 높이 검색 성능을 개선하는 방법
2,889	간단한 게시판 만들기
2,888	PHP의 php.ini 파일에서 설정할 수 있는 주요 항목들을 카테고리별로 정리
2,887	유튜브 동영상의 썸네일 이미지를 체크하여 유효한 영상이아닐때 연결된 체크박스를 자동으로 체크
2,886	이미지 URL이 유효하지 않을 때, 해당 이미지와 연결된 체크박스를 자동으로 체크
2,885	HTTPS로 접속한 사용자를 강제로 HTTP로 리디렉션 하려면
2,884	PHP에서 MP3 파일을 직접 읽고 스트리밍 하기
2,883	현재 페이지가 location.reload()에 의해 새로고침되었는지
2,882	텍스트 파일을 읽고, 각 줄의 끝에서 6글자를 삭제한 후, 결과를 새로운 파일에 저장합니다.
2,881	cURL을 사용하여 리다이렉트를 따라가 최종 URL 가져오기
2,880	[PHP] $_SERVER 환경변수
2,879	10진수 <-> 16진수 변환기 PHP소스
2,878	텍스트에 직접 그라데이션 색상을 적용하려면?
2,877	CSS를 사용하여 요소의 내용물에 따라 width를 조정하는 방법
2,876	웹서버 ip 확인
2,875	웹호스팅의 절대경로를 확인
2,874	input 입력 필드 앞뒤 공백 실시간 제거
2,873	Placeholder 포커스시 감추기
2,872	MySQL 중복된 데이터를 삭제
2,871	MySQL 중복 데이터 확인
2,870	sessionStorage.getItem 와 sessionStorage.setItem
2,869	제이쿼리 랜덤으로 배경색 변경
2,868	preg match에 관한 정규식
2,867	Stream an audio file with MediaPlayer 오디오 파일 스트리밍 하기
2,866	Audio Streaming PHP Code
2,865	PHP $ SERVER 환경 변수 정리
2,864	Vimeo (비메오) API 를 사용하여 플레이어 컨트롤하기
2,863	iframe 사용시 하단에 발생하는 공백 제거방법
2,862	아이프레임(iframe) 전체화면 가능하게 하기