5가지 간단하고 유용한 CSS 속성

이 문서에서는 5가지 유용한 CSS 속성을 소개합니다. 익숙해져야 하지만 거의 사용하지 않을 것입니다. 나는 새로운 CSS3 속성을 기대하는 것이 아니라 모든 브라우저에서 널리 지원되는 클립, 최소 높이, 공백, curosr 및 디스플레이와 같은 이전 CSS2 속성에 대해 이야기하고 있습니다. 따라서 이 기사를 놓치지 마십시오. 유용하게 사용할 수 있습니다.

1. CSS 클립

클립 속성은 마스크와 같습니다. 직사각형을 사용하여 페이지 요소의 내용을 마스킹할 수 있습니다. 요소를 자르려면 위치 속성을 절대값으로 지정한 다음 요소를 기준으로 위쪽, 오른쪽, 아래쪽, 왼쪽 값을 지정해야 합니다.

이미지 클리핑 예시( 데모 )

다음 예에서는 클립 속성을 사용하여 이미지를 마스크하는 방법을 보여줍니다. 먼저 <div> 요소를 position:relative로 지정한 다음 <img> 요소를 position:absolute로 지정하고 실제 필요에 따라 ret 값을 설정합니다.

.클립 {
위치: 상대;
높이: 130px;
너비: 200px;
테두리: 단색 1px #ccc;
}
.clip img {
위치: 절대;
클립: 직사각형(30px 165px 100px 30px);
}

 이미지 크기 조정 및 자르기( 데모 )

이 예에서는 사진의 크기를 조정하고 자르는 방법을 보여 드리겠습니다. 스톡 이미지는 직사각형이므로 크기의 50%로 줄여 정사각형 형식의 썸네일을 만들고 싶습니다. 그래서 너비와 높이 속성을 사용하여 이미지 크기를 조정하고 클립 속성을 사용하여 마스크를 적용했습니다. 그런 다음 left 속성을 사용하여 이미지를 왼쪽으로 15px 이동합니다.

.

갤러리 리 {
플로트: 왼쪽;
여백: 0 10px 0 0;
위치: 상대;
너비: 70px;
높이: 70px;
테두리: 실선 1px #000;
}
.갤러리 img {
너비: 100px;
높이: 70px;
위치: 절대;
클립: 직사각형(0 85px 70px 15px);
왼쪽: -15px;
}