반응형 웹 퍼블리싱(1)

반응형 웹 디자인이란?

브라우저 사이즈에 맞춰 레이아웃이 바뀌는 것

 

장점

따로 모바일이나 태블릿 버전을 만들 필요가 없다. 

 

방법

 

#div1 {
  background-color: #ff0000;
  height: 60px;
  width: 100%;
}

#div2 {
  background-color: #ffa500;
  height: 350px;
  width: 100%;
}


@media(min-width : 768px) {
      div {
        float: left;
      }
      #div2 {
        height: 562px;

      }
  }

@media(min-width : 768px)의 의미는 

가로 길이가 768px 이상이면 아래의 스타일을 적용하라는 것이다. 

 

여기서는 브라우져의 크기가 768px이 넘어가면

모든 div 태그에는 float:left를 

div2를 id로 갖는 태그는 높이를 562px로 적용한다.

 

이 때 float란?

 

float 속성은 요소를 페이지 왼쪽이나 오른쪽에 삽화처럼 배치하고,

그 주변으로 인라인 요소들을 배치할 수 있다.