마진포함 / 클리핑

▼이미지 외곽 여백지우기
▷이미지는 고유의 여백(marign,padding이 아닌)이 있음
-이미지를 display:block; 시키면 여백이 지워짐
-block이 되면 text-align:center;가 되지 않음
-block 상태에서 가운데 정렬을 하고 싶다면 margin:0px auto;



▼부모한테 클리핑 마스크
▷부모 영역을 나가면 보이지 않음
- 부모에게 > overflow:hidden;
- X,Y축을 입력하면 하나의 축만 가릴 수 있음

▼마스크 mask
▷---{mask-image:linear-gradient( --deg, #---, transparent); -webkit-mask-image:linear-gradient(--deg, #---. transparent);}
-색상이 있어야함 (사진이 보이는 부분)
-일자 그라디언트 모양으로 마스크를 씌움

 ㄴex)
.img1{mask-image:linear-gradient(90deg, black, transparent);
-webkit-mask-image:linear-gradient(90deg,black, transparent);}


▷---{mask-image:radial-gradient(circle, #--- --%, rgba(0,0,0.5)
-원 모양으로 마스크를 씌움

 ㄴex)
.img3{mask-image:radial-gradient(circle, black 50%, transparent 50%);
-webkit-mask-image:radial-gradient(circle, black 50%, transparent 50%);}


▷---{mask-image:url(--/--/--.--); -webkit-mask-image:url(--/--/--.--);}
-이미지 모양대로 마스크를 씌움
-이미지 크기와 모양을 미리 만들어서 저장 후 불러오기

 ㄴex)
.img11:hover{mask-image:url(img/cup_mask.png);
-webkit-mask-image:url(img/cup_mask.png);}