HTML: CSS 컨테이너 쿼리를 사용하여 이미지 크기를 조정하는 방법!

웹사이트를 구축할 때 이미지를 사용하는 것보다 더 멋진 것이 무엇인지 아시나요? 이미지처럼 보이고 작동하는 HTML과 CSS를 사용하여 만드는 것은 어떻습니까? 그리고 이제 컨테이너 쿼리를 사용하면 이것이 매우 쉽습니다. 이번 포스팅에서는 HTML과 CSS를 이용하여 이미지처럼 보이는 광고를 만들어 보겠습니다.

그런 다음 이미지가 찌그러지고, 확장되고, 문서 내의 다른 위치로 이동할 때 이미지처럼 작동하도록 만들겠습니다. 좋아, 확인해 보자!

자, 우리가 만들고 있는 사이트의 사이드바에 Vans 광고가 있는데, 현재는 이미지입니다.

이로 인해 편집이 어려워집니다. 디자이너는 변경이 필요한 경우 이를 업데이트하고 새로운 이미지를 제공해야 합니다.

또한 고밀도 및 저해상도 디스플레이 모두에서 선명하게 보이도록 소스 세트와 함께 사용하려면 여러 버전이 필요할 것입니다.

그래서 우리는 그것을 HTML로 변환하는 임무를 맡게 되었습니다. 우리가 이걸 어떻게 할 수 있지?

이미지 및 뷰포트 단위 사용의 몇 가지 단점

글쎄, 우리는 아마도 뷰포트 단위를 사용할 수 있지만 모든 것이 컨테이너 크기가 아닌 뷰포트를 기반으로 하기 때문에 크기가 다른 다른 위치에 광고를 배치하려면 추가 코드를 추가해야 합니다.

그래서 우리는 그것을 해낼 수는 있지만 약간 지저분해질 수 있습니다. 대신 컨테이너 쿼리와 컨테이너 쿼리 단위를 사용할 수 있습니다. 컨테이너 쿼리는 미디어 쿼리와 약간 유사하지만 전체 뷰포트 대신 페이지에 있는 특정 컨테이너의 크기를 기반으로 합니다.

CSS container-type 속성을 사용하여 컨테이너 설정

좋습니다. 무엇부터 시작하는지 확인해 보겠습니다.

여기에서는 꽤 좋아 보이지만 반응은 어떻게 되나요?

어, 텍스트와 테두리의 크기는 변하지 않기 때문에 그 자체로는 꽤 깨져서 약간의 애정이 필요합니다. 이제 여기서 이미 수행하고 있는 작업 중 하나는 컨테이너가 이미지처럼 응답할 수 있도록 하는 aspect-ratio 사용하는 것입니다. 모두 좋습니다.

 figure { aspect-ratio: 1 / 1.5; }

콘텐츠가 올바르게 반응하도록 하려면 콘텐츠의 모든 크기를 변경하기만 하면 됩니다. 여기서 첫 번째 단계는 차원을 모니터링하기 위한 컨테이너를 제공하는 것입니다. 이것이 우리의 그림 요소가 될 것입니다.

여기에서 컨테이너 쿼리를 사용하려면 포함 컨텍스트를 정의해야 합니다. 이는 container-type 속성을 사용하여 수행할 수 있습니다. 이 예에서는 인라인 크기 값을 사용할 수 있습니다.

 figure { ... container-type: inline-size; }

인라인 크기(이 경우 그림의 너비)를 기준으로 크기를 지정하는 컨테이너를 설정합니다. 좋습니다. 이제 모니터링할 컨테이너가 있으므로 컨테이너 쿼리 단위를 자유롭게 사용할 수 있습니다. 그리고 선택할 수 있는 것이 많습니다. 다음 단위 값 중 하나를 사용할 수 있습니다.

• cqw
• cqh
• cqi
• cqb
• cqmin
• cqmax

여기서는 컨테이너 쿼리 인라인을 나타내는 cqi 사용하겠습니다. 1 cqi 단위는 컨테이너 너비의 1%와 같습니다. 좋아요, 그게 우리에게 필요한 전부입니다. 여기에서는 필요에 따라 단위를 설정하기만 하면 됩니다.

