TLI- 47

이러다 CSS 장인이 될 것 같아.... ~.~

overflow

• 부모컨텐츠 안에 자식요소의 크기가 더 클 경우

container {
overflow: hidden; -> 잘라버리거나 or
overflow: auto; -> 스크롤 만들어서 내가 직접 내려가게 한다 ...(제일 많이쓰임)
}

text-indent

• 글자를 들여쓰기한다.

.heropy {
	background: url("");
	text-indent: -9999px; ---> 이미지만 넣고 글자를 화면밖으로 배치할때 제일 많이 쓰임.
 }

grid-auto-flow

• 배치하지 않은 아이템을 자동 배치 해줄 수 있는 속성
• grid-auto-flow: row || row dense || dense

.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row || row dense || dense;
}
.item:nth-child(2) {
  grid-column: span 3;
}

repeat () / fr

• grid의 크기가 반복될때 grid-template-row:repeat (3,100px)
  (갯수, 크기)
  
• fr : 크기의 비율

grid의 배치

• container 안에서 자리배치
  align-content: <align-content>; -> 세로 배치
  justify-content: <justify-content>; -> 가로 배치
  <> 안에 center,space-around,space-between 등이 들어갈 수 있다.

• item의 크기 안에서 자리배치
  align-items: <align-content>; -> item 기준 세로 배치
  justify-items: <justify-content>; -> item 기준 가로 배치
  <> 안에 center,space-around,space-between 등이 들어갈 수 있다.

• 각 아이템 마다 다르게 배치하고 싶다면?
  item:nth-child(1) {justify-self: center} - 가로 (행)
  item:nth-child(2) {align-self: space-around} - 세로 (열)