-
[티스토리] 반응형 웹사이트를 위한 반응형 표 (테이블) 만들기프로그래밍/웹 2016. 3. 22. 21:52
티스토리를 시작하고 모바일 상에서도 편하게 볼 수 있도록 스킨을 반응형 스킨으로 설치하였다.
당연히 모든 컨텐츠가 반응형 스킨에 맞춰서 변경되어 있으리라고 생각했는데, 전혀 예상치 못한 문제점이 나타났다.
표를 사용할때 표가 브라우저의 크기와 상황에 맞춰 변경되지 않고, 크기를 줄이면 그대로 표가 짤리는 문제가 발생하는 것이다.
관리 페이지에서 HTML/CSS 를 직접 간단히 수정한 뒤 제대로 된 반응형 테이블을 설정할 수 있었다.
제대로 되지 않은 일반적인 표의 경우 아래의 글과 같다. 브라우저의 크기에 상관없이 항상 일정한 크기를 유지하며 표가 짤리는 모습을 볼 수 있다.
- 2016/03/20 - [앱개발/안드로이드 앱 개발] - 안드로이드 에뮬레이터에서 사용하는 단축키
제대로 된 경우의 표는 아래의 이전 글과 같다. 브라우저 크기를 조절하면 표의 크기도 자동적으로 조절 되는 것을 볼 수 있다.
- 2016/03/17 - [앱개발/개발자 정보] - 판매자계정 지급계좌용 은행코드
해결 방안은 간단한거 같으면서도 불편하다.
관리자 페이지의 HTML/CSS 편집 화면으로 접속후 CSS 코드 작성 페이지에 다음 코드를 작성한다.
=> 위의 코드는 간단히 테이블의 너비를 고정된 픽셀 값이 아닌 상위 레이어(화면) 크기에 따른 비율로 지정한 것이다.
이후 표를 사용한 글의 수정페이지에서 HTML로 작성하기 버튼을 누른후 글에 있는 모든 width: 숫자px; 부분을 모두 삭제한다...
- 외부 텍스트 에디터를 이용해서 찾아바꾸기로 한번에 바꾸는 것을 추천한다
그럼 완-료
나중에 사용하는 글들도 자동으로 반응형 테이블로 적용 되지 않고 모두 width 를 지워야한다...
자동으로 되는 것은 나중에 찾아보도록 해야지.
'프로그래밍 > 웹' 카테고리의 다른 글
[ReactJS] Components and Props (0) 2018.03.05 [ReactJS] Rendering Elements (0) 2018.03.03 [ReactJS] Introducing JSX (0) 2018.03.02 [ReactJS] Hello World (0) 2018.03.01 [티스토리] Markdown Editor Haroopad를 사용하여 블로깅 하기 (2) 2016.04.06