CSS - clip 속성으로 원하는 영역만큼 자르기
Clip이라는 단어는 익숙했습니다. 포토샵에서 영역을 나눠 따로 저장하고자 할 때 클립이라는 기능을 써왔기 때문입니다. 근데 이런 클립이 CSS에서도 활용 가능하다는걸 알게 되었습니다. 실제로 친효스킨의 댓글 레이아웃 중에서도 이 클립 기능이 적용되어 있습니다. 어디에 적용되어 있냐고요?
친효스킨에서는 이런 식으로 응용함
바로 빨간색으로 표시된 저 부분입니다. 대화창의 끝 부분입니다. 말꼬리 부분은 폰트어썸을 사용했고 clip을 적용시켜서 꼬다리(?) 부분만 나오도록 표현했습니다.
크롬 개발자툴로 살펴보면 fa-affiliatethem 이라는 클래스명의 폰트어썸 아이콘이 사용되었고 clip 속성이 적용되어 있음을 알 수 있습니다.
폰트어썸 홈페이지에서 affiliatetheme 이라는 아이템을 검색해보면 이렇게 생긴 웹 아이콘이라는걸 알 수 있습니다. 저는 이것을 빨간색 라인을 기준으로 왼쪽을 잘라내어 버렸습니다. 그래서 꼬랑지 부분만 사용하고 있는 것입니다.
clip 속성
CSS clip에는 4개의 값이 사용됩니다. 각 값은 다음의 속성을 뜻합니다.
clip : rect ( top, right, bottom, left )
이렇게 설명하면 무슨 의미인지 잘 모르실테니 아래의 네 개 움짤을 살펴보시기 바랍니다.
먼저 가장 처음에 마크업하는 top 설정입니다. 보시면 값이 커질수록 위에서부터 오브젝트가 삭제됨을 알 수 있습니다. 지금 워터마크 때문에 폰트어썸 아이콘이 잘 안 보일 수 있는데 빨간색 아이콘의 변화가 보이시죠? 값이 커질수록 위에서부터 잘리는게 보이실 겁니다.
다음은 right 설정입니다. 이것도 원리는 같습니다. 값이 증가할수록 오른쪽으로부터 오브젝트가 잘려나갑니다.
그리고 bottom도 마찬가지죠. 아래에서부터 삭제되기 시작합니다.
left도 마찬가지고요. 이해되셨나요? clip은 음수가 사용되지 않습니다. 의미가 없거든요. 무조건 양수의 값이 적용되어야 효력이 발생합니다.
또 하나 중요한 포인트! clip 속성은 해당 요소의 position이 absolute 또는 fix일때 적용됩니다. 모든 요소의 포지션은 기본값이 relative 상태입니다. 이 상태에서는 clip 속성이 적용되지 않는 점 유의해주시기 바랍니다. 끝.
