[SW코딩] 핵심 HTML/CSS 기초 - 04. 웹사이트의 레이아웃

01 박스 모델

 

• 박스 모델 구조

- 컨텐츠를 감싸는 3가지의 축

 

• margin과 padding의 차이

- margin -> border -> padding 순서로 여백을 만든다.

 

• margin과 padding을 작성하는 방법

- margin-left, margin-right 등 직접 값을 지정해도 되지만 위 코드처럼 한 줄에 작성이 가능하다.

- {margin : top right bottom left;} 순서로 값이 적용된다.

 

---

 

02 Block 요소와 Inline 요소

- block 요소 : Y축을 기준으로 요소들이 생성된다.

- inline 요소 : X축을 기준으로 요소들이 생성된다.

 

• Block 요소의 특징 

 

---

 

03 margin 병합 현상

 

• 형제지간의 마진 병합

 

- 다음과 같이 top과 bottom일 경우에 둘 중 큰 값의 margin 크기를 적용하게 된다.

 

• 부모지간의 마진 병합

- 자식의 margin 변경은 자식을 포함하고 있어야 하기 때문에 부모에게도 margin-top: 100px만큼 영향을 미치게 된다.

 

---

 

04 레이아웃에 영향을 미치는 속성

 

• display : block과 inline의 속성을 변경할 때 사용

- block의 성격 : Y축을 기준으로 하는 성격을 가진 요소, 컨텐츠가 끝난 후 줄바꿈(\n) 처리가 된다.

- inline의 성격 : X축을 기준으로 하는 성격을 가진요소, 컨텐츠가 끝난 후 줄바꿈 띄어쓰기(spacebar) 가 된다.

- inline-block의 성격 : 위 두 요소의 성격을 가지고, width와 height 값을 주지 않으면 컨텐츠의 길이만큼 영역을 갖는다.

 

• float : 특정한 요소의 위치를 지정해준다.

 

 

• clear : 정렬이 끝난 남은 공간에 대한 여백 처리

- both : 왼쪽, 오른쪽의 여백을 모두 인정해 그 공간은 여백으로 처리

- none : float이 끝난 후 줄바꿈이 일어나지 않고 그 옆에 컨텐츠를 붙일 수 있게 된다.

- left : float에 속성을 왼쪽으로 변경하고, 오른쪽은 여백처리

- right : float에 속성을 오른쪽으로 변경하고, 왼쪽은 여백처리

 

• 브라우저와 공간 사이의 공백 제거하기