IT 수업 16주차 (88) BOOTSTRAP

 

부트스트랩은 스타일링을 도와주는 것이다.

 

 

CSS와 번들을 복사해 파일의 헤더 부분에 붙여넣기 해준다.

 

 

 

 

 

div태그의 class를 두지 않으면 col1,2,3이 세로로 배치 되지만 row로 두었을 땐 col1,2,3이 가로로 배치 된다.

 

 

 

 

● 컨테이너

 

이번에는 col에 박스를 두르고 제일 바깥쪽 div 태그를 container로 하면 기본적으로 스타일링이 되는 것을 볼 수 있다.

 

 

 

container-lg로 하면 확대했을 시 기본 크기가 자동으로 잡히는 것을 볼 수 있다.

 

 

 

● 그리드

 

 

 

 

 

 

 

 

 

 

col은 12의 비율로 되어있어서 마진을 주는 것 대신 - 로 숫자를 나타낼 수도 있다.

 

 

● 표

기본 표를 만들어 본다.

 

 

 

 

 

 

 

 

 

 

● 폼

기본 폼 구조를 만들어 본다.

 

 

 

폼은 기본으로 width가 100%로 잡힌다.

 

 

m- 는 마진을 나타낸다.

 

w- 는 width 너비를 나타낸다.

 

 

 

 

 

 

 

 

 

 

 

이번에는 폼에 셀렉트를 구현해볼 것이다.

코드를 그대로 들고와 폼안에 넣어준다.

 

 

새로운 div태그를 만들어 input과 label을 만들어 준다.