[ CSS3 ] clip-path, outline, calc, object-fit, mask, svg

# clip-path, outline, calc, object-fit, mask, svg

 

속성	설명	참고
clip-path	요소의 클리핑 범위를 지정	mdn
	Clip-Path Generator	참고
outline		mdn
calc	CSS 속성의 값으로 계산식을 지정	mdn
object-fit	<img>나 <video> 요소와 같은 대체 요소의 콘텐츠 크기를 조절	mdn
object-position	대체 요소의 객체가 덮지 않은 부분은 요소의 배경이 보이게 됩니다	mdn
mask	이미지를 마스킹하거나 클리핑하여 요소를 숨김	mdn
svg	벡터 기반 그래픽	mdn
@impoert	css 처리	mdn

 

 

1. clip-path

 

형식

clip: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none|initial|inherit

 

1) circle

clip-path: circle(% or px );

clip-path: circle( 크기 at 위치 )

clip-path: circle( 크기 at x y);

x, y : px, %, 키워드

clip-path: circle(50% at 10px 50px);

clip-path: circle(100px at top right);

left center right  / top center bottom

 

    <div class="box">
        clip-path: circle 
    </div>

.box {
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;           
    background: skyblue;
    clip-path: circle(50%);
 }

 

clip-path:circle

 

2) ellipse : 타원

ellipse(가로radius 세로radius at x y )

clip-path : ellipse(40px 50px at  50% 60% )

 

3) inset : 사각형

clip-path:inset()

clip-path : inset( 상 우 하 좌 ) 

 

4) polygon 

매개변수 : 숫자가 정해져 있지 않

clip-path : polygon( x1 y1, x2 y2, ... )

 

5) triangle()
triangle(좌측 상단 X Y, 우측 상단 X Y, 하단 X Y);
clip-path: triangle(10% 10%, 20% 20%, 30% 30%);

 

6) path
path()

 

2. outline

요소의 가장 바깥 부분을 둘러싸고 있는 아웃라인 부분의 스타일

border 속성과 마찬가지로 style, width, color 속성있음

속성	설명
outline	한줄 축약
outline-style	아웃라인(outline)를 다양한 모양으로 설정
outline-width	아웃라인의 너비를 설정
outline-color	아웃라인의 색상을 설정
outline-offset	테두리(border)와 아웃라인(outline) 사이의 여백을 설정

 

 

 

outline-style

속성	설명
dotted	아웃라인을 점선으로 설정
dashed	아웃라인을 약간 긴 점선으로 설정
solid	아웃라인을 실선으로 설정
double	아웃라인을 이중 실선으로 설정
groove	아웃라인을 3차원인 입체적인 선으로 설정
ridge	아웃라인을 3차원인 능선효과가 있는 선으로 설정
inset	3차원인 내지로 끼운 선으로 설정
outset	3차원인 외지로 끼운 선으로 설정
none	아웃라인을 없앰
hidden	아웃라인이 존재하기는 하지만 표현되지는 않음

 

 

3. calc

+는 덧셈, -는 뺄셈, *는 곱셈, /는 나눗셈
덧셈과 뺄셈의 좌우에는 공백이 있어야 함

{ width: calc( 100% - 20px ); }
{ width: calc( 70% - 20px ); }
{ width: calc( ( 50% * 2 ) - 70px / 2 ); }
{ font-size: calc( 4rem / 2 + 5px ); }
{ width: calc( ( 50% * 2 ) - 80px / 2 ); }

 

 

 

4. object-fit

CSS object-fit 속성은 <img>나 <video> 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정합니다.

 

속성	설명
contain	대체 콘텐츠의 가로세로비를 유지하면서 크기를 맞춤 조절합니다.
cover	대체 콘텐츠의 가로세로비를 유지하면서, 요소 콘텐츠 박스를 가득 채웁니다
fill	요소 콘텐츠 박스 크기에 맞춰 대체 콘텐츠의 크기를 조절
none	대체 콘텐츠의 크기를 조절하지 않음
scale-down	none과 contain 중 대체 콘텐츠의 크기가 더 작아지는 값을 선택

 

 

5. object-position

CSS object-position 속성은 대체 요소의 콘텐츠 정렬 방식을 지정합니다. 대체 요소의 객체가 덮지 않은 부분은 요소의 배경이 보이게 됩니다.

대체 요소 객체의 고유 크기(수정을 가하지 않은 원래 크기)를 조정해 요소 박스에 맞추는 방법은 object-fit 속성으로 지정할 수 있습니다.

x축 : left , center, right 

y축 : top, center, bottom

object-position: center top;
object-position: 100px 50px;

 

 

 

6. mask-image

/* Keyword value */
mask-image: none;

/* <mask-source> value */
mask-image: url(masks.svg#mask1);

/* <image> values */
mask-image: linear-gradient(rgb(0 0 0 / 100%), transparent);
mask-image: image(url(mask.png), skyblue);

/* Multiple values */
mask-image: image(url(mask.png), skyblue), linear-gradient(rgb(0 0 0 / 100%), transparent);

 

mask-clip
mask-composite
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size

 

https://icon-icons.com/

Free Icons PNG, ICO, ICNS and SVG

 

 

 

7. svg 

<svg width="너비" height="높이">

    <rect width="너비" height="높이" 
    stroke="색상" stroke-width="두께" fill="색상" >  

</svg>

 

rect 

width 도형의 너비를 설정
height 도형의 높이를 설정
stroke 도형의 테두리 색상을 설정
stroke-width 도형의 테두리 굵기를 설정
fill 도형을 채울 색상을 설정
opacity 도형의 투명도를 설정

 

path

stroke : 선색

stroke-width : 선 굵기 속성
stroke-linecap : 선의 양쪽 끝 모양 속성 , butt , round, square
stroke-dasharray : 점선처리 속성

stroke-dashoffset : 시작위치 ( dasharray값과 동일)