220524) 반응형 웹(2)

학습한 내용

그리드 레이아웃 디자인

간단히 말해서 보이지 않는 모눈종이를 그리는 것과 비슷하다.

• 시각적으로 안정적인 디자인
• 단순한 웹 디자인
• 원하는대로 배치가능

디자인 방법

1. 가변 그리드레이아웃
   너비값 고정 후 백분율과 같은 가변값으로 지정
2. float 속성
3. Flex box layout
4. css 그리드 레이아웃
   2차원 배치(수평/수직으로 몇개의 박스를 얼마의 크기로 배치할지?

column

column-gap: 열 사이의 간격 | row-gap: 행 사이의 간격

#columns{
    column-count: 2; /*한 줄에 2개*/
    column-gap: 10px; /*간격 10px*/
}

column-count: ; 칼럼 수 지정 - 한 줄에 몇 개를 나타낼지
column-gap: ; 칼럼 사이 간격 지정

grid

#wrapper{
    display:grid; /*grid, gird-inline */
    grid-template-columns: repeat(2, 200px);
    grid-template-rows: minmax(220px auto); 줄높이 최소 220px 
    grid-gap: 10px 10px;
    justify-content: center;
}

display: grid -그리드 선언
grid-template-columns -열 크기
grid-template-rows - 행 크기
repeat(), minmax() 최소값과 최대값
grid-gap: ; - 칼럼과 줄 사이 간격

---

기타

• 평소에 웹사이트 만들면서 잘 안됐던 부분인데
  오늘 수업에서 방법을 알았다.
  헤더와 섹션이 겹쳐져서 섹션이 가려지는 현상인데
  padding-top:을 적어서 헤더 높이만큼
  패딩을 넣어주면 쉽게 해결된다는 것을 알았음

• scroll-snap-align : 스크롤 할 때 달라붙는 속성

scroll-snap-align: start;

---

학습한 내용 중 어려웠던 점 또는 해결못한 것들

해결 못할 건 없었고 그리드를 쓰는 건 처음 접해서인지 아직 감이 잘 안왔다.
중간에 오타가 나면 적용이 안돼고 찾기가 정말 힘들었다.

해결방법

적재적소에 잘 쓰려면 많이 만들어봐야 할것같다.

학습 소감

한꺼번에 배치를 할 수 있으니까 간격이 일정해서 깔끔해 보이고
포토갤러리 같은 것도 만들 수 있을 것 같아서 굉장히 유용하게 쓰일 내용인것 같았다.