codestates/section4
과제 반응형 웹사이트
나아눙
2023. 3. 16. 22:28
과제1
// 1. 브라우저 창의 너비가 800px 이상이거나, 화면이 가로 방향일 때 h1, h2의 색상이 변경되도록 구현
@media screen and (min-width: 800px ), screen and (orientation: landscape ) {
.main-title, .sub-title {
color:pink;
}
}
// 2. 브라우저의 화면이 세로 방향일 때 h1, h2의 색상이 변경되도록 구현
@media not all and (orientation: landscape ) {
.main-title, .sub-title {
color: blue;
}
}
// 3. 브라우저가 최소 1000px일 때, background의 색을 바꾸고, 고양이 사진들을 반응형 레이아웃을 구현
@media screen and (min-width: 1000px) {
body {
background-color:pink;
}
.display-box {
display:grid;
grid-template-columns: 1fr 1fr 1fr;
}
}
// 4. 브라우저가 최대 1000px일 때, background의 색을 바꾸고, 고양이 사진이 중앙에 위치하도록 구현
@media screen and (max-width: 1000px) {
body {
background-color: blue;
}
.display-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
.girid{
display:grid;
grid-template-colums : repeat(auto-fill / auto-fit ,
}
grid-template-columns 속성은 그리드 컨테이너 내의 열(column)의 크기와 수를 정의
repeat() 함수를 사용하여 auto-fill 또는 auto-fit 값과 함께 열의 크기를 설정
repeat() 함수를 사용하여 12개의 열을 생성하며, minmax() 함수를 사용하여 열의 크기 범위를 설정
auto-fill 값은 가능한 많은 열을 그리드에 채우되,
그리드의 크기를 벗어나지 않도록 열의 크기를 자동으로 조정합
즉, 그리드에 빈 공간이 생기면 자동으로 열을 추가한다.
auto-fit 값은 auto-fill과 유사하지만, 빈 공간을 채우기 위해 열의 크기를 늘리는 대신,
그리드 크기를 줄여 열의 크기를 조정합니다. 즉, 그리드 크기가 작아지면 열의 수를 줄인다.
grid-template-colums : repeat(12,minmax(250px,1fr));
grid-template-columns 속성은 12개의 열을 생성하며, 각 열의 최소 크기를 250px로 설정하고, 그리드가 더 큰 경우 자동으로 열의 크기를 조정하여 동일한 너비의 열을 가지