20220928 웹프실 과제

CSS 공부

Grid

<div class="container">
	<div class="item">A</div>
	<div class="item">B</div>
	<div class="item">C</div>
	<div class="item">D</div>
	<div class="item">E</div>
	<div class="item">F</div>
	<div class="item">G</div>
	<div class="item">H</div>
	<div class="item">I</div>
</div>

시작

css에 display: grid;

그리드 형태 정의

열 배치 : grid-template-columns

px로 지정 : grid-template-columns: 200px 200px 500px;

fr(비율)로 지정 : grid-template-columns: 1fr 1fr 1fr 1/3, 1/3, 1/3 로 하겠다는 소리.

.container {
  # 시작
	display: grid;

	# 그리드 형태 정의
  # grid-template-columns : 열의 배치
  grid-template-columns: 200px 200px 500px;
	/* grid-template-columns: 1fr 1fr 1fr */
	/* grid-template-columns: repeat(3, 1fr) */
	/* grid-template-columns: 200px 1fr */
	/* grid-template-columns: 100px 200px auto */

  # grid-template-rows : 행의 배치
	grid-template-rows: 200px 200px 500px;
	/* grid-template-rows: 1fr 1fr 1fr */
	/* grid-template-rows: repeat(3, 1fr) */
	/* grid-template-rows: 200px 1fr */
	/* grid-template-rows: 100px 200px auto */
}

아이템 위치시키기

grid-column-start가 시작 번호, grid-column-end가 끝 번호. 그리고 이 둘을 grid-column으로 한번에 쓸 수 있음.

.item:nth-child(1) {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
}

위의 코드는 아래와 같이 한번에 쓸 수 있음. 똑같은 코드임.

.item:nth-child(1) {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
}

flex 이용해서 가운데 중앙 정렬하기

style = "height: 100%; display: flex; align-items: center; justify-content: center;"

가로로 정렬되는거 세로로 바꾸고 싶으면, flex-direction: column; 추가.

style = "height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;"