반응형 웹 레이아웃 주의사항 _1

반응형 웹 레이아웃을 구상하기 전에 다음과 같은 부분들을 알고 구상을 하면 반응형 프로젝트를 좀 더 시간을 단축  할 수 있고 좀 더 효율적인 화면이 탄생 될 것이라 생각합니다.

반응형 웹이란 쉽게 이야기하면 하나의 html 요소들을 css(media query)를 이용하여 PC, 모바일, 태블릿 화면에  알맞는 레이아웃을 표현 해 주는 것입니다.

여기서 더 간단히 요점만 말하자면 기본 하나의 뼈대로 PC일때, 모바일 일때, 태블릿 일때 옷 만 바뀌는 것입니다.(긴팔에서 반팔, 무지 t셔츠가 스프라이트 t셔츠로..이런느낌 입니다.)

뼈 들이 움직이지는 못하고 뼈를 감싸고 있는 옷만 바뀌는 것이기 때문에  레이아웃을 표현 하는데 어느 부분은 제한적인 부분들이 있습니다. 제가 정리하고 싶은 부분은 이런 제한적인 부분들입니다. 

제한적인 부분들을 알고 반응협 웹 레이아웃을 기획을 하게 되면 좀 더 수월하고 더 효율 적인 반응형 웹 레이아웃이 탄생 될 것이라 생각합니다.(기획자와 퍼블리셔가 좀더 빠르게 반응형 웹 프로젝트를 수행 할 수 있을 것입니다.)

지금까지 반응형 프로젝트를 수행하면서 제가 알게된 부분들은 다음과 같습니다.(갑자기 생각하려니 많이 생각이 안납니다;;; 생각 나는대로 업데이트 하겠습니다.)

1. 좌,우 컨텐츠를 우,좌 로 바꿀 수 있지만, 위, 아래 컨텐츠를 아래, 위로 바꾸기는 어렵습니다.

2. table 태그에서 rowspan, colspan을 css로 컨트롤 할 수 없습니다.

3. css가 아닌 jquery  로 추가한 스타일들은 css로 제어 하려면 !import로 컨트롤 해야 합니다.

1번의 경우는 다음 이미지를 확인 부탁드립니다.

[모바일 화면]

[pc 화면]

참고 이미지를 확인을 해 보면 오른쪽의 html 요소들은 변함이 없는데 모바일 화면일 때는 왼쪽의 노란색 컨텐츠가 PC 화면에서 오른쪽으로 바뀐 것을 확인 할 수 있습니다. 이런 부분들은 css 의 float 이라는 property로  컨트롤 할 수 있습니다.

다음은 위, 아래 컨텐츠 입니다.

다음과 같이 위, 아래 컨텐츠를 아래, 위로 바꿀 수 있는 방법은 float 으로 할 수 없고

css로 할 수 있는 방법은 .con_wrap 에 display: flex 로 바꾸고 flex-direction 을 row로 설정한 뒤 자식들인 .top_cont 와 .bottom-cont에게 order로 컨트롤 할 수 있습니다.

그러면 .top_cont 와 .bottom-cont가 flex-item 이 되기 때문에 이점은 알고 있어야 될 것 같습니다.

order 사용 법은 아래의 사이트에서 참고 바랍니다.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/