[멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 18 [5주차]

❤️Liked 느낀 점

마지막 과제를 수행하면서 flex와 grid를 번갈아가면서 사용했는데 grid는 개념이 어렵지만 다양한 레이아웃을 만들 수 있어서 반응형 디자인 시 유용하게 쓰여서 과제를 효과적으로 수행할 수 있었습니다!

✏️Learned 공부한 내용

grid 레이아웃

개념

• 핵(Hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS 모듈입니다.
• 웹페이지를 위한 이차원(행,열) 레이아웃 시스템입니다.
• 콘텐츠를 행과 열에 배치할 수 있으며 복잡한 레이아웃을 직접 직관적으로 구축할 수 있는 많은 기능이 있습니다.
• grid는 수평선과 수직선으로 이루어진 집합체로, 디자인 요소를 정렬할 수 있는 대상 패턴을 생성합니다.
• 페이지에서 페이지로 이동할 때 요소가 널뛰거나 너비가 바뀌지 않는 디자인 생성에 도움을 주어 웹 사이트의 일관성을 높여줍니다.

dispaly:grid

<div class="container">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>
	<div class="item">9</div>
</div>

• 부모 요소인 div.container를 Grid Container(그리드 컨테이너)라고 부르고,
  자식 요소인 div.item들을 Grid Item(그리드 아이템)이라고 부릅니다.

.container {
	display: grid;
}

• 아이템들이 block 요소라면 이 한 줄 만으로는 딱히 변화는 없습니다.
• display: grid를 선언하면 한 열 그리드가 생성되므로 일반 흐름에서와 마찬가지로 항목이 다른 항목 아래에 계속 표시됩니다.

grid-template-rows, grid-template-columns

• 컨테이너에 Grid 트랙의 크기들을 지정해주는 속성입니다.
• rows는 명시적 행(Track)의 크기를 정의하고, columns는 열(Track)의 크기를 정의합니다.
• 라인(Line)의 이름도 정의할 수 있습니다.

.container {
  display: grid;
  grid-template-rows: [선이름] 1행크기 [선이름] 2행크기 [선이름] ...;
}

• fr(fraction, 공간 비율) 단위를 사용할 수 있습니다.

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

• repeat() 함수를 사용할 수 있습니다.

.container {
	grid-template-columns: repeat(반복횟수, 반복값);
}

• minmax() 함수를 사용해 최솟값과 최댓값을 지정할 수 있습니다.

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

• auto-fill, auto-fit을 사용해 column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채울 수 있습니다.
  • auto-fill은 남는 공간을 그대로 유지하고, auto-fit은 남는 공간을 축소합니다.

.container.auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.container.auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

grid-auto-flow

• 자동으로 배치되는 방식을 제어하는 속성입니다. 

value	의미	initial 값
row	각 행 축을 따라 차례대로 배치합니다	v
column	각 열 축을 따라 차례대로 배치합니다
row dense(dense)	각 행 축을 따라 차례로 배치하여 빈 영역을 메꿉니다.
column dense	각  축을 따라 차례로 배치하여 빈 영역을 메꿉니다.

gap, row-gap, column-gap

• gap은 각 행과 행, 열과 열 사이의 간격을 지정합니다.
• row-gap은 각 행과 행 사이의 간격을 지정합니다
• column-gap은 각 열과 열 사이의 간격을 지정합니다.

/* 하나의 값으로 통일할 수 있습니다. */
.container {
  gap: 30px;  /* row-gap: 30px; + column-gap: 30px; */
}

/* 하나의 값만 적용하고자 한다면 다음과 같이 사용할 수 있습니다. */
.container {
  gap: 30px 0; /* row-gap */
  gap: 0 30px; /* column-gap */
}

grid container 정렬 속성

align-content

• grid item 집합의 수직 정렬 방식을 설정합니다
• grid content 세로 너비가 grid container보다 작아야 합니다

value	의미	inital 값
normal	stretch와 같습니다	v
start	시작점(위쪽)으로 정렬됩니다
center	수직 가운데로 정렬됩니다
end	끝점(아래쪽)으로 정렬됩니다
space-around	각 행 위아래에 여백을 고르게 정렬됩니다
space-between	첫 행은 시작점에, 끝 행은 끝점에 정렬되고, 나머지 여백으로 고르게 정렬됩니다
space-evenly	모든 여백이 고르게 정렬됩니다
stretch	열 축을 채우기 위해 grid content를 늘립니다.

[CSS] 📚 그리드(Grid) 💯 총정리 (tistory.com)

 justify-content

• grid item 집합의 수평 정렬 방식을 설정합니다
• grid content의 가로 너비가 grid container보다 작아야합니다.

value	의미	inital  value
normal	stretch와 같습니다	v
start	시작점(왼쪽)으로 정렬됩니다
center	수평 가운데로 정렬됩니다
end	끝점(오른쪽)으로 정렬됩니다
space-around	각 열 좌우에 여백을 고르게 정렬됩니다
space-between	첫 열은 시작점에, 끝 열은 끝점에 정렬되고 나머지 여백으로 고르게 정렬됩니다
space-evenly	모든 여백이 고르게 정렬됩니다
stretch	행 축을 채우기 위해 grid content을 늘립니다.

 

align-items

• grid item의 수직 정렬 방식을 설정합니다.
• grid item의 세로 너비가 자신이 속한 grid 행의 크기보다 작아야합니다.

vale	의미	inital value
normal	stretch와 같습니다	v
start	시작점(위쪽)으로 정렬됩니다
center	수직 가운데로 정렬됩니다
end	끝점(아래쪽)으로 정렬됩니다
stretch	열 축을 채우기 위해 그리드 아이템을 늘립니다.

justify-items

• grid item의 수평 정렬 방식을 설정합니다
• gird item의 가로 너비가 자신이 속한 그리드 열의 크기보다 작아야합니다.

value	의미	inital value
normal	stretch와 같습니다	v
start	시작점(왼쪽)으로 정렬됩니다
center	수평 가운데로 정렬됩니다
end	끝점(오른쪽)으로 정렬됩니다
stretch	행 축을 채우기 위해 gird item을 늘립니

grid item 속성

grid-column

• grid-column-start과 grid-column-end의 단축 속성입니다.
• item이 차지할 열의 위치와 개수를 지정합니다

.item {
  grid-column: <grid-column-start> / <grid-column-end>;
}

grid-row

• grid-row-start과 grid-row-end의 단축 속성입니다.
• item이 차지할 행의 위치와 개수를 지정합니다

.item {
  grid-row: <grid-row-start> / <grid-row-end>;
}

grid container 집중식 레이아웃 관리

• grid 레이아웃 시스템
  • grid container(부모 요소)에서 대부분의 레이아웃 작업을 수행합니다.
  • 자식 요소에 대한 레이아웃 관련 작업을 최소화합니다.
• grid container의 역할
  • 레이아웃의 중심으로 기능하며, 대부분의 정의와 조정이 이곳에서 이뤄집니다.
• 자식 요소의 단순화
  • 개별 grid item에 대한 직접적인 레이아웃 조직이 줄어듭니다.
• MarkUp 간소화
  • 추가적인 마크업 요소나 복잡한 중첩 구조가 필요 없습니다
  • HTML 구조가 간결하게 구성됩니다.
• 가상의 컨테이닝 블록 생성
  • grid-template-columns와 grid-template-rows 속성에 의해 nxn 구조의 컨테이닝 블록이 생성됩니다.
  • 요소 검사 기능을 통해 실제 하위 요소 없이 생성된 블록을 확인할 수 있습니다.
• 하위 요소 추가
  • grid-container 내에 여러 개의 실제 grid item을 추가할 수 있습니다
  • 초기값은 justify-items: normal과 align-items: stretch로 설정되어, 하위 요소가 각 블록을 가득 채웁니다.
• 정렬 속성
  • justify-items와 align-items를 통해 하위 요소의 정렬을 조정할 수 있습니다.
  • margin: auto를 사용하여 직접 정렬할 수도 있습니다
• 전체 콘텐츠 정렬
  • justify-content와 align-content는 그리드 전체의 콘텐츠를 컨테이너 내에서 어떻게 배치할지를 결정할 수 있습니다.

😔Lacked 부족한 점

day 17부터 grid 개념을 본격적으로 배우기 시작했는데 flex보다 개념이 복잡하고 어려운 것 같습니다 ㅠㅠ

그리고 최근 들어서 키보드와 마우스를 사용할 때 간혹가다 손목 저림이 느껴지고 딱딱한 의자에 앉아서 장시간 코딩하다보니 허리랑 엉덩이뼈가 아파서 강의를 듣다보면 온몸이 찌뿌둥해집니다..

🙏🏻Longed For 앞으로 바라는 점

• 손 건강을 위해 책상 팔 거치대, 키보드, 마우스 손목 보호 쿠션 알아보기
• 의자 알아보기
• 중간중간 스트레칭 꼭 하기