CSS를 사용하여 여러 이미지를 겹치는 방법

CSS는 Cascaded Style Sheet의 약자입니다. HTML과 같은 마크업 언어로 문서의 표현을 정의하는 스타일 시트 언어입니다. 계단식 스타일 시트는 색상, 레이아웃, 글꼴 및 테마와 같은 콘텐츠 및 기타 시각적 표현을 차별화합니다. 이러한 차별화는 콘텐츠에 대한 액세스를 향상시키고 프레젠테이션 사양을 제어합니다. CSS는 선택한 웹 페이지에 공통 테마를 정의하고 전체 웹 사이트에서 볼 수 있습니다. 복잡한 문제와 중복된 콘텐츠 구조를 줄이기 위해 CSS 파일의 세부 정보는 별도로 유지됩니다.

CSS는 여러 이미지를 겹칠 때 사용할 수 있습니다. 즉, 이미지를 다른 이미지 위에 놓는 것입니다. 이를 수행하는 세 가지 방법이 있습니다. 하나씩 하나씩 살펴보도록 하겠습니다.

1. CSS 그리드 사용:

핀

CSS 그리드는 행과 열과 그 안의 내용을 처리하는 가장 강력한 2차원 CSS 기능입니다. CSS 규칙을 사용하여 부모 요소와 자식 요소를 모두 사용할 수 있습니다. CSS의 그리드는 웹 페이지와 콘텐츠를 레이아웃하는 방식을 근본적으로 변경했습니다. 그리드로 작업하려면 그리드 컨테이너, 그리드 항목, 그리드 선 및 그리드 셀에 대해 알아야 합니다. 그리드 트랙 및 그리드 영역과 같은 다른 용어도 포함됩니다. 그리드 컨테이너의 자식 요소는 서로 겹치는 것처럼 보일 수 있습니다.

픽셀을 사용하여 그리드에서 고정 및 유연한 트랙 크기를 만들 수 있습니다. 특정 픽셀 수를 지정하면 원하는 레이아웃에 맞게 격자를 설정할 수 있습니다. 유연한 그리드 트랙을 지정하려면 백분율로 값을 언급할 수 있습니다.

CSS 그리드의 가장 중요한 기능은 일반적인 문서 흐름을 방해하지 않고 z-인덱스를 변경하여 이미지를 겹칠 수 있다는 것입니다. CSS 그리드를 사용하면 해당 요소의 높이와 너비로 작업할 수 있습니다. 또한 상단 이미지는 항상 왼쪽 하단 모서리에 맞춰 아래로 배치됩니다. 이미지는 컨테이너 요소의 왼쪽 가장자리에 맞춰 정렬됩니다.

이에 대한 HTML 코드:

<div class="이미지 스택">

<div class="image-stack__item image-stack__item—top">

<img src=”Https://sourceoftheimage.com/s.cdpn.io.110238/image1.jpeg” alt=”첫 번째 이미지”>

</div>

<div class="image-stack__item image-stack__item—하단">

<img src=https://another-source.com/s.cdpn.io/110238/portrait-1-secondImage.jpg alt=”두 번째 이미지”>

</div></div>

이미지가 장식적인 모양이라면 요소에 role=”presentation” 속성을 추가할 수 있습니다. 이 사양을 사용하면 이미지가 화면의 독자에게 렌더링되지 않습니다.

이제 고려한 그리드의 열 너비를 지정해야 합니다. 여기서는 여러 가지 방법이 있지만 일반적으로 12열 그리드를 사용하기 때문에 12열 그리드를 생성합니다.

이를 위해 다른 요소를 포함하는 상위 요소의 CSS 파일에 다음을 지정합니다.

.이미지 스택

{

디스플레이: 그리드;

그리드 템플릿 열: repeat(12, 1fr);

위치: 상대;

}

Grid-template-columns는 그리드가 가질 열의 수를 지정하는 특성입니다. 반면에 1fr은 사용 가능한 공간의 양을 계산하도록 브라우저에 지정합니다. 이러한 것들은 열과 행 사이에 간격이 있을 때 유용합니다.

위치: 여기서 상대가 중요합니다. 이미지의 z-인덱스가 요구 사항 및 사양에 따라 작동할 수 있도록 합니다. 기능적 그리드를 사용할 수 있게 되면 이미지의 너비를 확인해야 합니다. 이미지에 너비를 추가하려면 너비를 백분율로 지정하는 것이 이상적인 사양입니다. 이제 이미지와 관련된 구성 요소의 전체 너비로 시작해야 합니다. 이미지의 너비는 844픽셀로 100%입니다. 상단 이미지의 너비는 521px입니다. 여기에서 521px를 844px로 나눌 수 있습니다. 이제 결과 값에 100을 곱해야 하며, 이는 대략 61.7%입니다.

61.7%를 62%로 반올림하면 58%와 66%의 중간 값이 나오는 것을 알 수 있습니다. 따라서 우리는 66%를 차지할 것입니다. 맨 위에 있는 이미지의 경우 CSS에 들어가는 다음 코드가 있습니다.

.image-stack__item—상단

