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로 설정하고, 그리드가 더 큰 경우 자동으로 열의 크기를 조정하여 동일한 너비의 열을 가지