Codecademy - Make a website
display
display: block;
: 요소가 줄을 다 차지함display: inline;
: 요소 폭만큼 줄을 차지함display: flex;
: flexible box (수평에 좋음)flex-wrap: wrap
: item들이 페이지 밖으로 나가지 않도록 함justify-content: center;
: item 정렬.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
index.html 에 위 코드 추가
Bootstrap에서는 12개의 column가진 grid 제공
(출처 - codecademy)
<div class="container">
: 얘에 의해 폭 자동조정됨"container"
: 고정폭 레이아웃"container-fluid"
: 좌우로 꽉 찬 레이아웃<div class="row">
: 이 안의 태그들이 자동으로 가로나 세로로 정렬할 준비를 함header
, nav
jumbotron
중요 정보 담기 위한 큰 박스
<div class="jumbotron">
<div class="container">
</div>
</div>
"jumbotron well"
: 윤곽이 뚜렷하게 됨col-xx-yy
container -> row 안에 영역 나누기 위해 씀
footer
button
<a class="btn btn-primary" href="#" role="button">more</a>
btn-primary 대신 아래 7가지 가능 (버튼 색상)
btn-default
btn-primary
btn-success
btn-info
btn-warningg
btn-danger
btn-link
btn-primary 자리 다음에
active
: 버튼 활성화
disabled
: 버튼 비활성화