4주차 위치 정렬 - grid 1

2022. 11. 16. 23:06ㆍ배울수록 연봉은 늘어간다./자바스크립트

728x90

  • ▲ 위에 보이는 화면처럼 만들어 봅니다.
  • 프로그램은 구름 IDE를 사용했습니다.
  • 소프트웨어 스택은 HTML , CSS, JS 선택을 했고 프로젝트는 빈 프로젝트로 시작하였습니다.

1. Grid 란?

  • 격자 또는 눈금을 뜻합니다.
  • 즉 행렬을 통해 요소들을 좀 더 정교하게 배치할 수 있는 레이아웃입니다.
  • Grid 내부는 Lines , Track , Area , Gap 이라는 영역으로 이루어져 있습니다.

2. Grid 명칭

1. Lines 
  • 행과 열의 선들을 모두 Grid Lines라고 합니다.
  • Grid Lines에서 행은 Grid column , 열은 Grid row라고 합니다.

 

2. Track 

  • 평평한 Grid Line의 두 줄 사이의 공간을 Grid Track라고 부릅니다.
3. Area

  • 네 줄의 Grid Line으로 둘러 쌓인 공간을 Grid Area라고 부릅니다.
4.Gap 
  • Grid Lines의 두께 입니다.

3. Gird의 구성

html
<div class="grid-container">
<header class="grid-item">Header</header>
<section class="grid-item">Section</section>
<section class="grid-item">Section</section>
<aside class="grid-item">Aside</aside>
<footer class="grid-item">Footer</footer>
</div>
  • Grid Container와 Grid Items로 구성되어 있습니다.
  • Grid Item 들은 Grid Container 안에 담겨 있어야 합니다.

4. Gird container : template

<예제>

html CSS
<div class="main"> <!--해당 요소가 Grid Container가 됨-->
<header>Header</header>
<nav>Navbar</nav>
<section>Section</section>
<aside>Aside</aside>
<footer>Footer</footer>
</div>		 .main {
display: grid;
grid-template-rows: 40px 40px 40px;
grid-template-columns: 40px 80px 40px;
}
  • Grid Container를 사용하고 싶다면 display를 통해 사용하겠다고 선언해야 합니다.
  • 값으로는 grid(block의 특성) or inline-grid(inline의 특성)를 설정할 수 있습니다.
  • grid-template-rows와 grid-template-columns 는 Grid Track의 크기를 정의 합니다.

 

 

 

<실행화면>

<검사를 통해 실제 확인한 화면>

반복되는 값을 쉽게 할당하기 위해서는??
  • repeat() 함수를 사용하면 복잡한 코드를 쉽고 간단하게 줄일 수 있습니다.
  • 첫번째는 반복 횟수를 두번째는 Grid Track의 크기를 넣어 줍니다.
  • grid-template-rows: repeat(10, 40px);
  • grid-template-columns 도 사용이 가능합니다.
  • ▼아래 예시는 동일한 뜻을 가지고 있습니다. 참고해 주세요.
/* 2, 3번째 라인은 동일한 뜻을 지님 */
grid-template-columns: 40px repeate(4, 80px) 40px;
grid-template-columns: 40px 80px 80px 80px 80px 40px;

/* 6, 7번째 라인은 동일한 뜻을 지님 */
grid-template-columns: repeate(4, 40px 80px);
grid-template-columns: 40px 80px 40px 80px 40px 80px 40px 80px;

 

fr 이란?

<예시>

css
.main {
display: grid;
grid-template-rows: 128px auto 240px;
grid-template-columns: 1fr 3fr 1fr;
}
  • fr은 fraction의 약자이며 공간의 비율을 나타내는 유연한 단위 입니다.
  • ▼아래 그림을 보면 이해가 빠릅니다.

5. grid-template-areas

: 같은 이름끼리 합쳐집니다.

 

<예제>

html css
<div class="main"> <!--해당 요소가 Grid Container가 됨-->
<header>Header</header>
<nav>Navbar</nav>
<section>Section</section>
<aside>Aside</aside>
<footer>Footer</footer>
</div>		 .main {
display: grid;
grid-template-rows: 128px auto 240px;
grid-template-columns: 1fr 3fr 1fr;
grid-template-areas: 
"hd hd hd"
"nav content ad"
"ft ft ft";
}
header,nav,section,aside,footer {
border: 4px solid;
padding: 8px;
margin: 2px;
text-align: center;
}

