ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 반응형 웹 레이아웃 주의사항 _2
    html, css/반응형 웹 2017. 8. 19. 16:44
    반응형

    반응형 웹 레이아웃 주의사항 2번째 포스트입니다.

     

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

     

    다음 이미지와 같이 모바일 화면과 PC 화면에서의 테이블 표를 다르게 하고 싶은 경우가 있을 것입니다.

     

     

    모바일 화면에서는 제목 열이 4칸 인데 PC에서는 제목열이 3칸이고 , 또 PC 에서는 내용1열B와 2열B 가 합쳐져 있습니다.

    저렇게 표현을 하려면 다음과 같은 html 로 수정이 되어야 합니다.

     

    [모바일 html]

     

    [PC html]

     

    PC 화면의 html 을 확인 하게 되면 <thead> 안에 있는  두번째 <th>태그 colsapn="2"를 추가 해주었고, <th> 갯수를 하나 지워 주었습니다.그리고 <tbody> 안에 있는 첫번째  <tr> 안에 있는 두번째 <td>에 rowspan="2" 를 추가 해주었고, 두번째 <tr> 안에 있는 <td> 갯수를 하나 지워 주었습니다.

     

    colspan, rowspan은 보시는 이미지와 같이 css로 컨트롤 할 수 있는게 아니고 html안에다 추가를 해주어야 하기 때문에 다음과 같은 레이아웃은 <table> 태그로 가능한 레이 아웃이 아닙니다.(아니면 스크립트로 컨트롤 해야합니다..ㅜㅜ)

     

    제가 반응형 레이아웃 주의사항 (1) 페이지에 설명 했듯이 반응형 웹은 공통의 html을 그대로 두고 css로 레이아웃을 컨트롤 한다고 설명했습니다. 

    그렇기 때문에 위에 이미지 처럼 레이아웃을 바꾸고 싶으면 PC용, 모바일용 <tr> 두벌로 만들고 미디어쿼리로 dispay:none, block 컨트롤 하는 방법이 있는데, 이 방법은 불 필요한 데이터를 하나 더 가지고 있는 형태이기 때문에 어쩔 수 없이 이렇게 작업을 하게 된다면 개발자와 협의 후 작업을 해야 할 것입니다. 

    다른방법은 <table> 태그가 아닌 다른 태그로 표현을 해야하는데 그렇게 되면 작업 시간이 빨리 할 수 있는 작업이 아니기 때문에 시간이 걸릴 수 있습니다. 그래서 결론은 최대한 PC와 모바일 테이블표는 동일하게 가도록 구성 하는것이 작업 시간을 단축 할 수 있습니다. (어쩔 수 없는경우는 작업을 해야겠지만요 - 모바일 화면에서는 다 수의 td는 화면에 다 들어 갈 수가 없지요...)

     

     

     

     

     

    댓글

Designed by Tistory.