# clip-path
css clip-path
css clip-path 알아보기 CSS 속성 clip-path는 대상이 되는 엘리먼트에 사용하여 circle, ellipsis, polygon(다각형) 등의 원하는 영역만 가위로 자른 것처럼 보여줄 수 있습니다. 쉽게 얘기해 네모난 모양의 엘리먼트를 원이나 별 모양으로 보여줄 수도 있고 아니면 자동차 처럼 만드는 것 역시 가능합니다. >참고로 '잘라서 보여준다'라고 적은 이유가 있는데 pointer: cursor; 등의 값으로 해당 영역의 마우스 커서를 변경했을 때 실제로 잘라낸 부분은 커서 변경 등의 스타일이 적용되지 않기 때문입니다. 이점 참고 !! 보시는 것처럼 문법은 매우 간단하다. 지원하는 circle(), ellipsis(), polygon()를 정하고 내부에 값만 선언하면 됩니다. 원 만들기 circle 위 예제를 구현하여 각각 반지름 100px, 50px, 25px 크기의 원을 만들면 아래와 같이 나타나게 됩니다. 
[CSS] none vs hidden
display: none과 visibility: hidden 공통점 요소가 페이지에서 보이지 않는다. 스크린리더기에서 무시되므로, 메뉴를 접을 때와 같이 사용자에게 숨겨야 하는 경우가 아니라면 접근성 측면에서 적합하지 않다. 차이점 전자는 요소의 공간도 존재하지 않고, 후자는 요소가 공간을 정상적으로 차지한다. display:none;과 DOM none은 DOM에서 제거된 것처럼 보이나, 요소에 액세스할 수 있다. div를 생성하고 display:none; 속성을 준 후, DOM이 실시간으로 반영되는 getElementsBy~로 테스트해보니, 가져올 수 있었다! display: none; 사용 밑의 사진을 보면, 메뉴를 접을 때 display: none;을 사용하는 것을 볼 수 있다. 
clip-path
1. clip-path란 기본적으로 css로 만들수있는 도형은 사각형 : 기본 원형 : border-radius 속성 이다 하지만 clip-path 속성을 사용하면 더 다양한 모양을 만들수가 있다 >https://bennettfeely.com/clippy/ 여기 사이트가 도움이 많이 된다 2. 예제 내가 평소에 연습하는 코드이다 보다시피 기본으로 제공되는 모양은 삼각형이다 극단적인 예를 위해서 이상한 모양으로 만들어본다 사용법은 위의 사이트에 가서 원하는 모양으로 편집 한다음에 붙여넣기 하면된다 3