[카카오테크캠퍼스 선택과정] 애플 예제: 반응형 웹사이트

1. @media

      

      

      

    
    

      <css />
    
.box {
  width: 1200px;
  height: 150px;
  margin: 50px;
  border: 10px solid black;
  background-color: orange;
}
/* @media 타입 and (기능) { 스타일 } */
@media screen and (max-width: 1260px) {
  .box {
    width: auto;
    height: 200px;
    background-color: red;
  }
}
@media screen and (max-width: 800px) {
  .box {
    height: 300px;
    background-color: royalblue;
  }
}

1.1. orientation

      

      

      

    
    

      <css />
    
@media (orientation: portrait) {
  .box {
    width: auto;
    height: 200px;
    background-color: red;
  }
}

portrait : 평상 시 핸드폰 상태(가로 > 세로)

landscape : 영상 볼 때 핸드폰 상태(가로 < 세로)

---

2. Breakpoints

Breakpoints(중단점)에 해당하는 css 파일을 따로 만들어 사용할 수 있다.

Breakpoints가 너무 많지 않게 작성하는 것이 관리하기에 용이하다.