월별 글 목록: 2015년 6월월

반응형 웹 디자인에서 table 요소 이용하기

웹표준이 붐을 일으킨 후 table 태그는 사용하지 말아야 할 죄악의 태그 같은 이미지를 가지게 되었지만, 표의 형태를 가진 컨텐츠는 여전히 table 태그를 사용하는 것이 좋습니다. 의미상으로도 명확하고 화면상에서의 표시도 그렇지요. 이런 경우에는 오히려 다른 태그를 사용한 후 스타일시트롤 조정해 표의 형태로 표시하도록 하는 것이 기형적인 방법입니다.

다음과 같은 내용의 표를 가정해봅시다.

입장권 테마파크만 입장하고 놀이기구를 이용하지 않을 경우 최적입니다. 20,000원
자유이용권 폐장시간까지 모든 기구를 자유롭게 이용합니다. 40,000원
야간 자유이용권 오후 5시 이후 입장해 폐장시간까지 모든 기구를 자유롭게 이용합니다. 30,000원

이런 표는 반응형 웹을 만들 때 모바일 사이즈에서 표시하기 까다로운 경우가 많은데요, 가로 폭이 넉넉하지 않은 상황에서 여러 컬럼을 표시하다보면 공간이 모자라고 짜부라든 레이아웃으로 표시되는 문제가 발생합니다. 이런 경우엔 css에서 display 속성을 조정해서 해결할 수 있습니다.

@media( max-width: 640px ) {
	#tickets,
	#tickets thead,
	#tickets tbody,
	#tickets tr,
	#tickets th,
	#tickets td {
		display: block;
		/* table와 하위 요소들의 display 속성을 변경합니다. */
	}

	#tickets tr {
		border-bottom: 1px solid #ddd;
	}

	#tickets th,
	#tickets td {
		border-top: none;
		border-bottom: none;
	}
}

http://jsfiddle.net/be4fnzbu/ 에서 확인해보세요.