생각하다 생각하다

justify-content 1. display 2. justify-content 3. align-items justify 사용 조건 1. 적용시킬 엘리먼트를 하나의 부모로 감싼다. 엘리먼트1 엘리먼트2 2. 부모 엘리먼트에는 display: flex 속성이 반드시 존재해야 한다. .container { display: flex; justify-content: space-between; } center : 중앙 정렬 space-between : 사이드 정렬 space-around : 두 엘리먼트에 일정한 간격을 준 정렬 flex-direction column : 수직 정렬 column-reverse : 엘리먼트 순서가 반전된 수직 정렬 row : 수평 정렬 row-r..

Text-align : block 요소 안의 inline 요소에만 적용할 수 있음 - text-align : right 오른쪽 정렬 - text-align : left 왼쪽 정렬 - text-align : center 중앙 정렬 - text-align : justify 왼쪽과 오른쪽 열에 맞추어 화면을 늘어뜨림

/* 부모 컨테이너 band */ .band { width: 90%; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr; grid-template-rows: auto; grid-gap: 20px; } max-width: 최대 너비 width: 너비 display: 그리드 사용 gird grid-template-columns: 화면 가로 길이 gird-template-rows: 화면 세로 길이, auto : 아이템 개수만큼 늘어나도록 grid-gap: 아이템 간 간격 /* 휴대폰 화면 */ @media screen and (max-width: 500px){ .band { grid-template-columns: 1fr ..