html, css/반응형 웹
-
반응형 table 정리 (responsive table 정리)html, css/반응형 웹 2018. 10. 25. 17:11
반응형웹 프로젝트를 하게 되면 컬럼이 많은 테이블(responsive table)을 모바일에서 어떻게 표현을 해야 될지 고민을 하게 되는 경우가 있는대,구글에 반응형 테이블을 검색하면 대체로 2가지의 형태로 모바일에서 보여주는 것을 확인 하였는데,나도 다 검색을 통하여서 이 방법을 적용하여 프로젝트 를 한 경험이 있다. 첫번째 방법은 모바일일때는 테이블에 가로 스크롤을 달아 화면보다 열이 많아도 손으로 넘겨서 볼 수 있도록 하는 방법과 두번째 방법은 테이블의 각 열에 해당하는 제목들을 행 마다 다 표현 해 주는 방법이다.말로 풀어쓰면 이해 하기 힘들 수 있으니 아래에 이미지를 보면 이해가 갈 것입니다. 위에 이미지를 보면 PC의 thead 제목이 모바일에서는 각각의 tr에 노출되게 하는 것입니다. 컬럼이..
-
반응형 웹 레이아웃 주의사항 _2html, 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 을 확인 하게 되면 안에 있는 두번째 태그 colsapn="2"를 추가 해주었고, 갯수를 하나 지워 주었습니다.그리고 안에 있는 첫번째 안에 있는 두번째 에 rowspan="2" 를 추가 해주었고, 두번째 안에..
-
반응형 웹 레이아웃 주의사항 _1html, css/반응형 웹 2017. 8. 17. 22:40
반응형 웹 레이아웃을 구상하기 전에 다음과 같은 부분들을 알고 구상을 하면 반응형 프로젝트를 좀 더 시간을 단축 할 수 있고 좀 더 효율적인 화면이 탄생 될 것이라 생각합니다. 반응형 웹이란 쉽게 이야기하면 하나의 html 요소들을 css(media query)를 이용하여 PC, 모바일, 태블릿 화면에 알맞는 레이아웃을 표현 해 주는 것입니다. 여기서 더 간단히 요점만 말하자면 기본 하나의 뼈대로 PC일때, 모바일 일때, 태블릿 일때 옷 만 바뀌는 것입니다.(긴팔에서 반팔, 무지 t셔츠가 스프라이트 t셔츠로..이런느낌 입니다.) 뼈 들이 움직이지는 못하고 뼈를 감싸고 있는 옷만 바뀌는 것이기 때문에 레이아웃을 표현 하는데 어느 부분은 제한적인 부분들이 있습니다. 제가 정리하고 싶은 부분은 이런 제한적인 ..