(HTML/CSS)22.12.15_반응형 웹 디자인

---

우선 반응형 웹 디자인을 하기 위해선 마크업을 잘 해야한다. 

(마크업 이란.  태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지로 HTML에선 HTML구조를 짜는 과정을 말함)

 

완성된 모습

---

 

web 완성본 모습

모바일 완성본 모습

---

코드리뷰

먼저 가장 눈여겨 봐야할 점은 모바일과 웹의 모습을 순차적으로 본다면 순서가 다르다. 

이럴땐 order: -1   을 이용하여 순서를 바꿔줘야 한다.

 

코드를 보면

 

위에서 순서대로 1,2,3,4 순으로 작성했다. 

 

모두 웹사이트상을 기준으로 작성했다고 생각하면 편하다. 이제 우리는 모바일을 위해 마크업의 순서를 살짝 변경해줄거다. 뭐를이용해서? 

order : -1; 속성을 이용해서. 

order 속성을 -1 주면 우선순위가 먼저로 바뀌게 된다. 따라서 모바일의 로그인, 회원가입에 해당하는 2번

memberOnly 클래스에 order: -1; 속성을 줘서 순서를 우선되게 한다. 

justify-content : flex-end; 속성은 우측 끝으로 모두 붙게 하는 속성.

 

---

RWD 반응형 웹 디자인

우선 간단히 CSS 에서 작성하는 방법

/* 모바일 디바이스 (Mobile Device)  @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
@media (min-width: 320px) and (max-width: 768px) {
    /* 모바일 헤더 */
    .appHeader {
      background: var(--primary-color);
      color: var(--white);
    }
}

/* 데스크탑 디바이스 (Desktop Device) @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
@media (min-width: 769px) {
    /* 데스크탑 헤더 */
    .appHeader {
        max-width: var(--container-width);
        margin-left: auto;
        margin-right: auto;
        
    }
}

이런식으로 @media 를 선언하고 최솟값이나 최댓 값을 지정해준 후 {} 안에 코드들을 똑같이 작성하면 된다.