[CSS] 박스 모델(2) - margin, display

박스의 위치

margin: px, %;

- 바깥 여백을 의미

- 벽을 밀어서 자신이 이동하거나 주변의 다른 요소를 밀어내는 효과

- 서로 마주보고 작용하는 margin은 겹침 현상 발생

- 음수 값을 지정할 경우 반대 방향으로 힘이 작용(끌어당김)

- 값을 하나만 지정할 경우 : 상, 하, 좌, 우 모두 동일

- 값을 두 개 지정할 경우 : 상/하, 좌/우

- 값을 네 개 지정할 경우 : 상단부터 시계 방향 회전 ( 상, 우, 하, 좌 )

margin: auto

부모 요소의 width에서 현재 자신의 크기를 뺀 나머지를 자동으로 계산하여 margin에 부여한다.

속성	설명
margin-left: auto	박스가 부모의 오른쪽에 배치된다.
margin-right: auto	박스가 부모의 왼쪽에 배치된다.
left와 right에 모두 auto 적용	박스가 부모 가운데 배치된다.
margin: auto	값이 하나인 경우 상, 하, 좌, 우 모두 적용되지만  auto는 상, 하에 대해서는 동작하지 않기 때문에 left, right에만 부여한 것과 동일하게 작용한다.

---

dispaly

block-leverl과 inline-level의 특징을 결정짓는 속성.

1) display: block;

 - Block-Level요소의 기본 값.

 - 어떤 요소를 문단처럼 구성할 수 있도로록 한다. (줄바꿈)

 - width, height가 적용된다.

2) display: inline;

 - Inline-Level요소의 기본 값.

 - 어떤 요소를 문장처럼 구성할 수 있도록 한다. (줄바꿈 안함)

 - width, height를 적용할 수 없다.

3) display : inline-block;

 - 크기 지정이 가능한 문장 요소

4) display: none;

 - 어떤 요소를 화면 표시하지 않도록 숨긴다.

---

응용1 : 링크의 영역 확장하기

1. <a> 태그에게 width, height를 부여하면 그 만큼 클릭 가능한 영역이 확장

2. <a> 태그가 inline-level이므로 display속성을 block으로 지정해야만 처리가 가능.

응용2 : 목록정의 요소

1. <ul>,<ol>에게 list-style: none; padding: 0; margin: 0을 부여하면 2중으로 중첩된 <div> 요소와 같이 초기화 된다.

2. 이후부터 <li> 요소의 display 속성을 조절하여 메뉴를 배치할 수 있다.