CSS에서 레이아웃을 제어하기 위한 가장 중요한 속성
모든 요소에는 요소의 유형에 따라 기본 표시값이 있다
block요소에 width를 설정하면 좌우 가장자리 끝으로 늘어나지 않게 된다
좌우 margin을 0으로 설정하면 해당 요소를 (부모요소로 지정한) 컨테이너 박스 안에서 가운데(중앙) 정렬이 가능해진다
만약, 브라우저 창 너비 < 요소의 너비
width 속성대신 max-width를 사용해서 브라우저가 작은 창일 때 처리하는 방식으로 개선하면 된다
요소의 너비를 설정할 때
요소의 테두리 border
, padding
을 같이 지정하면
해당 요소는 늘려져서 실제로 설정한 것보다 더 크게 나타날 수 있다
.sample {
width: 500px;
margin: 20px auto;
}
. fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border-width: 10px;
}
단락 안에서 해당 단락의 흐름을 방해하지 않은 채로 텍스트로 감쌀 수 있다
nav {
display: inline-block;
vertical-align: top;
width: 25%;
}
.column {
display: inline-block;
vertical-align: top;
width: 75%;
}
display
이 inline, block 으로 지정되어있지만 display 속성을 이용해서 재정의할 수 있다float
.inline-p {
display: inline-block;
}
.float-laft {
float: left;
}
.float-right {
float: right;
}
.block-span {
display: block;
}
display: none
display: none;
으로 보이지 않다가display: block;
인 다른 클래스로 교체해준다