방법 - 나란히 테이블
CSS로 나란히 테이블을 만드는 방법을 알아보세요.
테이블을 나란히 배치하는 방법
float
CSS 속성 을 사용하여 나란히 테이블을 만드는 방법 :
예시
* {
box-sizing: border-box;
}
/* Create a two-column
layout */
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
flex
CSS 속성 을 사용하여 나란히 테이블을 만드는 방법 :
예시
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
참고: Flexbox는 Internet Explorer 10 및 이전 버전에서 지원되지 않습니다. float 또는 flex를 사용하려는 경우 사용자에게 달려 있습니다. 그러나 IE10 이하에 대한 지원이 필요한 경우 float를 사용해야 합니다.
팁: Flexible Box Layout Module에 대한 자세한 내용은 CSS Flexbox 장 을 참조 하십시오.
반응성 추가
위의 예는 두 개의 열이 페이지의 너무 많은 공간을 차지하기 때문에 모바일 장치에서 보기 좋지 않습니다. 모바일 장치에서 2열 레이아웃에서 전체 너비 레이아웃으로 이동해야 하는 반응형 테이블을 만들려면 다음 미디어 쿼리를 추가하세요.
예시
/* Responsive layout - makes the two columns stack on top of each other
instead of next to each other on screens that are smaller than 600 px */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
팁: 표의 스타일을 지정하는 방법에 대해 자세히 알아보려면 CSS 표 자습서 로 이동하십시오 .
팁: float 속성에 대해 자세히 알아보려면 CSS Float Tutorial 로 이동 하십시오.
팁: flex 속성에 대해 자세히 알아보려면 CSS Flexbox 자습서 로 이동 하십시오.