반응형 웹디자인의 기본 알아보기

안녕하세요 엔디프 입니다.

오늘은 반응형 웹디자인에 대해 알아보겠습니다.

그냥 반응형 웹디자인이라고 하니까 좀 막연하시죠?

제가 분석한것은 반응형 코딩을 하는 기본 방식과
익스 하위버전에서 반응형 코드를 인식하는 방법입니다.

저도 html5와 미디어쿼리를 가지고 익스 하위버전에 맞추고 싶진 않은데요..

어쩌겠어요.. 우리나라는 아직 이런걸 원하는데요 ^^;;

간단하게 반응형 웹을 알기전에 알아야 할것들이 있습니다.

1. 프레임워크란?

프레임워크란 반응형 웹디자인을 쉽게 만들어 줄수있게 만들어주는 도구이며 여러가지가 존재한다. 그중에서도

부트스트랩, 파운데이션, 스켈렉톤 등이 있다. 

* 참조사이트 http://gokgo.tistory.com/96

반응형 웹디자인을 하실때 참고할 사이트 예제 입니다.

• http://alistapart.com/article/responsive-web-design
• http://seesparkbox.com/work
• http://colly.com/about/
• http://foodsense.is/
• http://blog.teamtreehouse.com/getting-started-bower

2. 반응형 웹과 적응형 웹의 차이점

쉽게 말해서 반응형웹은 모든 해상도에 유동적으로 반응하는 형태 입니다. 그리고 적응형웹은 각 해상도에 맞춰서 분기별로 조건을 걸어서 해상도에 맞는 형태를 제공합니다.

• ** 반응형 웹과 적응형 웹은 개념이 다르니까 잘 구분하셔야 합니다.
• 
  
• 그러면 지금부터 반응형 웹을 해보는 간단한 코딩을 해보도록 하겠습니다.

/* ----- 공통 ----- */

/* ----- Only Desktop ----- */
@media all and (min-width:1225px) {
 
}

/* ----- Only Tablet ----- */
@media all and (min-width:768px) and (max-width:1224px) {

}

/* 모바일 전용 */
@media all and (max-width:767px) {

}

이것은 반응형 코딩의 기본 수식으로서 style.css 에 추가하면 됩니다.

@ midia 의 조건식은 반응형 웹디자인 코딩의 핵심이며 뒤에 붙는  width값이 기준 가로값입니다.

이수치는 필요에 따라서 변동이 가능하며 em 단위로도 입력이 가능합니다.

그렇다면 이 코드를 이용해서 간단한 코딩을 하나 해보도록 하겠습니다.

프로그램은 가볍게 드림위버를 사용하도록 하겠습니다.

정말 간단하게 백그라운드와 텍스트 하나 입력해보았습니다.

body {margin:0; padding:0}

#wrap {width:1000px;; height:300px; margin:0 auto; background:#000}

#wrap p {color:#fff; margin:0; padding:0}

/* ----- Only Desktop ----- */
@media all and (min-width:1225px) {
 
}

/* ----- Only Tablet ----- */
@media all and (min-width:768px) and (max-width:1224px) {

}

/* 모바일 전용 */
@media all and (max-width:767px) {

}

반응형 조건식 안에는 아무것도 넣지 않았습니다.

조건식 외에 부분에 넣는다는것은 어떤 상황에서든 영향을 받지 않는 공통 코드를 이야기 합니다.

그렇다면 지금부터 이 화면을 줄였을때 화면의 색상과 텍스트를 바꿔 보겠습니다.

화면을 줄이자 색상과 백그라운드 크기가 바뀌었습니다.

body {margin:0; padding:0}

#wrap {width:1000px;; height:300px; margin:0 auto; background:#000}

#wrap p {color:#fff; margin:0; padding:0}

/* ----- Only Desktop ----- */
@media all and (min-width:1225px) {
 
}

/* ----- Only Tablet ----- */
@media all and (min-width:768px) and (max-width:1224px) {

#wrap {width:95%;; height:300px; margin:0 auto; background:#f9f9f9}

#wrap p {color:#000; margin:0; padding:0}

}

/* 모바일 전용 */
@media all and (max-width:767px) {

}

비밀은 조건식안의 코드입니다.

768px ~ 1224px 사이는 태블릿 피시 기준의 사이즈이며 가로값은 태블릿 환경에 맞게 퍼센트로 변경

색상을 변해주면 사이즈가 줄었을시에 반응합니다.

문제는 여기서 부터입니다.

여기서 마지막으로 풀어봐야 할 문제는 반응형웹디자인을 익스 하위버전에 인식시켜보는것입니다.

사실 원래 반응형 웹디자인은 익스7 및 익스 하위버전을 위해 나온것이 아니며 전혀 맞출 필요가 없음에도 불구하고 우리나라 대한민국의 현실상 아직도 익스 7 8을 요구하는 클라이언트가 많은 관계로 필요악으로 맞추는 작업을 많이 하고 있는 실정입니다. 저도 반응형 웹디자인을 익스 하위버전에 맞추기 위해서 정말 많은 시간을 고생했었습니다. 

먼저 반응형 코드인 미디아 쿼리를 익스 하위버전에 인식시키고 html5의 코드를 인식시키는 작업이 필요하며 이때 필요한 스크립트 파일이 두가지입니다.

respond.min.js html5shiv.js 이 두가지 파일이 필요하며 첫번째 respond.min.js 파일은 익스 하위버전에서 미디어 쿼리를 인식시켜주는 스크립트 이며 html5shiv.js 는 html5의 마크업을 익스하위버전에서 인식시켜주는 코드이지만 100% 인식시키지는 못합니다. 어쨌든 최소한 틀 전체가 깨지는것을 방지할수는 있으니 다행이라고 생각합니다.  이 두가지 스크립트를 넣는데는 몇가지 규칙이 있습니다. 1. 미디어쿼리가 들어가있는 스타일시트는 반드시 링크로 걸어줄것 2. media=screen 이라고 되어있는 부가요소를 스타일쉬에 링크 등에 넣지 말것 3. 해당 스크립트는 css 링크 코드 밑으로 넣을것  이것만 지켜주시면 되며 간혹 스크립트 오류가 나는 경우가 있는데 이것은 기존 스크립트와의 충돌 여부에 대한 문제이며 이런 문제는 부딪혀서 해결을 봐야 하는 문제이므로 생략하도록 하겠습니다. html5shiv.js

respond.min.js