header { 
grid-area: hd;
border-color: purple;
}
nav { 
grid-area: nav; 
border-color: blue;
}
section { 
grid-area: content; 
border-color: yellow;
}
aside { 
grid-area: ad;
border-color: red;
}
footer { 
grid-area: ft; 
border-color: green;
}

 

<검사>

위에 검사 영역을 보면 Gird container : template 에서 나누었던 영역은 그대로 유지되고 있는 것을 확인할 수 있습니다.

 

단축 프로퍼티
css
1 .main {
display: grid;
grid-template: 
"hd hd hd" 128px
"nav content ad" auto
"ft ft ft" 240px
/ 1fr 3fr 1fr;
}
2 .main {
display: grid;
grid-template-rows: 128px auto 240px;
grid-template-columns: 1fr 3fr 1fr;
grid-template-areas: 
"hd hd hd"
"nav content ad"
"ft ft ft";
}

해당 코드는 단축 코드로 위에 있는 코드와 동일 합니다.

5. grid-gap

:행과 열 사이의 간격을 조정합니다.

 

html css
<div class="main"> <!--해당 요소가 Grid Container가 됨-->
<header>Header</header>
<nav>Navbar</nav>
<section>Section</section>
<aside>Aside</aside>
<footer>Footer</footer>
</div>		 .main {
display: grid;
grid-template: 
"hd hd hd" 128px
"nav content ad" auto
"ft ft ft" 240px
/ 1fr 3fr 1fr;
grid-row-gap: 16px;
grid-column-gap: 16px;
}
header,nav,section,aside,footer {
border: 4px solid;
padding: 8px;
text-align: center;
}
header { 
grid-area: hd;
border-color: purple;
}
nav { 
grid-area: nav; 
border-color: blue;
}
section { 
grid-area: content; 
border-color: yellow;
}
aside { 
grid-area: ad;
border-color: red;
}
footer { 
grid-area: ft; 
border-color: green;
} 

 

grid-row-gap: 16px;
grid-column-gap: 16px;

=> 이 부분을 0으로 하게 되면 어떠한 변화가 있는지 실행해 보세요.

 

단축 프로퍼티
css
grid-row-gap: 16px;
grid-column-gap: 16px;
/* 위와 아래의 코드는 동일합니다. */
grid-gap: 16px 16px;
/* 모두 동일한 코드입니다. */
grid-gap: 16px;

처음값을 row 두번째 값을 column으로 사용합니다.

6. grid-auto-rows / columns

: Track의 크기를 지정할 수 있는 프로퍼티

 

<예시>

html css
<article class="photos">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div class="card">4</div>
<div class="card">5</div>
</article>		 body {
background-color: #eee;
}
.photos {
display: grid;
grid-gap: 8px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 200px);
}
.card {
background: #fff;
box-shadow: 0px 2px 8px rgba(0,0,0, .2);
border-radius: 8px;
padding: 24px;
}

 

<실행화면>

  • 기본 크기는 200px 이면서 넘치는 내용이 빠져 나가지 않도록 카드의 크기를 자동으로 늘려봅니다.
  • minmax(최대값,최소값)라는 함수를 이용해 봅니다.
  • grid-auto-rows: minmax(200px, auto); 으로 수정을 합니다.

<실행화면>

7. grid-auto-flow

: Grid가 자동으로 배치되는 방향을 결정합니다.

 

<예시>

html css
<article class="photos">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
</article>		 body {
background-color: #eee;
}
.photos {
display: grid;
grid-gap: 8px;
grid-template-columns: repeat(2, 100px);
grid-auto-flow: row;
}
.card {
background-color: #fff;
box-shadow: 0px 2px 8px rgba(0,0,0, .2);
border-radius: 8px;
padding: 24px;
}
.card:nth-child(1) {
  grid-column-start: 2;
}

 

<실행화면>

 

  •  grid-column-start: 2; = > 이 아이가 2로 설정되어 있기 때문에 카드의 첫번째가 비어 있습니다.
  • grid-auto-flow 의 값은 row , column 값을 가지고 있지만 뒤에 dense 가 붙으면 비어있는 공간을 차지 합니다.
  • grid-auto-flow: row dense; => 값을 이렇게 바꾸면 어떻게 변하는지 아래에서 확인을 해봅니다.

<실행화면>

관련글

Total : Today : Yesterday :

티스토리툴바