CSS clip-path 속성이 border-radius와 다른 핵심 차이점은?

Q: CSS clip-path 속성이 border-radius와 다른 핵심 차이점은?

clip-path는 원, 다각형, SVG 경로 등 자유로운 형태로 요소를 잘라낼 수 있다 clip-path: polygon(50% 0%, 0% 100%, 100% 100%)처럼 사용하면 삼각형으로, circle()이나 inset()으로 원이나 사각형으로 요소를 잘라냅니다. border-radius가 둥근 모서리만 만들 수 있는 것과 달리, 별, 화살표 등 복잡한 형태도 표현 가능하며 hover 시 transition도 적용됩니다.

보통 MDN Web Docs

보기 및 정답

A clip-path는 원, 다각형, SVG 경로 등 자유로운 형태로 요소를 잘라낼 수 있다

B 플렉스 아이템에 position: absolute를 적용해도 flex 레이아웃이 유지된다

C flex-direction: row-reverse를 적용하면 아이템이 세로로 역순 배치된다

D border-box 모델에서는 margin도 요소의 전체 크기에 포함되어 계산된다

해설

clip-path: polygon(50% 0%, 0% 100%, 100% 100%)처럼 사용하면 삼각형으로, circle()이나 inset()으로 원이나 사각형으로 요소를 잘라냅니다. border-radius가 둥근 모서리만 만들 수 있는 것과 달리, 별, 화살표 등 복잡한 형태도 표현 가능하며 hover 시 transition도 적용됩니다.

코딩, 제대로 배우고 싶다면?

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

정규반 살펴보기

로그인

추가 정보 입력

회원가입

비밀번호 찾기

CSS clip-path 속성이 border-radius와 다른 핵심 차이점은?

해설

코딩, 제대로 배우고 싶다면?

관련 문제

모두를 위한 진짜 쎈 바이브코딩