CSS를 활용하면 시각적으로 매력적이고 반응이 빠른 디자인을 제작할 수 있는 다양한 기능을 사용할 수 있습니다. 잡지에서 영감을 받은 레이아웃을 활용하면 텍스트와 시각적 요소를 매혹적인 방식으로 효과적으로 배치할 수 있기 때문에 디자이너들 사이에서 이 접근 방식이 여전히 선호되는 이유 중 하나입니다.
CSS 그리드를 활용하면 이러한 배열을 달성하는 데 필요한 정확하고 다양한 조작 기능을 습득할 수 있으므로 능숙해지면 매우 유리한 기술 세트가 될 수 있습니다.
매거진 스타일 레이아웃이란?
잡지의 시각적 표현은 종종 정보를 가로 및 세로 섹션으로 구성하는 그리드 시스템을 활용하여 이루어집니다.
당사의 템플릿은 텍스트 콘텐츠, 시각적 이미지 및 광고와 같은 다양한 미디어 형식을 체계적이고 시각적으로 보기 좋게 표현하는 데 탁월합니다.
CSS 그리드 이해
CSS 그리드를 활용하면 2차원 평면 내에서 요소를 효율적으로 배열할 수 있어 열과 행으로 구성된 그리드 구조를 쉽게 구성할 수 있습니다.
배열의 구성을 담당하는 그리드 컨테이너와 컨테이너의 자손 역할을 하는 그리드 항목.
캐스케이딩 스타일 시트(CSS) 그리드 레이아웃을 사용하면 다음 마크업 및 관련 스타일시트 규칙을 사용하여 3×3 매트릭스를 쉽게 생성할 수 있습니다:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f76a6a;
padding: 20px;
}
본 코드는 각각 너비가 균일하고 그 사이에 20픽셀 간격이 있는 세 개의 가로 요소로 구성된 그리드 기반 레이아웃을 생성합니다. 결과는 다음과 같습니다:
HTML 구조 설정하기
웹사이트에 잡지 같은 레이아웃을 구현하려면 체계적인 HTML 구조가 필수적입니다. ‘기사’ 및 ‘섹션’과 같은 시맨틱 태그를 활용하면 페이지의 콘텐츠를 효과적으로 정렬할 수 있습니다.
<body>
<section class="magazine-layout">
<article>
<img src="https://source.unsplash.com/random/?city,night" />
<p>Some Article Title</p>
</article>
<article>
<img src="https://source.unsplash.com/random/?city,day" />
<p>Some Article Title</p>
</article>
<article>
<img src="https://source.unsplash.com/random/?animal" />
<p>Some Article Title</p>
</article>
<article>
<img src="https://source.unsplash.com/random/?book" />
<p>Some Article Title</p>
</article>
<article>
<img src="https://source.unsplash.com/random/?food" />
<p>Some Article Title</p>
</article>
</section>
</body>
그리드 컨테이너 정의하기
매거진 스타일 디자인에 적합한 그리드 시스템을 구성하려면 아래 설명된 대로 후속 CSS 규칙을 통합하세요:
.magazine-layout {
height: 100%;
max-width: 130rem;
margin: 0 auto;
/* Defines the grid container */
display: grid;
/* Defines the column specification */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* Defines the row specification */
grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
padding: 2rem;
}
grid”를 선택기 ‘.magazine-layout’과 함께 사용하면 이 컨테이너를 지정된 스타일시트 내에서 그리드 컨테이너로 효과적으로 지정할 수 있습니다.
그리드 템플릿 열 및 -행은 반복, 자동 맞춤 및 최소값을 동적으로 혼합하여 열 크기가 최소 너비 250픽셀부터 각 행에 가능한 한 많은 콘텐츠를 수용하도록 보장합니다.
그리드 항목 배치하기
예산 관리 팁으로 재정을 파악하세요.””이 검소한 생활 전략을 따라 저축을 극대화하세요.
article {
overflow: hidden;
border-radius: 0.5rem;
position: relative;
color: #fff;
}
.article img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
max-height: 400px;
}
.article p {
position: absolute;
bottom: 0;
left: 0;
padding: 2rem;
background: #333333c1;
font-size: 2rem;
border-radius: 0.5rem;
}
앞서 언급한 웹 페이지 디자인은 다음 레이아웃과 유사해야 합니다:
잡지 스타일 레이아웃 만들기
실제 잡지와 같은 모양을 얻으려면 컨테이너 내에서 “기사” 요소를 임의로 배열할 수 있는 CSS 스타일링 규칙을 통합해야 합니다.
.article:nth-child(1) {
grid-column: 1 / span 3;
}
.article:nth-child(4) {
grid-column: 2 / span 2;
}
이 시점에서 웹페이지의 모양은 다음과 같아야 합니다.
CSS 그리드를 사용한 반응형 디자인
CSS 그리드의 중요한 장점은 미디어 쿼리를 사용하여 다양한 화면 크기에 따라 레이아웃을 수정할 수 있는 내재적 반응성입니다.
/* Media query for screens up to 1100px */
@media screen and (max-width: 1100px) {
.article:nth-child(3) {
grid-column: 2 / span 2;
}
.article:nth-child(5) {
grid-row: 3 / span 1;
}
}
/* Media query for screens up to 600px */
@media screen and (max-width: 600px) {
.article:nth-child(2),
.article:nth-child(3),
.article:nth-child(4),
.article:nth-child(5) {
grid-column: 1 / span 3;
}
}
이러한 미디어 쿼리를 활용하면 다양한 기기 화면 크기에 맞춰 다양한 디자인 배열 간에 원활하게 전환할 수 있습니다. 그 결과 프레젠테이션은 다양한 디스플레이 크기에 최적화됩니다:
브라우저가 동영상 태그를 지원하지 않습니다.
CSS 그리드로 레이아웃 변형하기
CSS 그리드를 활용하면 반응형 디자인 기법을 통해 다양한 디지털 화면 크기 구성에 맞출 수 있는 인쇄 출판물에서 볼 수 있는 적응형 다중 열 디스플레이 형식을 개발할 수 있습니다. 이 도구를 사용하면 격자형 프레임워크 설정, 콘텐츠 요소 배치, 지정된 치수 또는 중단점에 따른 공간 배열 수정이 용이합니다.
다양한 접근 방식을 사용하여 다양한 그리드 배열과 미학을 탐색하여 온라인 존재에 이상적이고 출판물에서 영감을 얻은 구조를 얻을 수 있습니다.