{

그리드 열: 1/스팬 8;

그리드 행: 1; // 두 번째 이미지와 같은 행에 있어야 합니다.

Padding-top: 20% // 이것은 그림을 아래에 놓고 비율을 유지합니다.

z-인덱스: 1; //아래 사진의 상단에 이미지를 렌더링합니다.

}

두 번째 이미지의 경우 다음을 계산합니다.

645px/844px이고 값에 100을 곱해야 76.4%가 됩니다. CSS의 12열 그리드에 완벽하게 맞는 75%로 반올림할 것입니다.

하단 이미지가 9개의 열을 차지하고 4 ^번째 그리드 라인을 통해 렌더링을 시작하는지 확인해야 합니다. 이를 통해 이미지가 그리드의 나머지 부분을 차지해야 합니다.

하단 이미지의 CSS 코드는 다음과 같습니다.

.image-stack__item—하단

{

그리드 열: 4

그리드 행: 1; //이미지가 같은 행에 나타나도록 합니다.

}

CSS 그리드를 사용하면 모든 유형의 겹침이 가능합니다. 겹침에는 이미지 위의 이미지, 이미지 위의 텍스트 또는 텍스트 위에 겹친 텍스트가 포함될 수 있습니다. 그것은 당신이 상상할 수 있는 만큼 많은 가능성을 제공합니다. 최종 코드는 아래와 같이 나타납니다.

<div class=”container”> <p>CSS 그리드 방식</p> <div class=”image-stack”> <div class=”image-stack__item image-stack__item–top”>

<Img src=”Https//sourceoftheimage.com/s.cdpn.io.110238/image1.jpeg” alt=첫 번째 이미지”></div>

<div class="image-stack__item image-stack__item–bottom">

<img src=https://another-source.com/s.cdpn.io/110238/portrait-1-secondImage.jpg alt=”두 번째 이미지”></div>

</div> <p>텍스트 내용이 여기에 표시됩니다.</p> </div>

2. 음수 여백으로 플로팅:

핀

CSS의 Float 속성은 웹 페이지 요소를 컨테이너의 왼쪽 또는 오른쪽에 배치합니다. 텍스트 및 인라인 요소가 요소를 래핑할 수 있습니다. float 요소는 페이지의 일부이지만 여전히 정상적인 흐름에서 벗어납니다. float 속성을 사용하면 요소가 컨테이너 요소의 테두리에 닿기 위해 오른쪽이나 왼쪽으로 이동합니다.

float 속성은 주변 요소를 float로 만듭니다. 이 속성은 인쇄 디자인과 유사하게 나타나는 요소와 콘텐츠를 렌더링합니다. 이러한 개념을 텍스트 줄 바꿈이라고 합니다. 즉, 텍스트가 요소를 둘러싸고 있습니다. 인쇄 디자인에서 구성 요소는 텍스트가 주위에 떠 있는 이미지일 수 있습니다. 텍스트 줄 바꿈을 무시하면 이미지가 없는 것처럼 텍스트가 이미지와 겹치게 됩니다. float를 사용하여 전체 웹 페이지 또는 웹 사이트의 레이아웃을 디자인할 수 있습니다. 웹 페이지 요소 주위에 텍스트를 래핑하는 것으로 제한되지 않습니다.

여기에 있는 코드는 Internet Explorer를 포함한 모든 브라우저를 지원합니다. 이 방법은 문서에서 요소를 가져와 float를 사용하여 렌더링하는 데 중점을 둡니다. 이 코딩 구문의 가장 좋은 부분은 구조가 이전에 언급한 구조와 유사하게 유지된다는 것입니다. 이미지 스택의 부모 요소에 대해 자식 요소를 띄울 때 "clear"를 사용합니다. 여기에서 콘텐츠는 이미지 아래에 렌더링됩니다. 구문은 다음과 같습니다.

.image-stack::후

{

콘텐츠: ' ';

디스플레이: 테이블;

클리어: 둘 다;

}

위의 코드는 하단에 배치된 이미지에 대한 코드입니다. 따라서 두 번째 이미지가 이 이미지 위로 이동합니다.

이제 상단에 배치된 이미지의 코드는 다음과 같습니다.

.image-stack__item—상단

{

왼쪽으로 뜨다;

너비: 66%;

오른쪽 여백: -100%;

패딩 탑: 15%;

위치: 상대;

z-인덱스: 1;

}

중요한 음수 값에 지정된 여백이 있습니다. 음수 마진은 상황에 따라 다르게 작동합니다. 위나 아래에 적용하면 특정한 방식으로 작용합니다. 그리고 음수 여백이 부동 요소의 왼쪽 또는 오른쪽에 있으면 다르게 동작합니다.

여기에서 이미지의 겹침을 허용하는 부동 왼쪽 요소에 음수 오른쪽 여백을 적용했습니다. -100%는 이미지 컨테이너의 너비입니다. 이 값은 왼쪽에 놓고 맨 아래에 있는 이미지가 문서 개체 모델에 없는 것처럼 그 아래에 렌더링되도록 합니다. 따라서 최종 코드는 다음과 같이 나타납니다.

