부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기-8-1

다양한 테이블 스타일과 폼태그 스타일

테이블

<table>에 약가늬 패딩과 수평 구분선이 있는 기본스타일의 .table 클래스를 이용한다.

현재는 많이 쓰지 않는 태그

div,시멘틱 태그를 더 많이 사용한다.

 

가로 한 줄을 넣을 때는 tr태그, 세로 한 줄을 넣을 때는 td tag를 쓴다.

code

screen

스타일 없이 입력이 된다.

td tag 대신 header 를 표현하는 th tag 로 변경해준다.

code

screen

code에 클래스 명 table를 추가해 주었을 때 변동사항

추가적인 스타일을 넣고 싶을 때 테이블 클래스에 table-striped 태그를 사용 할 수 있다.

screen

테이블에 선을 추가하고 싶을 때 table-borders 태그를 사용 할 수 있다.

screen

table-hover 태그는 table-striped 태그와 같이 사용하지 않는다.

padding을 줄여서 조밀한 테이블을 만들 때는 table-condensed태그를 사용 할 수 있다.

screen before

screen after

행의 컬러 변경하기

code

screen

td 태그에만 클래스를 주었을 때 

code

screen

responsive 값을 주지 않았을 때는 width 값이 줄어들며 height가 바뀐다.

code

screen PC

screen TB

screen MB

근데 왜 내가 쓴 태그에서는 적용이 안 되지 ?

html 열림, 닫힘 제대로 되어있는지 체크 할 것.

responsive table : height 의 변화 없이 컨텐츠가 있을 때 밀리지 않도록 해준다.

code

screen 

 

참고 : bootstrapk.com/css/#tables