Grid

 

그리드

2차원(수평 + 수직) 레이아웃 시스템

Flex와 동일하게 container, item이 필요하다

부모 요소 : Grid Container

자식 요소 : Grid item

​

.item.bgc{요소의 내용 }*갯수

display : grid --> 변화없음

몇개의 컬럼 또는 로우를 만들지 각각의 사이즈는 어떻게 해야할지 정해야한다.

​

repeat(반복횟수, 크기

​

fr단위(fraction) = 비율, 분수, 부분

minmax(최소 높이, 최대 높이);

 

.container{
  display: grid;
  /*grid-template-columns: 100px 100px 100px;*/
  /*grid-template-columns: repeat(5, 20%);*/ 
  /*grid-template-columns: repeat(3, 1fr);*/
  grid-template-columns: 1fr 2fr 1fr;


  /** row 크기 지정 */
  /*grid-template-rows: 100px 100px 100px 100px;*/
  /*grid-template-rows: 50px 100px repeat(3, 150px);*/
  
  /** 몇 줄인지 모르지만, 일단 한 줄의 높이를 200px로 하겠다.*/
  grid-auto-rows: minmax(50px, auto);

  /*예전 표기법*/
  /* grid-column-gap: 10px;
  grid-row-gap: 10px; */
  grid-gap: 10px;
}

.content2{
  /* grid-column-start: 2;
  grid-column-end: 4; */
  grid-column: 2 / 4;

  /* grid-row-start: 1;
  grid-row-end: 5; */
  grid-row: 1 / 3;
}

 

Grid order

Grid item을 배치하는 순서

• 각 아이템들의 시각적 순서를 결정하는 속성
• 작은 숫자일수록 먼저배치
• 화면에 보이는 시각적인 순서만 바꾸는것
• A - B - C ----> B - C - A
• 순서가 바뀌어도 상관없는 아이템을 배치할때 사용

 

.container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 10px;
}

.item:nth-child(1){
  order: 3;
}
.item:nth-child(2){
  order: 1;
}
.item:nth-child(3){
  order: 2;
}

 

Grid area

• Grid 사용 시 영여겡 이름을 만들어서 배치할 수 있다.

 

.container{
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-gap: 10px;
  padding: 10px;
  background-color: lightskyblue;
  
  /* 배치하기 grid-template-areas: */
  /* 배치할 자리 비울때 none 또는 ... 사용하면된다*/
  /* ''는 한줄이 영역이 된다.*/
  grid-template-areas: 
  'none header header'
  'sidebar-a main sidebar-b'
  'footer footer footer';
}

.grid-item{
  padding: 10px;
  border: 3px solid red;
  background-color: lightgreen;
  font-weight: 900;
  text-align: center;

}

.header{
  grid-area: header;
}
.sidebar-a{
  grid-area: sidebar-a;
}
.sidebar-b{
  grid-area: sidebar-b;
}
.main{
  grid-area: main;
}
.footer{
  grid-area: footer;
}
​

 

object-fit

• img, vido 요소의 콘텐츠 크기를 어떤 방식으로 조절해서 맞출 것인지 지정합니다.

값

1. fill : 요소의 크기에 맞게 꽉 채운다. 대신 가로와 세로 비율이 맞지 않는다.
2. 2.contain : 요소의 가로와 세로 크기에 딱 맞춰서 사이즈를 조정한다. 비율이 고정되어 있다.
3. cover : 요소의 가로와 세로 크기에 딱 맞춰서 사이즈를 조정한다. 비율 고정, 채울 때까지 확대
4. none : 크기 조정안하고 원본사이즈로 처리 크면 자르고 작으면 남는다.

 

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(200px, auto);
  grid-gap: 1rem;

  grid-template-areas: 
  'a1 a1 a1'
  'a3 a2 a4'
  'a5 a6 a7';
}

.owl-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.img1 {
  grid-area: a1;
}

.img2 {
  grid-area: a2;
}

.img3 {
  grid-area: a3;
}

.img4 {
  grid-area: a4;
}

.img5 {
  grid-area: a5;
}

.img6 {
  grid-area: a6;
}

.img7 {
  grid-area: a7;
}

 

.box : 선택자 - 어떤요소를 선택할 것인지(Selector)

width :

height :

--> 어떤속성을 꾸밀지.Property

​

1000px, 150px

--> 값

​

CSS Unit

1. 절대단위

• px 문제 : Container의 사이즈가 변경되어도 콘텐츠가 고정된 값을 유지한다.

​

2. 상대단위

• 단위 : %, em, rem, v*
• v* : view port와 관련된 단위(vw, vh)
• em : 폰트 사이즈를 나타내는 단위(타이포 그레피 = 활자) /
• 폰트패밀에 상관없이 고정된 폰트 사이즈를 가지고 있다.

​

브라우저 기본 font size = 16px 16*8 = 128fontsize

​

rem

• r = root
• 부모 요소가 아닌, root에 따라서 크기가 결정된다.

​

vw, vh

• 100 vw = 뷰 포트 너비의 100%를 사용하겠다.
• 100 vh = 뷰 포트 높이의 100%를 사용하겠다.

​

vmin, vmax

• 50vmin = 브라우저의 너비와 높이 중, 작은 값의 50% 사용한다.
• 50vmax = 브라우저의 너비와 높이 중, 큰 값의 50% 사용한다.

​