CSS 그리드로 레이아웃 만들기
이 자습서에서는 CSS Grid를 사용하여 다음과 같이 머리글과 바닥글이 있는 2열 레이아웃을 만듭니다.
생성할 2열 레이아웃
먼저 모바일 장치용 뷰포트가 있는 일반적인 HTML 스켈레톤으로 새 HTML 페이지를 만듭니다.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My layout</title>
</head>
<body>
</body>
</html>
body 태그 안에 클래스 div와 함께 container를 추가합니다.<div class="container">
</div>
이 컨테이너는 나머지 요소를 보유합니다. CSS를 사용하여 컨테이너의 너비도 제한합니다.
컨테이너 내부에 코드를 추가하여 페이지의 머리글, 탐색 모음, 기본 콘텐츠 영역, 관련 링크로 가득 찬 사이드바 및 바닥글을 정의합니다.
<div class="container">
<header class="header">
<h1>Banner</h1>
</header>
<nav class="nav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</nav>
<main class="main">
<h2>Main Content</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Iste culpa vitae, sunt fugit porro magni, eos non
mollitia officia accusantium alias illum totam eaque
atque sapiente reprehenderit assumenda. Nemo, modi.
</p>
</main>
<section class="sidebar">
<h2>Related content</h2>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</uL>
</section>
<footer class="footer">
<small>Copyright notice</small>
</footer>
</div>
각 요소는 적절한 HTML 섹션 요소를 사용하고 매우 구체적인 CSS 규칙을 만들 수 있도록 영역을 식별하는 클래스가 있습니다. 여기에 ID를 사용할 수 있지만 디자인 작업에 클래스를 사용하고 JavaScript로 조작할 요소에 대한 ID를 예약하는 것이 일반적인 모범 사례입니다.
작은 화면에서는 기본 브라우저 스타일을 통해 콘텐츠를 읽을 수 있습니다. 작은 화면에서 작동하도록 이 레이아웃을 정의하기 위해 실제로 수행해야 할 작업은 없습니다.
style 섹션의 페이지에 header 요소를 추가하여 스타일시트를 보관합니다. 더 큰 앱에서는 외부 스타일시트를 사용하지만 모든 것을 단일 파일에 보관하면 이 프로젝트를 나중에 참조할 수 있습니다.<head>
...
<style>
</style>
</head>
style 태그 안에 최소 너비 700픽셀을 찾는 미디어 쿼리를 추가합니다.@media only screen and (min-width: 700px) {
}
여기에서 레이아웃을 정의합니다. 700픽셀 이상의 모든 화면은 이 규칙을 사용하지만 작은 화면은 영향을 받지 않습니다. 먼저 작은 화면용으로 디자인한 다음
min-width 미디어 쿼리로 조정하면 종종 작성하고 유지 관리할 CSS 코드가 훨씬 줄어듭니다.CSS 그리드 사양을 사용하면 요소를 배치하기 위해 참조할 수 있는 정의grid areas를 할 수 있습니다. 미디어 쿼리 내에서 다음 코드를 추가하여 머리글, 탐색, 기본, 사이드바 및 바닥글 요소에 대한 그리드 영역을 정의합니다.
/* Name your sections for your grid */
header.header { grid-area: header; }
nav.nav {grid-area: nav;}
main.main { grid-area: main; }
section.sidebar { grid-area: sidebar; }
footer.footer { grid-area: footer; }
그리드 영역의 이름은 원하는 대로 지정할 수 있지만 이 자습서에서는 CSS 클래스와 동일한 이름을 사용합니다. CSS 선택기는 요소와 클래스를 참조하여 보다 구체적인 일치를 보장합니다.
다음으로
container, 너비, 높이 및 여백을 사용하여 display: grid 영역을 정의합니다. .container {
display: grid;
width: 80%;
margin: 0 auto;
height: 100%;
}
이제
grid-template-areas를 사용하여 표시하려는 순서대로 섹션 이름을 지정하여 레이아웃 작동 방식을 정의합니다. .container {
...
/* Drow your grid! */
grid-template-areas:
"header header"
"nav nav"
"main sidebar"
"footer footer";
}
grid-template-areas 를 사용할 때 여러 열에 걸쳐 있는 경우 영역 이름을 반복합니다. 이 경우 header , nav 및 footer 영역은 두 개의 열에 걸쳐 있고 main 및 sidebar 영역은 각각 하나에 걸쳐 있습니다.다음으로 그리드의 열 너비를 정의합니다. 기본 콘텐츠 영역은 사이드바 너비의 2배여야 합니다. 계산에 픽셀을 사용하는 대신 "소수 단위"를 나타내는
fr 단위를 사용하십시오..container {
...
grid-template-columns: 2fr 1fr;
}
이제 행의 높이를 정의합니다. 머리글을 100픽셀 높이로, 탐색 모음을 30픽셀 높이로, 바닥글을 80픽셀 높이로 설정합니다. 기본 영역과 사이드바는 나머지 공간을 차지해야 합니다. 따라서
1fr를 사용하십시오..container {
...
grid-template-rows: 100px 30px 1fr 80px;
}
전체 규칙은 다음과 같습니다.
.container {
display: grid;
width: 80%;
margin: 0 auto;
height: 100%;,
/* Drow your grid! */
grid-template-areas:
"header header"
"nav nav"
"main sidebar"
"footer footer";
grid-template-columns: 2fr 1fr;
grid-template-rows: 100px 30px 1fr 80px;
}
파일을 저장하고 테스트해 보십시오. 2열 레이아웃이 표시됩니다.
결론
이 자습서에서는 소량의 코드를 사용하여 2열 레이아웃을 만들었습니다. 많은 CSS 레이아웃 라이브러리와 달리 CSS Grid는 HTML 마크업이나 클래스를 추가할 필요가 없습니다. 코드가 더 깨끗하고 유지 관리가 더 쉽습니다.
그리드 안에 그리드를 배치할 수도 있습니다. 이 문서에서 사용한 것과 동일한 접근 방식을 사용하여 내부 그리드를 정의합니다. 내부 요소 중 하나에
display: grid를 설정하고 고유한 그리드 영역을 정의합니다. CSS Grid를 Flexbox와 결합할 수도 있습니다. 이는 style your menu .이 게시물이 좋아요? purchasing one of my books about software development로 내 글을 지원해 주세요.
Reference
이 문제에 관하여(CSS 그리드로 레이아웃 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/bphogan/creating-a-layout-with-css-grid-405p텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
