Day028

부모 요소에 flex 속성을 지정해줘야 자식 요소들에 효과가 전달된다.

그리드 레이아웃

flex : 자식 요소가 flex 속성으로 변경되는 것
inline-flex 자식 요소가 아닌 자체에 걸리는 속성

grid-template-columns: 1fr 1fr 1fr; 비율로 생성

grid-template-rows: repeat(3, 50px); 반복생성
grid-template-rows: minmax(55px, 70px); 최소 최대 크기 지정하기
grid-template-columns: repeat(3, minmax(70px, auto));

그리드 > div 안의 요소의 중앙으로 정렬하는 방법
.item {
width: 100%;
height: 100%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}

auto-fill, auto-fit

그리드 레이아웃 행과열 이름으로 지정 후 부여할 아이템에 속성값을 지정하기

	grid-template-areas:
            "header header header"
            "nav nav nav"
            "aside main main"
            "footer footer footer";

	#header {
            grid-area: header;
        }
        ...

미디어 쿼리(반응형 웹페이지를 위한)
@media only screen and (max-width:800px) {
.content {
width: 50%;
}
.content p {
font-size: 0.7rem;
}
}