여기에는 이 광고 내의 여러 요소에 사용되는 몇 가지 맞춤 속성이 있습니다.

 figure { ... --frameInset: 0.5rem; --frameStyle: solid 0.25rem currentColor; }

이 프레임이 컨테이너의 외부 가장자리에서 삽입되는 양부터 시작하겠습니다. cqi 로 만들어 보겠습니다.

 figure { ... --frameInset: 3cqi; }

다음으로 여기서 테두리의 두께를 설정해 보겠습니다. 이 경우 max 함수를 사용하여 테두리가 한 픽셀 아래로 계속 축소되는 것을 방지할 예정이지만, 해당 한 픽셀 값보다 큰 한 테두리가 동적이기를 원합니다.

따라서 첫 번째 값은 1픽셀이고 두 번째 값은 동적 값입니다. 하나의 cqi 로 만들어 보겠습니다.

 figure { ... --frameStyle: solid max(1px, 1cqi) currentColor; }

이제 메인 타이틀인 "Vans" 텍스트인 strong 요소에 대해 25 cqi 로 만들어 보겠습니다. 그리고 제목 아래 공간은 cqi 로 하겠습니다.

 strong { font-size: 25cqi; padding-bottom: 3cqi; }

이제 "Off the Wall" 부제를 살펴보겠습니다. 메인 타이틀 크기의 절반 정도가 되어야 하므로 12 cqi 시도해 보겠습니다. 그리고 텍스트 위의 공간에 대해 다시 3개의 cqi 사용하겠습니다.

 em { font-size: 12cqi; padding-top: 3cqi; }

좋습니다. 마지막 부분인 "Since 1966" 레이블의 경우 글꼴 크기를 6 cqi 로 설정하겠습니다. 그리고 위와 아래 공간의 경우 최대 두 개의 값을 사용하는 padding-block 의 논리적 속성을 사용하고 있습니다. 첫 번째 값은 텍스트 위의 값이고 두 번째 값은 아래 공간에 대한 값입니다.

그럼 위의 두 개의 cqi 사용하겠습니다. 그리고 계산에서 --frameInset 그대로 두지만 cqi 의 추가 공간을 사용하겠습니다.

 time { font-size: 6cqi; padding-block: 2cqi calc(5cqi + var(--frameInset)); }

알겠습니다. 좋아 보이네요.

어떻게 반응하는지 살펴보겠습니다. 쥐어짜면 모든 것이 우리가 원하는 대로 균일하게 적절하게 반응합니다. 이미지와 많이 비슷해 보입니다.

작아도 꽤 괜찮아 보이고, 테두리가 1픽셀 이하로 절대 줄어들지 않는 것을 볼 수 있습니다. 그런 다음 너비가 매우 좁아지면 너비가 더 넓어지고 모든 것이 여전히 멋져 보입니다.

정말 멋지죠? 한 세트의 스타일만 있으면 전체적으로 작동합니다. 앞뒤로 크기를 조정하면 멋지게 보입니다.

이제 훨씬 더 멋진 점은 광고 마크업을 가져와서 여기의 기본 열 영역으로 옮기면 모든 것이 이미지인 것처럼 계속 작동한다는 것입니다.

 <header><h1>A Brief History of Vans</h1></header> <div class="content"> <main> <figure> <svg viewBox="0 0 256 256"> <path d="M90.4,67.9C88,69,87.1,70.6,83,80c-4.4,10.2-4.8,12.3-3.1,15"/> <path d="M97.4,95.2c-0.6,0.6-1.2,1.7-1.2,2.3s0"/> </svg> <figcaption> <strong>Vans</strong> <em>Off the Wall</em> <time>Since 1966</time> </figcaption> </figure> ... </main> </div> 

이건 정말 멋지고 멋지네요. 이 모든 것을 구현하는 스타일 세트는 단 하나뿐이라는 점을 기억하세요. 그리고 미디어 쿼리가 전혀 포함되지 않았습니다. 전체적으로 컨테이너 쿼리에는 훨씬 더 많은 내용이 있으므로 다양한 측면을 다루는 향후 게시물을 기대해 주세요.

실제로 보고 싶으십니까?

아래 Codepen 예제에서 이러한 기술의 데모 코드와 예제를 확인하세요. 질문이나 의견이 있으시면 주저하지 말고 댓글을 남겨주세요.