ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 반응형 웹 레이아웃 주의사항 _1
    html, css/반응형 웹 2017. 8. 17. 22:40
    반응형

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


    반응형 웹이란 쉽게 이야기하면 하나의 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_wrapdisplay: 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/



     






    댓글

Designed by Tistory.