sohyeon kim

💡 그리드 속성 몇 개 더 알아보자. 기본 세팅! .container { display: grid; height: 500px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); } ✳️ align-items : 플렉스박스 방식에서와 유사한 역할을 한다. 그리드 컨테이너 행 트랙의 높이, 수직축(열)을 기준으로 그리드 아이템의 배치를 결정한다. ✳️ align-self : 각각의 그리드 아이템이 어떤 식으로 배치될 것인지를 스스로 결정 속성값 의미 stretch 기본값! 그리드 아이템들이 트랙 높이만큼 확장된다. start 트랙 상단으로부터 하단을 향해 배치 end 트랙 하단으로부터 상단을 향해 배치 center 할당된..

💡 flexbox : 행 or 열을 주축('가로 ➡️' 가 기본값)으로 설정해 웹 요소를 배치 / 정렬하는 1차원 레이아웃 방식 플렉스 컨테이너 : 플렉스박스 방식으로 레이아웃을 결정할 요소, ul 플렉스 아이템 : 플렉스 컨테이너 내부에서 플렉스박스 방식으로 배치되는 요소, li 고양이 강아지 오리 달팽이 고라니 * { box-sizing: border-box; } body { margin: 0; } #first-ul { display: flex; padding: 0; list-style: none; height: 300px; } 먼저 기본으로 이렇게 flex 를 설정해 주면 ⬇️ 한줄로 정렬된다! ⬇️ display: flex 는 기본적으로 블록레벨 속성, 그 줄을 전체 차지함 ⬇️ display: ..