1. 학습내용

오늘도 이어서 반응형을 더 배워 보았다.

@charset "uft-8"; /*어느 언어로 해석할지 미리 정해줌. 이걸정하지 않으면 글자가 깨져서 나옴.*/
body, h1, p{
   margin: 0;
   padding: 0;
}

p{font-size: 40px;}
/* position:static fixed */
.intro{
   width: 100%;
   height: 80px;
   display: flex;
   position: fixed;
   /* border: 1px solid red; */
}

.intro h1{
   width: 50%;
   height: 100%;
   background-color: cadetblue;
}

.intro nav{
   width: 50%;
   height: 100%;
   background-color: yellowgreen;
}

.intro nav ul{
   list-style: none;
   display: flex;
   margin: 0;
   padding: 0;
}

.intro nav ul li{
   width: 33.3333%;
   height: 100%;
   height: 80px;
}

.intro nav ul li:nth-child(1){
   background-color: slateblue;
}

.intro nav ul li:nth-child(2){
 background-color: aquamarine;
}

.intro nav ul li:nth-child(3){
   background-color: royalblue;
}

.main{
   width: 100%;
   height: 500px;
   background-color: tomato;
   padding-top: 100px;
}

/* 768px 보다 작을때 header가 2단으로 바뀌도록 하라 */
@media (max-width:768px) {
   .intro{
      height: 160px;
      flex-direction: column;
      position: static;
   }
   .intro h1,
   .intro nav{
      width: 100%;
   }
   .main{
      padding-top:0;
      background-color: antiquewhite;
     }
   p{  font-size: 24px;}
}

미디어쿼리를 썼을때 헤더에 있는 메뉴를 가로길이가 768px보다 작을 때 아래로 내려오게 만드는 방법이다.
flex로 처음부터 정렬했다면, @media를 썼을때, flex 방향만 세로로 바꾸면 되고, 가로길이도 다르게 지정해주면 아래와 같이 내려가는 것을 알 수 있다.

• 원래 레이아웃

-해상도가 768px 보다 작아졌을때 정렬.

다음으로 그리드 레이아웃에 대해 배웠다.
그리드 레이아웃 디자인 방법:

-가변 그리드 레이아웃
->너비값 고정후 백분율과 같은 가변 값으로 지정
-float 속성
-flex box layout
-css 그리드 레이아웃

:2차원배치 (수평/수직으로 몇개의 박스를 얼마의 크기로 배치할지?)

먼저, 가변 그리드 레이아웃을 실습해 보았다.
첫번째로 세로 줄 수를 지정해서 해상도가 커질 수록 세로줄이 2줄, 3줄, 4줄로 가게끔 하는방식이다.

#columns{
   column-count: 2;
   column-gap: 10px;
}

/* 900px 이상 */
@media (min-width:900px) {
   #columns{
      column-count: 3;
   }
}
/* 1180px 이상 */
@media (min-width:1180px) {
   #columns{
      column-count: 4;
   }
}

다음은 display:grid 를 해서 적용하는 방법이다.

#wrapper{
   display: grid; /*grid, grid-inline*/
   grid-template-columns: repeat(2, 300px);
   grid-template-rows: minmax(220px auto);
   grid-gap: 10px 10px;
   justify-content: center;
}
/* 900px 이상 */
@media (min-width:900px) {
   #wrapper{
      justify-content: center;
      grid-template-columns: repeat(3, 200px);
   }
}
/* 1180px 이상 */
@media (min-width:1180px) {
   #wrapper{
      justify-content: center;
      grid-template-columns: repeat(3, 200px);
   }
}

2. 어려웠던 점 및 해결방안.

그리드를 처음하기에 생소한 개념들이 있었는데, 아래에 개념을 정리해 보았다.

  grid-template-columns: repeat(2, 300px);
  grid-template-rows: minmax(220px auto);

grid-template-columns: repeat(2, 300px);
위는 열을 2열로 하고, 가로길이를 300px로 동일하게 하고 싶을때 repeat를 써준다.

grid-template-rows: minmax(220px auto);

최솟값과 최댓값을 지정할 수 있는 함수.
minmax(220px, auto)의 의미는 최소한 220px, 최대는 자동으로(auto) 늘어나게 한다. 즉 아무리 내용의 양이 적더라도 최소한 높이 220px은 확보하고, 내용이 많아 220px이 넘어가면 알아서 늘어나도록 처리해 준 예시이다.
출처: https://studiomeal.com/archives/533

원페이지 레이아웃도 만들어 보았는데 생소한 font-size 단위가 나와서 아래 정리해 보았다.

• vw와 vh

.container{
   height: 100vh;
}

만약 타켓 요소의 너비값과 높이값을 뷰포트의 너비값과 높이값에 맞게 사용하는 것을 말한다.
예를 들어 브라우저 높이값이 900px일때 1vh는 9px이라는 뜻이다.
위의 예제는 100vh;이라고 되어 있는데, 최대 높이만큼 화면에 꽉채우는 것을 말한다.

출처: https://webclub.tistory.com/356 [Web Club]

• overflow: auto;
  scroll-snap-type: y mandatory;
  스크롤 시 원페이지 사이트에서 조금만 휠을 돌려도 바로 아래 화면으로 넘어가게 해주는 기능이다.
  각 섹션을 감싸는 부모태그에 scroll-snap-type: y mandatory;을 써주고, 내용이 보이지 않을때 스크롤바가 생기게 overflow:auto를 적는다. (이걸 적지 않으면 자연스레 넘어가지 않는다.)
  

그리고 자식 태그에 scroll-snap-align: start;만 적어주면 적용이 된다.
그러니까 y축의 시작부분부터 스크롤 되게 한다는 의미이다.

3. 학습소감.

그리드에 대해 자세히 배울 수 있었다. 단순히 열을 늘이고 싶다면, 간단한 코드를 한줄 추가하면 되는게 간편해 보였다.

-추가로 오늘 과제:
https://github.com/AmyKim11/homework/tree/AmyKim11-patch-1/one-page_%EA%B9%80%EC%9C%A0%EB%AF%BC