HTML&CSS 공부(06)

Chapter 8-5

CSS Box

Inline Box (display: inline)

Block Box (display: block)

Block은 가지지만 Inline은 가지지 못하는 것 ->
width, height, margin, padding
공통점 웹페이지의 layout을 결정할 떄 사용하는 것

inline-block (display: inline-block)

Box Model

Block Box가 가지는 기본 모델

• Margin : 테두리로부터 다른요소까지의 거리

상하좌우 동일 마진 적용 시
div {
	margin: 20px;
}

상하 좌우 각각 마진 적용 시
div {
	margin: 20px 30px;
}

상 하 좌 우 각각 마진 적용(상->우->하->좌)
div {
	margin: 20px 10px 30px 10px;
}

직접 마진 적용도 가능 
div {
	margin-top: 20px;
    margin-rigth: 10px;
    margin-bottom: 20px;
    margin-left: 10px;
}

• Border : 내용을 둘러싼 테두리 / 가시적으로 나오지는 않음 따로 세팅을 해야한다

속기법을 이용한 Border 설정
div {
	border: 6px solid blue;
 }
 
 직접 대응을 해주는 경우
 div {
	border-width: 6px;
    border-style: solid;
    boreder-color: blue;
 }

• Padding : 내용으로부터 테두리(boreder)까지의 거리

속기법을 이용한 Padding 설정
div {
	padding: 4px;
 }
 
상하 좌우을 각각 설정
 div {
	padding: 4px 6px;
 }
 
 위쪽에서 시계 방향으로 순서 설정(상 우 하 좌)
 div {
	padding: 4px 6px 4px 6px;
 }

Chapter 8-6

Box Sizing
박스에 적용된 사이즈의 기준 정하기