더북(TheBook)

다음으로 About Me 영역은 본문의 왼쪽과 오른쪽 너비를 100%로 변경합니다.

13/end/css/media.css - 해상도 1140px 이하일 때 About Me 영역

@media screen and (max-width:1140px){
  (중략)
  /* About Me 영역 왼쪽 너비 50% -> 100% 변경 */
  section .about-self .left{
    width:100%;
    margin-bottom:1.5rem;
  }
  /* About Me 영역 오른쪽 너비 50% -> 100% 변경 */
  section .about-self .right{
    width:100%;
    padding:0;
  }
}

CSS 코드를 적용하고 나면 화면 너비가 1140px보다 작아질 때 화면이 다음처럼 보입니다.

그림 13-18 About Me 영역 반응형 처리 결과

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.