Grid Items
<div class="container">
<div class="item">1</div>
</div>.container {
width: 300px;
height: 300px;
border: 4px solid;
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
}
.container .item {
border: 2px solid;
background-color: orange;
font-size: 20px;
}
아이템의 위치를 변경하고 싶을 떄 사용할 수 있는 것이 위 그림의 그리드 컨테이너 주변에 있는 저 번호들, 즉 라인이다.
라인은 1부터 시작하는 양수 단위의 숫자와 -1부터 시작하는 음수 단위의 숫자를 동시에 가진다.
gird-row / grid-column
grid-row-start 속성은 아이템의 위치가 몇 번째 라인에서 시작하는지 명시하는 속성이다.
.container .item:nth-child(1) {
grid-row-start: 2;
}
grid-row-end 속성은 아이템의 위치가 몇 번째 라인에서 끝나는지 명시하는 속성이다.
.container .item:nth-child(1) {
grid-row-start: 2;
grid-row-end: 4;
}
마찬가지로 grid-column-start와 grid-column-end 속성도 존재한다.
.container .item:nth-child(1) {
grid-row-start: 2;
grid-row-end: 4;
grid-column-start: 2;
grid-column-end: -4;
}
위 css 코드에서 1번 아이템이 컬럼 라인 2번에서 시작해서 -4로 끝나기 때문에 아이템이 위처럼 배치된다.
이런 식으로 라인의 양수와 음수 번호를 이용해서 아이템을 원하는 위치에 배치할 수 있다.
정확한 라인 번호를 입력하는 것이 아니라 현재 아이템이 있는 위치에서 몇 개의 라인을 더 확장할 것인지 결정할 수도 있다.
확장이라는 의미를 지닌 span이라는 키워드를 이용하면 되고 span의 기본값은 1이다.
span의 뒤에 붙은 숫자는 라인의 번호가 아니라 확장할 라인의 수이다.
따라서 아래 코드처럼 2가 붙으면 2개의 라인을 확장해서 늘린다는 의미이다.
.container .item:nth-child(1) {
grid-row-start: span 2;
grid-column-start: span 2;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>.container {
width: 300px;
height: 300px;
border: 4px solid;
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
}
.container .item {
border: 2px solid;
background-color: orange;
font-size: 20px;
}
.container .item:nth-child(1) {
grid-column-start: span 2;
}
.container .item:nth-child(2) {
grid-row-start: span 2;
}
.container .item:nth-child(3) {
grid-column-start: span 3;
}
명시적으로 3개의 행만을 만들었기 때문에 밀린 4번은 암시적인 행에 만들어진다.
이럴 떄 암시적인 행으로 내려가는 것이 아니라 빈공간을 차지하게 만들고 싶다면 grid-auto-flow: dense를 이용하면 된다.
.container .item:nth-child(1) {
/* grid-row-start: 1;
grid-row-end: 3; */
grid-row: 1 / 3;
/* grid-column-start: 1;
grid-column-end: 3; */
grid-column: 1 / 3;
}grid-row-start와 grid-row-end는 grid-row라는 단축 속성으로 사용 가능하고, grid-column-start와 grid-column-end는 grid-column라는 단축 속성으로 사용 가능하다.
justify-self / align-self
justify-items, align-items는 그리드 컨테이너에 들어있는 모든 아이템들을 한번에 제어해주는 속성이다.
justify-self, align-self는 셀 내부에 빈 공간이 있을 때 사용할 수 있는 속성으로 개별적인 아이템을 제어할 수 있는 속성이다.
.container {
width: 300px;
height: 300px;
border: 4px solid;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr);
justify-items: end;
align-items: end;
}
.container .item {
width: 100px;
height: 100px;
border: 2px solid;
background-color: orange;
font-size: 20px;
}
.container .item:nth-child(1) {
justify-self: center;
align-self: start;
}
.container .item:nth-child(2) {
width: auto;
height: auto;
justify-self: normal;
align-self: normal;
}
order
order은 그리드 아이템들의 순서를 바꿀 수 있는 속성이다.
order 속성의 값으로 준 숫자가 크면 클수록 정렬이 뒤로 밀린다.
.container {
width: 400px;
height: 250px;
border: 4px solid;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
}
.container .item {
border: 2px solid;
background-color: orange;
font-size: 20px;
}
.container .item:nth-child(1) {
order: 1;
}
.container .item:nth-child(3) {
order: -1;
}
쌓임 순서
.container {
width: 400px;
height: 250px;
border: 4px solid;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
}
.container .item {
border: 4px solid;
background-color: orange;
font-size: 40px;
}
.container .item:nth-child(1) {
background-color: tomato;
grid-column: 1 / span 2;
}
.container .item:nth-child(2) {
background-color: orange;
grid-row: 1 / span 2;
grid-column: 2;
}
.container .item:nth-child(3) {
background-color: yellowgreen;
grid-column: 2 / span 3;
}
2번은 grid-row라는 속성을 통해서 아이템을 배치했다.
1번과 3번은 grid-row속성이 없기 때문에 2번에 순서가 밀려 암시적인 행 부분에 아이템들이 만들어진다.
1번과 3번에도 명시적으로 grid-row 속성을 사용하면 아이템을 겹치게 만들 수 있다.
.container .item:nth-child(1) {
background-color: tomato;
grid-row: 1;
grid-column: 1 / span 2;
}
.container .item:nth-child(2) {
background-color: orange;
grid-row: 1 / span 2;
grid-column: 2;
}
.container .item:nth-child(3) {
background-color: yellowgreen;
grid-row: 2;
grid-column: 2 / span 3;
}
아이템을 겹치게 만들기 위해서는 grid-row와 grid-column 속성을 정확하게 적어줘야지만 쌓이는 순서를 무시하고
아이템이 제대로 배치될 수 있다.
위 그림에서 아이템 1번 위에 2번, 2번 위에 3번 아이템이 쌓여있다.
가장 나중에 만들어진 요소가 가장 위에 쌓이고 있는 것이다.
이러한 쌓임 순서를 인위적으로 바꾸기 위해 사용하는 속성이 z-index이다.
.container .item:nth-child(1) {
background-color: tomato;
grid-row: 1;
grid-column: 1 / span 2;
z-index: 1;
}
Grid Functions
그리드에서 사용할 수 있는 함수들
repeat
repeat(반복 횟수, 너비)
.container {
border: 4px solid;
display: grid;
grid-template-rows: repeat(2, 100px);
grid-template-columns: repeat(3, 100px 200px);
}
.container .item {
border: 2px solid;
background-color: orange;
font-size: 30px;
}
minmax
minmax(최소 너비, 최대 너비)
.container {
border: 4px solid;
display: grid;
grid-template-rows: repeat(2, 100px);
grid-template-columns: minmax(100px, 1fr) minmax(200px, 1fr);
}
.container .item {
border: 2px solid;
background-color: orange;
font-size: 30px;
}그리드 컨테이너의 가로 너비가 줄다가 명시된 최소 너비의 상황이 되면 1 : 1비율이 깨지게 된다.
첫 번째 열의 크기가 100px보다 작아지는 상황이 되면 그리드 아이템이 그리드 컨테이너 밖으로 넘친다.
최대 너비에 작성된 내용으로 너비가 만들어지고 최소 너비에 작성된 내용보다는 너비가 더이상 줄어들 수 없다.
minmax는 명시적 행과 열을 만드는 속성 뿐만이 아니라 암시적인 행과 열을 만드는 속성에서도 사용이 가능하다.
.container {
border: 4px solid;
display: grid;
grid-template-rows: repeat(2, 100px);
grid-template-columns: 100px 200px;
grid-auto-rows: 100px;
}
.container .item {
border: 2px solid;
background-color: orange;
font-size: 30px;
}
.container .item:nth-child(3) {
height: 200px;
grid-row: 3;
}
3번 아이템의 높이가 200px이지만 3번째 암시적 행 부분의 높이가 100px이므로 아이템이 넘쳐서 출력된 것을 볼 수 있다.
이러한 현상을 관리하기 위해 사용할 수 있는 것이 minmax 함수이다.
grid-auto-rows속성의 값을 minmax(100px, auto)로 바꿔주면 다음과 같다.
아래 코드를 추가하면 다음과 같다.
.container .item:nth-child(1) {
grid-row: 4;
}
2개의 명시적 행을 만들었고 2개의 암시적 행이 추가 되었다.
3번 아이템은 height가 200px이고 그만큼 세 번째 암시적 행의 높이가 늘어났다.
1번 아이템 같은 경우는 별도의 높이가 없다.
이럴 경우 1번 아이템의 높이는 기본값인 auto일 것이고, 그 auto는 암시적 행의 최소 너비인 100px 만큼의 높이를 가지게 된다.
다시 정리하자면 grid-auto-rows: minmax(100px, auto)의 뜻은 암시적으로 만들어지는 행과 열의 최소 너비는 100px이고, 두 번째 인수가 auto 이므로 그 안에 들어있는 아이템의 너비만큼 암시적인 행과 열이 추가로 늘어날 수 있다는 것이다.
fit-content
fit-content(제한 너비)
너비를 그리드 아이템이 가지고 있는 콘텐츠의 너비에 딱 맞춰주는 함수이다.
<div class="container">
<div class="item">Hello world!</div>
<div class="item">The brown fox jumps over the lazy dog</div>
<div class="item">3</div>
</div>.container {
border: 4px solid;
display: grid;
grid-template-rows: repeat(2, 100px);
grid-template-columns: 100px 100px;
}
.container .item {
border: 2px solid;
background-color: orange;
font-size: 30px;
}
텍스트가 영역 밖으로 넘치고 있는데 이럴 때 사용할 수 있는 것이 fit-content 함수이다.
grid-template-columns: fit-content(300px) fit-content(300px) 이 코드를 추가하면 다음과 같은 결과가 나온다.
fit-content(300px)의 의미는 아이템의 콘텐츠 너비에 맞추되 최대 300px까지만 맞추겠다는 의미이다.
따라서 콘텐츠의 너비가 아무리 길더라도 최대 300px에서 딱 제한하는 것이다.
[주의]
repeat, minmax, fit-content는 그리드 컨테이너에서 사용하는 함수이다.
그리드 컨테이너 부분의 명시적인 행과 열의 너비를 지정하는 grid-template-rows, grid-template-columns, 암시적인 행과 열의 너비를 지정하는 grid-auto-rows, grid-auto-rows와 함께 사용한다.
Units
그리드에서 사용할 수 있는 여러 단위
fr(fraction)
fr은 사용 가능한 공간 너비 비율이다.
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>.container {
border: 4px solid;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 100px 100px 0 0;
}
.container .item {
border: 2px solid;
background-color: orange;
}명시적인 열이 총 4개이긴 하지만 세 번째, 네 번째 열의 너비는 0이므로 존재하지 않는다.
열의 우측에는 빈 공간이 존재하는데 container는 가로 너비가 별도로 지정되어 있지 않아 기본값인 auto 값을 가진다.
가로 너비 auto는 최대한 늘어나려고 시도한다.
fr의 공간 너비 비율에서의 공간은 사용가능한 너비를 의미한다.
즉 흰색 영역, 사용 가능한 나머지 공간에 대해 fr이라는 fraction 단위로 너비 비율을 지정해줄 수 있다는 것이다.
grid-template-columns속성의 값을 100px 100px 1fr 2fr로 준다면 1번 열의 100px과 2번 열의 100px을 더한 200px을 제외한 나머지 영역을 1 : 2 비율로 3번과 4번 열이 차지한다.
min-content / max-content
<div class="container">
<div class="item">Hello Grid!</div>
<div class="item">The Brown Fox.</div>
<div class="item">그리드 단위?</div>
<div class="item">TheLazyDog</div>
</div>.container {
border: 4px solid;
display: grid;
grid-template-rows: 100px;
grid-template-columns: repeat(4, 120px);
}
.container .item {
border: 2px solid;
background-color: orange;
font-size: 25px;
}
위 그림을 보면 Hello 옆에 Grid!가 올 공간이 없어서 줄 바꿈이 되었다.
그리드 단위? 같은 경우는 단어 단위로 줄바꿈이 되지 않고 글자 단위로 줄바꿈이 되었다. (영어와 한글 차이)
TheLazyDog 같은 경우는 띄어쓰기가 없으므로 브라우저가 단어를 판단하지 못해 해당 문자열을 하나의 단어로 인식하고 한 줄에 다 표현하려고 시도하였다.
이 상태에서 그리드의 단위가 min-content를 적용해보면 다음과 같다.
grid-template-columns: repeat(4, min-content)
min-content에서의 min은 최소 너비를 의미하고 이 기준은 콘텐츠의 너비이다.
최대 너비를 사용할 수 있는 max-content도 사용할 수 있다.
grid-template-columns: repeat(4, max-content)
그리드 아이템이 가지고 있는 콘텐츠의 최대 너비를 활용해서 열의 너비를 만들어내고 있다.
브라우저에서는 기본으로 한글은 단어 단위가 아닌 글자 단위로 줄바꿈 처리가 되게 설정이 되어 있다.
이 부분을 보완하도록 사용할 수 있는 속성이 word-break 속성이다.
word-break는 텍스트가 자신의 콘텐츠 박스 밖으로 오버 플로우 될 때 줄바꿈을 할지 지정한다.
word-break - CSS: Cascading Style Sheets | MDN
CSS word-break 속성은 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정합니다.
developer.mozilla.org
.container {
border: 4px solid;
display: grid;
grid-template-rows: 100px;
grid-template-columns: repeat(4, min-content);
}
.container .item {
border: 2px solid;
background-color: orange;
font-size: 25px;
word-break: keep-all;
}
auto-fill / auto-fit
auto-fill과 auto-fit은 그리드 컨테이너의 크기에 맞게 행과 열의 개수를 자동으로 조정해줄 수 있는 단위이다.
repeat 함수와 함께 사용할 수 있다.
.container {
border: 4px solid;
display: grid;
grid-template-columns: repeat(4, minmax(100px, 1fr));
grid-auto-rows: 100px;
}
.container .item {
border: 2px solid;
background-color: orange;
font-size: 30px;
}
화면의 크기를 줄이다 보면 열의 너비가 100px보다 작아질 수 없는 상태가 되었을 때 4번 아이템이이 그리드 컨테이너 밖으로 넘치는 것을 볼 수 있다.
이는 minmax를 통해 최소 너비를 100으로 지정했기 때문이다.
이럴 때 그리드 컨테이너의 크기에 맞게 행과 열의 개수를 자동으로 조정할 수 있는 단위가 바로 auto-fill과 auto-fit이다.
auto-fill과 auto-filt의 차이점은 그리드 컨테이너 안에 들어있는 그리드 아이템들이 하나의 행, 하나의 열에만 정렬이 되어있을 때 발생한다.
auto-fit은 지정할 수 있는 최대 너비를 우선해서 적용하고, auto-fill은 지정할 수 있는 최소 너비를 우선해서 적용한다.
Transform
transform이라는 속성을 통해서 요소에 변환 효과를 줄 수 있다.
그때 사용하는 여러가지 변환 함수들이 있는데 변환 함수들은 기본적으로 요소의 정가운데를 기준으로 변화가 시작된다.
tranform-origin
transform-origin은 변환 함수의 기준점을 바꿀 수 있는 속성이다.
기본값은 50% 50%로 x축의 50%, y축의 50%로 요소의 정가운데를 의미한다.
perspective
transform 속성을 통해서 2차원, 3차원 변환을 사용을 할 수 있는데 만일 3차원 변환을 사용하게 되면 요소가 입체적으로 보일 수 있도록 원근 거리라는 것을 만들 수 있는데 이때 사용하는 것이 perspective이다.
원근 효과는 2차원 변환 함수인 rotate가 아닌 rotateY같은 3차원 변환 함수에서만 효과를 발휘한다.
perspective(300px)은 원근의 거리가 300px이라는 것을 의미한다.
이 값이 클수록 멀리서 보는 것이고, 작을수록 가까이서 보는 개념이다.
perspective는 transform 속성에 사용하는 함수가 있고, 요소에 직접 사용하는 속성으로 나뉜다.
perspective 함수는 변화가 일어나는 요소 자체에 사용하고, 속성은 변환 효과가 일어나는 요소의 상위 요소에 지정한다.
perspective의 기준점은 요소의 정가운데이다.
지켜보는 기준점을 바뀌는 속성이 perspective-origin이라는 속성이고 기본값은 50% 50%이다.
transform-style
<div class="container">
<div class="item">
<div class="box"></div>
</div>
</div>.container {
width: 150px;
height: 150px;
border: 4px solid;
margin: 100px;
perspective: 300px;
}
.container .item {
width: 150px;
height: 150px;
background-color: orange;
transform: rotateY(45deg);
}
.container .item .box {
width: 100px;
height: 100px;
background-color: royalblue;
transform: rotateX(45deg);
}css는 3차원의 변환 효과가 적용된 요소의 자식 요소에서 또 다른 3차원 변환 효과를 주는 것이 허용되지 않는다.
이것을 해결하기 위해 사용할 수 있는 속성이 tranform-style이고 기본값은 flat이다.
이 속성의 값으로 preserve-3d를 주면 자식 요소에도 또 다른 3차원 변환 효과를 줄 수 있다.
위 코드의 .container .item 안에 transform-style: preserve-3d를 주면 다음과 같이 rotateX가 적용이 된다.
단, 주의할 점은 transform-style: preserve-3d은 자식 요소에만 영향을 미치고 후손에는 영향을 미치지 않는다.
따라서 필요한 경우에는 위 속성과 값을 계속해서 작성해줘야 한다.
.container {
width: 150px;
height: 150px;
border: 4px solid;
margin: 100px;
perspective: 300px;
transform: perspective(300px) rotateX(45deg);
transform-style: preserve-3d;
}
.container .item {
width: 150px;
height: 150px;
background-color: orange;
transform: rotateY(45deg);
transform-style: preserve-3d;
}
.container .item .box {
width: 100px;
height: 100px;
background-color: royalblue;
transform: rotateX(45deg);
}
backface-visibility
요소를 3차원 변환을 통해 180도 뒤집었을 때 요소의 뒷면이 화면에 보이게 되는데 이런 뒷면을 backface라고 한다.
뒷면을 보이게 만들 것인지에 관해서 정할 수 있는 속성이 바로 backface-visibility이다.
기본값은 visible이고, 보이지 않게 하고 싶으면 hidden으로 설정한다.
<div class="container">
<div class="item front">ABC</div>
<div class="item back">XYZ</div>
</div>.container {
width: 150px;
height: 200px;
border: 4px solid;
perspective: 300px;
}
.container .item {
width: 150px;
height: 200px;
font-size: 60px;
transition-duration: 1s;
backface-visibility: hidden;
}
.container .item.front {
background-color: orange;
position: absolute;
}
.container .item.back {
background-color: royalblue;
transform: rotateY(-180deg);
}
.container:hover .item.front {
transform: rotateY(180deg);
}
.container:hover .item.back {
transform: rotateY(0);
}이 속성을 잘 활용한다면 아래와 같이 카드를 뒤집는 효과를 줄 수도 있다.
Columns
column 속성을 통해 다단(Multi-Columns)을 나타낼 수 있다.
column-count은 단의 개수를 의미하고 기본값은 auto이다.
auto는 숫자 1과 동일하다.
.container {
border: 4px solid;
column-count: 2;
}
column-width 속성을 통해서 단의 최적 너비를 설정할 수 있으며, 기본값은 auto이다.
column-width를 100px을 지정한다고 해서 하나의 단의 너비가 100px이 되는 것은 아니다.
단지 100px을 지정했을 때 요소의 너비가 가변하면서 100px이라는 최적 너비보다 더 줄어드는 경우 단의 개수가 자동으로 조정되는 것이다.
column-width와 column-count의 단축 속성은 columns이다.
columns: 100px 2 width count 순서대로 쓴다.
column-rule 속성은 단과 단 사이에 선을 그린다.
선의 색상을 따로 입력하지 않으면 글자의 색상을 상속받게 된다. (border와 동일)
column-rule은 단축 속성으로 개별 속성은 column-rule-width, column-rule-style, column-rule-color이다.
column-gap 속성은 단과 단 사이의 거리를 의미하며 기본값은 noraml이다.
단 사이의 구분선은 거리와는 상관이 없다.
앞에 column 키워드를 사용하지 않고 gap으로만 사용할 수도 있다.
gap 속성은 flex, grid, column까지 아우르도록 통합이 되고 있다.
.container {
border: 4px solid;
/* columns: 300px 3; */
column-count: 3;
column-width: auto;
/* column-rule: 4px dotted blue; */
column-rule-width: 4px;
column-rule-style: dashed;
column-rule-color: red;
column-gap: 60px;
}
Filter
filter 속성은 여러가지 필터 함수를 사용하여 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용한다.
* linear-gradient는 background-color가 아니라 background-image에서 사용할 수 있는 속성이다.
blur
blur 함수를 통해 요소의 내용을 블러(흐림) 처리 할 수 있다.
<div class="container">
<div class="item"></div>
<img src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" alt="">
</div>.container {
filter: blur(10px);
}
.container .item {
width: 120px;
height: 120px;
background-image: linear-gradient(orange, royalblue);
}
.container img {
width: 220px;
}
grayscale
grayscale 함수는 요소를 무채색으로 만든다.
기본값은 100%로 값을 생략하면 자동으로 100%가 된다.
값이 작을수록 무채색이 덜 적용된다.
.container {
filter: grayscale();
}
filter 속성은 필터 함수를 여러개 적을 수 있다.
.container {
filter: grayscale() blur(10px);
}
invert
색상을 반전하는 함수이다.
기본값은 100%이고 값을 적지 않으면 100%가 적용이 된다.
.container {
filter: invert();
}
drop-shadow
그림자를 생성하는 함수이다.
차례대로 그림자의 x축 거리, y축 거리, 흐림 정도, 색상을 의미한다.
.container {
filter: drop-shadow(10px 20px 10px red);
}
색상을 생략하면 검정색이고 글자 속성에 영향을 받는다.
흐림을 생략하면 흐려지지 않는다.
box-shadow와 달리 그림자의 크기를 설정할 수 없다.
만일 컨테이너에 배경색이 있다면 컨테이너의 배경에 맞게 그림자가 생긴다.
drop-shadow는 요소에 배경 색상, 배경 이미지가 없는 경우 내부에 있는 아이템의 경계에 맞게 그림자가 생긴다.
brightness
이미지의 명도를 지정하는 함수이다.
기본값은 1이고 숫자가 작으면 어두워지고, 커지면 밝아진다.
.container {
filter: brightness(2);
}
contrast
색상의 대비를 조정하는 함수이다.
값이 작아지면 대비가 줄어들고 커지면 색의 대비가 커진다.
.container {
filter: contrast(50%);
}
opacity
요소의 투명 정도를 조절하는 함수로 기본값은 100%이다.
0과 1사이의 소수점 단위를 적는 것이 아니라 0과 100% 사이의 퍼센트 단위이다.
.container {
filter: opacity(20%);
}
saturate
색의 채도를 조정하는 함수이다.
.container {
filter: saturate(20%);
}
sepia
세피아 효과를 주는 함수로 기본값은 100%이다.
값을 0으로 주면 세피아 효과가 발생하지 않는다.
.container {
filter: sepia(100%);
}
hue-rotate
hue는 색상을 의미하며 값을 0도부터 360도까지 각도로 입력한다.
.container {
filter: hue-rotate(40deg);
}
filter 속성은 필터를 적용하고자 하는 요소 자체에 효과를 적용한다.
backdrop-filter는 요소의 배경에 보여지는 영역에 효과를 적용한다
<div class="container">
<div class="item"></div>
<img src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" alt="">
</div>
<div class="cover"></div>.container {
filter: hue-rotate(180deg);
}
.container .item {
width: 120px;
height: 120px;
background-image: linear-gradient(orange, royalblue);
}
.container img {
width: 220px;
}
.cover {
width: 150px;
height: 200px;
border: 4px solid;
position: fixed;
top: 30px;
left: 30px;
backdrop-filter: blur(10px) grayscale()
}
출처: 프로그래머스 프론트엔드 데브코스
[Day 30] CSS 심화 (2)
'데브코스' 카테고리의 다른 글
| [Day 32] SCSS (2) (0) | 2022.11.30 |
|---|---|
| [Day 31] 변수, @supports, @media, SCSS (1) (0) | 2022.11.28 |
| [Day 29] float, position, flex, grid (0) | 2022.11.24 |
| [Day 28] TodoList Drag&Drop (0) | 2022.11.23 |
| [Day 27] 고양이 사진 검색기 만들기 (0) | 2022.11.22 |