1. Box model

• width: auto , height: auto

  *<div> 의 block 요소에서 width: auto는 100%, height: auto 는 0을 반환한다. → layout 특화*

  *<span> 의 inline 요소에서 width: auto는 0을, height: auto 는 0을 반환한다. → text 특화*

  ⚠️ auto : 브라우저가 너비를 계산

• max-width, max-height

  기본 값은 none

  min-height, min-width

  기본 값은 0

  ⚠️ width: 100% 와 width: auto 의 차이

  width: 100% 는 부모의 가로 너비의 크기의 값을 fix 하는 것이고

  width: auto 는 width 를 초기화 하는(fix 된 값이 없도록) 것이라 할 수 있다.

• margin: 10px 20px 30px 40px : margin: 위 우 아래 좌 → 시계 방향으로 생각

  margin: 10px 20px 30px : margin: 위 [좌, 우] 아래 → 위에서 아래로 생각

  margin: 10px 20px : margin: [위, 아래] [좌, 우] → 상하, 좌우로 생각

  margin: 10px : margin: [위, 아래, 좌, 우] → 모두

  margin: 50% : margin의 %는 부모 요소의 width(가로)길이를 기준으로 지정된다.

  (padding 도 마찬가지)

  ⚠️ 단축속성, 개별속성은 필요에 따라 적절하게 사용

  ⚠️ 마진 중복(병합)이 되는 현상 (두 요소 사이에 어떠한 개입이 일어나지 않을 시)

  1. 형제 요소들의 margin-top과 margin-bottom 이 만났을 때

  2. 부모 요소의 margin-top 과 자식 요소의 margin-top 이 만났을 때

     (만난다 = 같은위치의 top)

  3. 부모 요소의 margin-bottom 과 자식 요소의 margin-bottom 이 만났을 때

     (만난다 = 같은위치의 bottom)

  ⚠️ 마진 중복 계산법

  조건 : 둘 다 양수 → 요소A 마진 : 30px, 요소B 마진 : 10px → 더 큰 값으로 중복

  조건 : 둘 다 음수 → 요소A 마진 : -30px, 요소B 마진 : -10px → 더 작은 값으로 중복

  조건 : 각각 양, 음수 → 요소A 마진 : -30px, 요소B 마진 : 10px → 합산한 값으로 중복

• box-sizing: content-box

  기본적으로 모든 box에 선언되어져 있는 속성.

  너비(width, height) 만으로 요소의 크기를 계산

  padding과 border를 선언하면 text의 크기 밖에 스타일이 적용된다. 즉, padding과 border의 크기만큼 text크기에 추가되어 커진다.

  box-sizing: border-box

  너비 안에 안쪽 여백(padding)과 테두리 선(border)를 포함하여 요소의 크기를 계산

  padding과 border를 선언하면 요소의 크기 안에서 스타일이 적용된다.

  padding과 border의 크기만큼 text가 차지하는 크기는 줄어들지만, text의 전체 크기는 유지된다.

2. display properties

display 속성에는 block, inline, inline-block, none 이 있습니다.

block

• 수직 기반 레이아웃으로, 항상 새로운 라인에 요소가 시작되고 화면 크기의 전체 가로폭을 영역으로 차지합니다.
• width 속성값을 부여해주면 그 너비만큼 영역을 차지합니다.

inline

• 수평 기반 레이아웃으로, 새로운 라인에서 시작되지 않으며 다른 요소들과 같은 줄에 배치될 수 있고 content 너비만큼의 영역을 차지합니다.

<aside> 💡 width, height, margin-top, margin-bottom 속성이 적용이 되지 않습니다.

</aside>

inline-block

• block 레벨 요소와 inline 레벨 요소의 특징을 모두 가지고 있습니다.
• 한 줄에서 inline 레벨 요소들과 같이 배치될 수 있으며 width와 height 속성으로 영역의 크기를 지정할 수 있습니다. 즉 내부적으로는 block 엘리먼트 규칙을 따르면서 외부적으로 inline 엘리먼트 규칙을 따르게 됩니다.

none

• 선택한 요소들을 화면에 나타나지 않게 합니다. visibility: hidden 과의 차이점은 영역이 남아있는지 여부가 다르다는 점입니다. (display: none 은 영역도 없앰)