{

상자 크기: 테두리 상자;

}

피 {

글꼴 크기: 20px;

글꼴 패밀리: sans-serif;

색상: #6439a9;

}

.컨테이너 {

패딩: 100px 30px;

너비: 100%;

여백: 0 자동;

최대 너비: 900px;

}

// 클리어픽스

.image-stack::after {

콘텐츠: ' ';

디스플레이: 테이블;

클리어: 둘 다;

}

.image-stack__item–상단 {

왼쪽으로 뜨다;

너비: 66%;

여백 오른쪽: -100%;

패딩 탑: 15%; // 임의

위치: 상대;

z-인덱스: 1;

}

.image-stack__item–하단

{

플로트: 오른쪽;

너비: 75%;

}

이미지

{

너비: 100%;

}

3. CSS 그리드와 float 메소드 결합:

핀

이 방법의 코드는 모든 브라우저에서 작동하도록 지원합니다. 또한 오래되고 사용되지 않는 특정 브라우저에서 완벽하게 작동하는 코드를 지정합니다. 여기서는 이 방법의 필수 부분인 "@supports" 기능을 사용합니다. 고려중인 브라우저가 "display: grid" 값을 지원하는지 확인하기 위함입니다. 코드의 "@supports" 기능을 사용하기 전에 Internet Explorer 브라우저를 지원하는 코드를 사용할 것입니다.

"@supports" 기능에서 너비를 100%로 재설정합니다. 이제 float 속성은 의미가 없습니다. 여기서 dth를 100%로 설정합니다. 고려하여 IE 브라우저를 추가하는 것은 안너를 지원합니다. 음수 m이면 다른 방식으로 행동합니다. 사용 중인 요소에는 영향을 미치지 않습니다. 따라서 최종 코드는 아래와 같습니다.

<div class=”container”> <p>크로스 브라우저 방식</p> <div class=”image-stack”> <div class=”image-stack__item image-stack__item–top”> <img src=”https: //firstimagesource.com/s.cdpn.io/110238/image1.jpeg” alt=””> </div> <div class=”image-stack__item image-stack__item–bottom”> <img src=”https:/ /secondimagesource.com/s.cdpn.io/110238/secondImage.jpg” alt=””> </div> </div> <p>텍스트 내용이 여기에 표시됩니다.</p> </div>

그리드 사용의 장점:

핀

코딩을 줄이는 것은 CSS 그리드를 사용할 때의 본질적인 이점입니다. 그리드의 기반이 되는 추가 HTML 요소를 생성하는 대신 스타일시트를 사용하여 그리드를 만듭니다. 그리드 프레임워크는 클래스의 의미상 건전한 이름을 항상 사용하지는 않습니다. CSS 그리드는 본질적으로 기본이기 때문에 이를 지원하기 위해 프로젝트에 대규모 라이브러리를 포함할 필요가 없습니다. CSS 기반 웹 개발은 구문 학습이 쉽기 때문에 더 빠릅니다. 또한 CSS를 사용한 프로토타이핑은 빠르고 효과적입니다.

브라우저 지원이 늘어남에 따라 거의 모든 곳에서 그리드를 사용할 수 있습니다. 그리드에 대한 자습서는 어디에서나 사용할 수 있습니다. 초보자부터 고급 개발자까지 누구나 사용할 수 있습니다. 그리드를 사용하면 다양한 컨텍스트에서 웹 페이지의 사용자 인터페이스를 쉽게 구현할 수 있습니다. 끝없는 텍스트 줄 바꿈 없이 반응형 구조화된 레이아웃을 만들 수 있으며 3개의 열 레이아웃을 가질 수 있습니다. 그리드는 웹 페이지 디자인을 위한 쉬운 유지 관리와 유연성을 제공합니다. 또한 행과 열을 동시에 사용하여 복잡하지만 유연한 계획을 생성할 수 있습니다. 대부분의 브라우저는 그리드 시스템을 지원하므로 작동하기 위해 대체 코드가 필요하지 않습니다.

디자이너는 그리드를 사용하여 창의적이고 멋진 웹사이트 레이아웃을 생성할 수 있습니다. 또한 디자이너는 디자인의 전반적인 모양과 시각적 미학을 손상시키지 않으면서 반응형 디자인으로 전환할 수 있습니다. CSS는 그리드와 디자이너의 디자인 아이디어를 결합하여 즉시 사용 가능한 디자인을 생성합니다. 이 디자인은 외관상 놀랍고 오늘날의 기술에 정통한 사용자에게 잘 맞습니다.

결론:

이미지의 중첩은 디자인 세계에서 흥미로운 개념입니다. 개발자가 사진의 겹침을 처리해야 하는 경우 언급된 방법을 사용할 수 있습니다. CSS에 정통한 개발자라면 무엇을 선택하든 실제로 달성할 수 있다는 것을 알고 있을 것입니다. 그러나 초보자는 이 튜토리얼을 보고 매우 적은 시간으로 이미지 겹침을 만들 수 있습니다. 그는 어떤 코드가 어떤 파일에 들어가는지 알아야 합니다.