한 번에 끝내는 파이썬 웹 개발 초격차 패키지 111일차

웹 & 프론트엔드 기본

GitHub 예제

반응형 - @media

---

Code Pen 활용

 

Create a New Pen

HTML

<div class="box"></div>

CSS

.box {
  width: 500px;
  height: 100px;
  background-color: royalblue;
  transition: 1s;
}
@media (max-width: 600px) {
  .box {
    width: 200px;
    height: 200px;
    background-color: orange;
  }
}

반응형 적용 전

반응형 적용 후

---

오늘은 가볍게 반응형 미디어 쿼리를 통해서 변화하는 과정을 살펴보는 시간을 가져보았다. 테스트를 위해서 코드 펜을 활용하였으며 실시간으로 변경되는 것이 좋은 예제인 것 같다. 예전에 반응형의 거부감이 들었던 기억이 있다. 글을 다 입력했는데 반응형을 입혔지만, 글이 다 깨져 나가는 것을 볼 때 실망을 많이 했다. 그런 생각도 했다. 반응형을 처음부터 먼저 잡고 시작해야 하나 해서 그렇게도 진행했지만, 결과는 실패! 어렵게만 느껴졌었다. 당시 적용했던 반응형이 모바일 패드 PC 버전이었지만 원하게 배치하기란 쉽지 않다는 것을 알 수 있었다.

111일 차는 여기서 마무리하고자 합니다.

패스트캠퍼스 링크 :https://bit.ly/37BpX

패스트캠퍼스 [직장인 실무교육]