[수업 5월 4주 1일차] 반응형 레이아웃

김유민·2022년 5월 23일

대구 A.I. 스쿨

목록 보기

28/90

1. 학습내용

오늘은 반응형 레이아웃에 대해 배웠다.
미디어쿼리로 작성해 해상도 마다 스타일을 다르게 적용시켜주는 것을 의미한다.

@charset "uft-8";

html, body{
   margin: 0;
   padding: 0;
}
.media-menu{
   list-style: none;
   margin: 0;
   padding: 0;
   width: 700px; /*메뉴 폭*/
   background-color: black;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

/* a 링크 초기값 설정 */
.media-menu a{
   color: white;
   text-decoration: none;
}

/* 메뉴 항목에 대한 설정 */
.media-menu li{
   width: 150px;   
   background-color: aliceblue;
   border: 5px solid red;
   padding: 5px;
   text-align: center;
}

/* 폭이 768이하일 때 아래 적용 */
@media (max-width:768px) {
   .media-menu{
       flex-direction: column;
       align-items: flex-start;
       width: 170px; /*content(150) + border(10)+ padding(10)*/
   }
   .media-menu li{
      margin-bottom: 10px;
   }
   .media-menu li:last-child{
      margin-bottom: 0;
   }
}

보통은 화면크기가 제각각이라 해상도를 정하기 어렵지만, 표준으로 스마트폰과 테블릿 pc, 데스크탑. 이 세가지를 기준으로 많이 지정해 준다.
320px ~ 768px미만 : 모바일 기기
768px ~ 1024px미만 : 태블릿
1024px~ :pc

@charset "utf-8";

/* 모바일 코드 */
h1{
   font-size: 20px;
   background-color: blue;
}

/* 모바일 퍼스트로 작성해보자- 미디어쿼리 작성시
작은화면-> 큰 화면 ==> min-width를 사용 */

/* 최소 768px 이상일때 적용:태블릿 */
/* 미디어 쿼리 연속 사용시 max-width:1023px 이 있는 것과 마찬가지 이므로 생략가능 */
@media (min-width:768px) /*and (max-width:1023px)*/{
   h1{
      font-size: 40px;
      background-color: pink;
   }
}
/* 최소 768px 이상일때 적용:pc */
@media (min-width:1024px){
   h1{
      font-size: 80px;
      background-color: gray;
   }
}

장점과 단점으로는 아래와 같다.
장점.
1) 모든 기기에서 접속 가능
2) 가로모드에 맞춰 레이아웃 변경 가능
3) 사이트 유지 관리 용이
4) 최신 웹 표준 따름

단점.
1) 사이트 디자인이 단순
2) 하위 버전 브라우저와 호환성 문제 있을 수 있음-> 미디어쿼리는 CSS3 기술

2. 어려웠던 점 및 해결방안.

미디어쿼리에서 최소 가로길이, 최대 가로길이를 지정해 주는것 이외에 세로에 대한 스타일도 따로 줄수 있다는 것을 새롭게 배웠다.

/* landscape : 단말기 가로 방향
portrait: 단말기 세로 방향 */
@media screen and (orientation:landscape){
   body{
      background-color: orange;
   }
}
@media screen and (orientation:portrait){
   body{
      background-color: crimson;
   }
}

->가로방향 스타일