좋아, 그래서 우리가 마지막으로 체크인했을 때, 우리는 CSS 그리드를 사용하고 CSS와 결합했습니다. clip-path 와 mask 멋진 모양으로 격자를 만드는 기술.
다음은 우리가 함께 만든 환상적인 그리드 중 하나입니다.
두 번째 라운드를 위한 준비가 되셨습니까? 우리는 여전히 CSS 그리드로 작업하고 있습니다. clip-path및 mask, 그러나 이 기사의 끝에서 우리는 사진을 볼 때 실제와 상호 작용하는 경험을 제공하는 일부 방사선 호버 효과를 포함하여 그리드에 이미지를 정렬하는 다양한 방법으로 끝낼 것입니다.
그리고 무엇을 추측? 우리는 사용하고 있습니다 지난번에 사용한 것과 동일한 마크업. 다시 한 번 다음과 같습니다.
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>이전 기사와 마찬가지로 내부에 이미지가 있는 컨테이너만 있으면 됩니다. 더 이상 아무것도!
중첩된 이미지 그리드
지난번에 우리의 그리드는 전형적인 이미지 그리드였습니다. 우리가 마스킹한 깔끔한 모양을 제외하고는 내부에 이미지를 배치하는 방법에 관한 한 꽤 표준적인 대칭 격자였습니다.
그리드 중앙에 이미지를 중첩해 보겠습니다.
먼저 2개의 이미지에 대해 2✕XNUMX 그리드를 설정합니다.
.gallery {
--s: 200px; /* controls the image size */
--g: 10px; /* controls the gap between images */
display: grid;
gap: var(--g);
grid-template-columns: repeat(2, auto);
}
.gallery > img {
width: var(--s);
aspect-ratio: 1;
object-fit: cover;
}아직 복잡한 것은 없습니다. 다음 단계는 이미지의 모서리를 잘라 중첩된 이미지를 위한 공간을 만드는 것입니다. 나는 이미 자세한 기사를 가지고있다. 사용하여 모서리를 자르는 방법 clip-path 와 mask. 당신은 또한 내 온라인 생성기 마스킹 모서리에 대한 CSS를 가져옵니다.
여기서 필요한 것은 모서리를 다음과 같은 각도로 자르는 것입니다. 90deg. 우리는 같은 것을 사용할 수 있습니다 원추형 그래디언트 기법 그 기사에서 그렇게하기 위해 :
.gallery > img {
mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}
.gallery > img:nth-child(1) { --_a: 90deg; }
.gallery > img:nth-child(2) { --_a: 180deg; }
.gallery > img:nth-child(3) { --_a: 0deg; }
.gallery > img:nth-child(4) { --_a:-90deg; }우리는 사용할 수 있습니다 clip-path 동일한 기사에서 모서리를 자르는 방법이지만 모든 이미지에 대해 동일한 구성을 가지고 있기 때문에 그라디언트를 사용한 마스킹이 더 적합합니다. 필요한 것은 회전(변수로 정의 --_a) 효과를 얻으므로 외부 가장자리 대신 내부에서 마스킹합니다.
이제 마스크된 공간 안에 중첩된 이미지를 배치할 수 있습니다. 먼저 HTML에 다섯 번째 이미지 요소가 있는지 확인합니다.
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
</div>우리는 그것을 거기에 배치하기 위해 좋은 절대 위치에 의존할 것입니다:
.gallery > img:nth-child(5) {
position: absolute;
inset: calc(50% - .5*var(--s));
clip-path: inset(calc(var(--g) / 4));
}XNUMXD덴탈의 inset 속성을 사용하면 단일 선언을 사용하여 이미지를 중앙에 배치할 수 있습니다. 우리는 이미지의 크기를 알고 있습니다(변수로 정의됨 --s), 컨테이너의 크기가 100%라는 것을 알고 있습니다. 우리는 약간의 수학을 하고, 각 모서리로부터의 거리는 다음과 같아야 합니다. (100% - var(--s))/2.
우리가 사용하는 이유가 궁금할 수도 있습니다. clip-path 여기에서 전혀. 일관된 간격을 유지하기 위해 중첩 이미지와 함께 사용하고 있습니다. 제거하면 모든 이미지 사이에 동일한 간격이 없다는 것을 알 수 있습니다. 이런 식으로 다섯 번째 이미지에서 약간을 잘라 주위에 적절한 간격을 확보합니다.
전체 코드 다시:
.gallery {
--s: 200px; /* controls the image size */
--g: 10px; /* controls the gap between images */
display: grid;
gap: var(--g);
grid-template-columns: repeat(2, auto);
position: relative;
}
.gallery > img {
width: var(--s);
aspect-ratio: 1;
object-fit: cover;
mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}
.gallery > img:nth-child(1) {--_a: 90deg}
.gallery > img:nth-child(2) {--_a:180deg}
.gallery > img:nth-child(3) {--_a: 0deg}
.gallery > img:nth-child(4) {--_a:-90deg}
.gallery > img:nth-child(5) {
position: absolute;
inset: calc(50% - .5*var(--s));
clip-path: inset(calc(var(--g) / 4));
}이제 많은 분들이 궁금해하실 것입니다. 마지막 이미지를 맨 위에 놓고 테두리를 추가할 수 있는데 왜 모든 복잡한 작업이 필요한가요? 그러면 마스크 없이 중첩된 이미지 아래에 이미지가 숨겨집니다. 맞죠?
그것은 사실이며 우리는 다음을 얻을 것입니다:
아니 mask, 아니 clip-path. 예, 코드는 이해하기 쉽지만 약간의 단점이 있습니다. 완벽한 환상을 만들기 위해서는 테두리 색상이 기본 배경과 같아야 합니다. 이 작은 단점은 배경과 무관한 실제 투명도를 제공하는 대신 코드를 더 복잡하게 만들기에 충분합니다. 국경 접근이 나쁘다거나 틀렸다고 말하는 것이 아닙니다. 배경이 알려진 대부분의 경우에 권장합니다. 그러나 우리는 새로운 것을 탐구하고 가장 중요한 것은 환경에 의존하지 않는 구성 요소를 구축하기 위해 왔습니다.
이번에는 다른 모양을 시도해 보겠습니다.
이번에는 중첩된 이미지를 정사각형이 아닌 원형으로 만들었습니다. 그것은 쉬운 작업입니다 border-radius 그러나 우리는 사용해야합니다 원형 컷아웃 다른 이미지를 위해. 하지만 이번에는 radial-gradient() 대신에 conic-gradient() 그 멋진 둥근 모양을 얻으려면.
.gallery > img {
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2), #000 calc(51% + var(--g)/2));
}
.gallery > img:nth-child(1) { --_a: calc(100% + var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(2) { --_a: calc(0% - var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(3) { --_a: calc(100% + var(--g)/2) calc(0% - var(--g)/2); }
.gallery > img:nth-child(4) { --_a: calc(0% - var(--g)/2) calc(0% - var(--g)/2); }모든 이미지는 이전 예와 동일한 구성을 사용하지만 매번 중심점을 업데이트합니다.
위 그림은 각 원의 중심점을 나타낸 것입니다. 그래도 실제 코드에서는 모든 점을 결합하면 연속적인 원을 얻기 위해 모든 점이 동일한 위치(그리드의 중심)에 있도록 간격을 설명하고 있음을 알 수 있습니다.
이제 레이아웃이 생겼으므로 호버 효과에 대해 이야기해 보겠습니다. 눈치채지 못한 경우 멋진 호버 효과가 중첩된 이미지의 크기를 늘리고 그에 따라 다른 모든 것을 조정합니다. 크기를 늘리는 것은 비교적 쉬운 작업이지만 기본적으로 그라디언트는 애니메이션할 수 없기 때문에 그라디언트를 업데이트하는 것은 더 복잡합니다. 이것을 극복하기 위해 나는 사용할 것입니다 font-size 방사형 그래디언트를 애니메이션으로 만들 수 있습니다.
그래디언트의 코드를 확인하면 내가 추가하고 있음을 알 수 있습니다 1em:
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));그것은 알려져있다 em 단위는 상위 요소에 상대적입니다. font-size, 그래서 변경 font-size 의 .gallery 또한 계산된 em 값 — 이것이 우리가 사용하는 트릭입니다. 우리는 애니메이션 font-size 의 값에서 0 결과적으로 그래디언트가 애니메이션되어 점점 커지는 중첩 이미지의 크기에 따라 잘라낸 부분을 더 크게 만듭니다.
다음은 호버 효과와 관련된 부분을 강조 표시하는 코드입니다.
.gallery {
--s: 200px; /* controls the image size */
--g: 10px; /* controls the gaps between images */
font-size: 0; /* initially we have 1em = 0 */
transition: .5s;
}
/* we increase the cut-out by 1em */
.gallery > img {
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));
}
/* we increase the size by 2em */
.gallery > img:nth-child(5) {
width: calc(var(--s) + 2em);
}
/* on hover 1em = S/5 */
.gallery:hover {
font-size: calc(var(--s) / 5);
}XNUMXD덴탈의 font-size 트릭은 애니메이션할 수 없는 그라디언트 또는 기타 속성에 애니메이션을 적용하려는 경우에 유용합니다. @property로 정의된 사용자 정의 속성은 이러한 문제를 해결할 수 있지만 그것에 대한 지원 작성하는 시점에서 아직 부족합니다.
나는 발견했다 font-size 속임수 @SelenIT2 해결하려고 하는 동안 트위터에 도전.
다른 모양? 갑시다!
이번에는 중첩된 이미지를 마름모 모양으로 잘라냈습니다. 어떻게 여기까지 왔는지 알아내기 위한 연습으로 코드를 분석해 보겠습니다. 구조가 예제와 동일하다는 것을 알 수 있습니다. 유일한 차이점은 그라디언트를 사용하여 모양을 만드는 방법입니다. 파고 배우십시오!
원형 이미지 그리드
여기와 이전 기사에서 배운 내용을 결합하여 훨씬 더 흥미로운 이미지 그리드를 만들 수 있습니다. 이번에는 그리드의 모든 이미지를 원형으로 만들고 마우스를 가져가면 나머지 사진을 덮고 있는 전체 이미지가 나타나도록 이미지를 확장해 보겠습니다.
그리드의 HTML 및 CSS 구조는 이전과 전혀 새로운 것이 아니므로 해당 부분을 건너뛰고 대신 원하는 원형 모양과 호버 효과에 집중합시다.
우리는 사용할 것입니다 clip-path 및 그 circle() 기능 - 당신은 그것을 추측했습니다! — 이미지에서 원을 잘라냅니다.
그 그림은 clip-path 첫 번째 이미지에 사용됩니다. 왼쪽은 이미지의 초기 상태를 나타내고 오른쪽은 호버링된 상태를 나타냅니다. 당신이 사용할 수있는 이 온라인 도구 놀고 시각화하기 clip-path values.
다른 이미지의 경우 원의 중심을 업데이트할 수 있습니다(70% 70%) 다음 코드를 가져옵니다.
.gallery > img:hover {
--_c: 50%; /* same as "50% at 50% 50%" */
}
.gallery > img:nth-child(1) {
clip-path: circle(var(--_c, 55% at 70% 70%));
}
.gallery > img:nth-child(2) {
clip-path: circle(var(--_c, 55% at 30% 70%));
}
.gallery > img:nth-child(3) {
clip-path: circle(var(--_c, 55% at 70% 30%));
}
.gallery > img:nth-child(4) {
clip-path: circle(var(--_c, 55% at 30% 30%));
}우리가 어떻게 정의하는지 주목하십시오 clip-path 내부 폴백으로서의 가치 var(). 이 방법을 사용하면 마우스 오버 시 값을 더 쉽게 업데이트할 수 있습니다. --_c 변하기 쉬운. 사용할 때 circle(), 중심점의 기본 위치는 50% 50%, 그래서 우리는 더 간결한 코드를 위해 그것을 생략합니다. 그래서 당신은 우리가 단지 설정 50% 대신 50% at 50% 50%.
그런 다음 다른 이미지를 덮을 수 있도록 마우스를 가져갈 때 이미지의 크기를 그리드의 전체 크기로 늘립니다. 우리는 또한 보장합니다 z-index 호버링된 이미지의 값이 더 높기 때문에 스택 컨텍스트.
.gallery {
--s: 200px; /* controls the image size */
--g: 8px; /* controls the gap between images */
display: grid;
grid: auto-flow var(--s) / repeat(2, var(--s));
gap: var(--g);
}
.gallery > img {
width: 100%;
aspect-ratio: 1;
cursor: pointer;
z-index: 0;
transition: .25s, z-index 0s .25s;
}
.gallery > img:hover {
--_c: 50%; /* change the center point on hover */
width: calc(200% + var(--g));
z-index: 1;
transition: .4s, z-index 0s;
}
.gallery > img:nth-child(1){
clip-path: circle(var(--_c, 55% at 70% 70%));
place-self: start;
}
.gallery > img:nth-child(2){
clip-path: circle(var(--_c, 55% at 30% 70%));
place-self: start end;
}
.gallery > img:nth-child(3){
clip-path: circle(var(--_c, 55% at 70% 30%));
place-self: end start;
}
.gallery > img:nth-child(4){
clip-path: circle(var(--_c, 55% at 30% 30%));
place-self: end;
}무슨 일이야
place-self재산? 왜 필요하며 각 이미지에 특정 값이 있는 이유는 무엇입니까?
이전 기사에서 발생한 문제를 기억하십니까? 퍼즐 조각의 격자 만들기? 오버플로를 만들기 위해 이미지의 크기를 늘렸지만 일부 이미지의 오버플로가 잘못되었습니다. 우리는 그들을 사용하여 수정했습니다 place-self 재산.
동일한 문제가 여기에 있습니다. 각 이미지가 그리드 셀을 오버플로하도록 이미지의 크기를 늘리고 있습니다. 그러나 아무것도 하지 않으면 그리드의 오른쪽과 아래쪽에 모두 오버플로됩니다. 우리에게 필요한 것은:
- 오른쪽 하단 가장자리를 오버플로하는 첫 번째 이미지(기본 동작),
- 왼쪽 하단 가장자리를 오버플로하는 두 번째 이미지,
- 오른쪽 상단 가장자리를 오버플로하는 세 번째 이미지,
- 왼쪽 상단 가장자리를 넘을 네 번째 이미지.
그것을 얻으려면 다음을 사용하여 각 이미지를 올바르게 배치해야 합니다. place-self 재산.
익숙하지 않은 경우 place-self, 의 줄임말입니다. justify-self 와 align-self 요소를 가로 및 세로로 배치합니다. 하나의 값을 사용하는 경우 두 정렬 모두 동일한 값을 사용합니다.
이미지 패널 확장
이전 기사에서, 행 수, 열 수, 크기, 배율 등 모든 것을 제어할 수 있는 이미지 그리드에 적용되는 멋진 확대/축소 효과를 만들었습니다.
특별한 경우는 하나의 행과 전체 너비 컨테이너만 있는 기존 확장 패널이었습니다.
우리는 이 예를 들어 모양과 결합할 것입니다!
계속하기 전에 내 문서를 읽는 것이 좋습니다. 다른 기사 우리가 다루고자 하는 트릭이 어떻게 작동하는지 이해하기 위해. 확인하고 여기에서 계속해서 패널 모양을 만드는 데 집중할 것입니다.
먼저 코드를 단순화하고 일부 변수를 제거하여 시작하겠습니다.
하나의 행만 필요하고 열의 수는 이미지 수에 따라 조정되어야 합니다. 즉, 더 이상 행 수에 대한 변수가 필요하지 않습니다(--n) 및 열(--m ) 그러나 우리는 사용해야합니다 grid-auto-flow: column, 새 이미지를 추가할 때 그리드에서 열을 자동으로 생성할 수 있습니다. 컨테이너의 고정 높이를 고려할 것입니다. 기본적으로 전체 너비가 됩니다.
이미지를 비스듬한 모양으로 자르자:
clip-path: polygon(S 0%, 100% 0%, (100% - S) 100%, 0% 100%);다시 한 번 각 이미지는 그리드 셀에 포함되어 있으므로 이미지 사이에 원하는 것보다 더 많은 공간이 있습니다.
겹침을 만들려면 이미지의 너비를 늘려야 합니다. 우리는 대체 min-width: 100% 과 min-width: calc(100% + var(--s))어디로 --s 모양을 제어하는 새 변수입니다.
이제 첫 번째 이미지와 마지막 이미지를 수정해야 페이지에서 간격 없이 번집니다. 즉, 첫 번째 이미지의 왼쪽에서 기울기를 제거하고 마지막 이미지의 오른쪽에서 기울기를 제거할 수 있습니다. 우리는 새로운 것이 필요합니다 clip-path 특히 그 두 이미지에 대해.
또한 오버플로를 수정해야 합니다. 기본적으로 모든 이미지는 양쪽에서 오버플로되지만 첫 번째 이미지에서는 오른쪽에 오버플로가 필요하고 마지막 이미지에는 왼쪽 오버플로가 필요합니다.
.gallery > img:first-child {
min-width: calc(100% + var(--s)/2);
place-self: start;
clip-path: polygon(0 0,100% 0,calc(100% - var(--s)) 100%,0 100%);
}
.gallery > img:last-child {
min-width: calc(100% + var(--s)/2);
place-self: end;
clip-path: polygon(var(--s) 0,100% 0,100% 100%,0 100%);
}최종 결과는 기울어진 이미지의 멋진 확장 패널입니다!
원하는 만큼 이미지를 추가할 수 있으며 그리드가 자동으로 조정됩니다. 또한 모양을 제어하기 위해 하나의 값만 제어하면 됩니다!
요소의 단일 행을 다루기 때문에 flexbox로 이와 동일한 레이아웃을 만들 수 있었습니다. 여기 내 구현.
물론 비스듬한 이미지도 좋지만 지그재그 패턴은 어떻습니까? 나는 이미 이것을 놀렸다. 마지막 글 끝.
내가 여기서 하는 일은 교체하는 것뿐이야 clip-path 과 mask… 그리고 무엇을 추측합니까? 나는 이미 자세한 기사를 가지고있다. 지그재그 모양 만들기 — 온라인은 말할 것도 없고 코드를 가져오는 생성기. 모든 것이 어떻게 하나로 합쳐지는지 보시겠습니까?
여기서 가장 까다로운 부분은 지그재그가 완벽하게 정렬되었는지 확인하는 것이며 이를 위해 모든 :nth-child(odd) 이미지 요소.
.gallery > img {
mask:
conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg)
100% calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y,
conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg)
0% calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y;
}
/* we add an offset to the odd elements */
.gallery > img:nth-child(odd) {
--_p: var(--s);
}
.gallery > img:first-child {
mask:
conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg)
0 calc(50% + var(--_p, 0%))/100% calc(2*var(--s));
}
.gallery > img:last-child {
mask:
conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg)
0 calc(50% + var(--_p, 0%)) /100% calc(2*var(--s));
}의 사용에 유의하십시오. --_p 다음으로 대체될 변수 0% 그러나 와 같을 것입니다 --_s 이상한 이미지를 위해.
다음은 문제를 설명하는 데모입니다. 오프셋이 어떻게 정의되는지 보려면 마우스를 가져갑니다. --_p - 정렬을 고정하고 있습니다.
또한 이전 예에서와 같이 첫 번째 이미지와 마지막 이미지에 대해 다른 마스크를 사용하는 방법에 주목하십시오. 첫 번째 이미지의 오른쪽과 마지막 이미지의 왼쪽에만 지그재그가 필요합니다.
그리고 왜 둥근면이 아닌가요? 하자!
코드가 무섭고 이해하기 어려워 보일 수 있다는 것을 알고 있지만 진행 중인 모든 것은 이 문서에서 다룬 다양한 트릭과 이미 공유한 다른 문서의 조합뿐입니다. 이 경우 지그재그와 비스듬한 모양과 동일한 코드 구조를 사용합니다. 이러한 예와 비교하면 차이가 없음을 알 수 있습니다! 그것들은 같은 트릭입니다. 확대/축소 효과에 대한 이전 기사. 그런 다음 내 다른 글쓰기 와 내 온라인 생성기 둥근 모양을 만드는 마스크에 대한 코드를 가져옵니다.
지그재그에 대해 수행한 작업을 기억한다면 모든 이미지에 대해 동일한 마스크를 사용했지만 완벽한 오버랩을 만들기 위해 이상한 이미지에 오프셋을 추가해야 했습니다. 이 경우 홀수 이미지에 대해 다른 마스크가 필요합니다.
첫 번째 마스크:
mask:
linear-gradient(-90deg,#0000 calc(2*var(--s)),#000 0) var(--s),
radial-gradient(var(--s),#000 98%,#0000) 50% / calc(2*var(--s)) calc(1.8*var(--s)) space repeat;
두 번째:
mask:
radial-gradient(calc(var(--s) + var(--g)) at calc(var(--s) + var(--g)) 50%,#0000 98% ,#000)
calc(50% - var(--s) - var(--g)) / 100% calc(1.8*var(--s))
여기서 내가 한 유일한 노력은 간격 변수를 포함하도록 두 번째 마스크를 업데이트하는 것입니다(--g) 이미지 사이에 공간을 만듭니다.
마지막 터치는 첫 번째와 마지막 이미지를 수정하는 것입니다. 이전의 모든 예와 마찬가지로 첫 번째 이미지에는 직선 왼쪽 가장자리가 필요하고 마지막 이미지에는 직선 오른쪽 가장자리가 필요합니다.
첫 번째 이미지의 경우 항상 다음과 같은 마스크가 필요한 마스크를 알고 있습니다.
.gallery > img:first-child {
mask:
radial-gradient(calc(var(--s) + var(--g)) at right, #0000 98%, #000) 50% / 100% calc(1.8 * var(--s));
}
마지막 이미지의 경우 요소 수에 따라 다르므로 해당 요소가 :nth-child(odd) or :nth-child(even).
.gallery > img:last-child:nth-child(even) {
mask:
linear-gradient(to right,#0000 var(--s),#000 0),
radial-gradient(var(--s),#000 98%,#0000) left / calc(2*var(--s)) calc(1.8*var(--s)) repeat-y
}
.gallery > img:last-child:nth-child(odd) {
mask:
radial-gradient(calc(var(--s) + var(--g)) at left,#0000 98%,#000) 50% / 100% calc(1.8*var(--s))
}그게 다야! 세 가지 다른 레이아웃이지만 매번 동일한 CSS 트릭:
- 확대/축소 효과를 만드는 코드 구조
- 모양을 만들기 위한 마스크 또는 클립 경로
- 어떤 경우에는 완벽한 겹침이 있는지 확인하기 위해 이상한 요소에 대한 별도의 구성
- 첫 번째 및 마지막 이미지에 대한 특정 구성을 사용하여 한 면에만 모양을 유지합니다.
그리고 여기에 그들 모두와 함께 큰 데모가 있습니다. 보고 싶은 레이아웃을 활성화하기 위해 클래스를 추가하기만 하면 됩니다.
다음은 Flexbox 구현이 있는 것입니다.
최대 포장
웁, 우리는 끝났어! 이 기사와 마지막 기사 사이에 많은 CSS 트릭과 예제가 있다는 것을 알고 있습니다. 내가 작성한 다른 기사에서 여기에서 참조한 다른 모든 트릭은 말할 것도 없습니다. 모든 것을 정리하는 데 시간이 걸렸고 한 번에 모든 것을 이해할 필요가 없습니다. 한 번만 읽으면 모든 레이아웃에 대한 좋은 개요를 얻을 수 있지만 기사를 두 번 이상 읽고 모든 트릭을 이해하기 위해 각 예제에 집중해야 할 수도 있습니다.
마크업의 이미지 수 외에는 HTML을 전혀 건드리지 않았다는 사실을 눈치채셨나요? 우리가 만든 모든 레이아웃은 이미지 목록에 불과한 동일한 HTML 코드를 공유합니다.
끝내기 전에 마지막으로 한 가지 예를 들겠습니다. 멋진 호버 효과가 있는 두 애니메이션 캐릭터 간의 "대"입니다.
당신은 어때요? 배운 것을 바탕으로 무언가를 만들 수 있습니까? 복잡할 필요는 없습니다. 제가 그 애니메이션 매치업에서 했던 것처럼 멋지거나 재미있는 것을 상상해 보세요. 그것은 당신에게 좋은 연습이 될 수 있으며 우리는 코멘트 섹션에서 훌륭한 컬렉션으로 끝낼 수 있습니다.
