[CSS] 6. 레이아웃 다루기

1. Inline? Block?

• display 속성은 크게 두 가지로 구분한다.
  • inline : content만큼의 크기를 차지한다. ex) <a> <span>
  • block : 너비(width)를 지정하지 않으면, 페이지 전체 만큼의 크기를 차지한다. ex) <h1> <div> <p>
  • 💡 style의 display 속성을 통해서 inline <=> block 으로 유동적으로 사용할 수 있다.

2. Box-Model

• tag의 부피감(크기, 여백, 위치) 등을 결정하는 요소
• content- padding - border - margin 순이다

출처 : simplie learn

💡 in-line style에서는 box의 height, width는 무시된다.

3. Box-sizing

• box-sizing : content-box ( default )
  • width는 content의 크기를 결정하는 요소이다.
  • ⇒ border의 크기를 다르게 하면, content의 크기는 같지만, border의 두께때문에 box의 크기가 달라지는 불편함이 발생한다!
  • ⇒ border까지 포함해서 width로 계산하는 box-sizing이 존재한다!출처 : plan flow
  • 💡 * { box-sizing : border-box} 를 사용하는 것이 하나의 팁!
  • 

4. 마진의 겹침

출처 : medium

• 왼쪽의 사진처럼

Element a의 margin은 10px 이고, Element b의 margin은 30px 일 때,

• 두 요소가 합해지면서 두 margin 중 더 큰 값이 두 Element 사이의 margin이 된다.
  ⇒ 이것을 마진의 겹침 (margin collapse) 라고 한다.
• 즉 margin은 10px, 30px이 더해져서 40px 이 아니라, 30px이 된다는 것이다.
• 마진 겹침의 규칙은 다음과 같다.

1. 수직요소들에 대해서
2. display 속성이 block 일 때

5. 위치 (Position)

• position : static ( default )
• relative
  • 직역하자면, ‘상대적’ 이라는 것이다.
  • 무엇에 상대적이라는 것일까? 바로 static 일 때 자신의 위치를 기준으로 상대적 이라는 것이다.
  • top / bottom / left / right 만큼의 offset을 적용할 수 있다.
    top > bottom, left> right 순으로 우위를 갖는다.
  • 위치를 이동하면서 다른 요소에 영향을 주지 않는다. 원래 위치가 그대로 유지되는 것도 특징이다.
• absoulte
  • 직역하자면, ‘절대적’ 이다.
  • 가장 가까운 조상 중 static을 제외한 값을 기준으로 절대적 위치를 갖는다. 없다면 view port 를 기준으로 한다.
  • 문서 상 원래 위치를 잃어버린다.
• fixed
  • 조상에 상관없이 항상 자기의 위치를 유지한다.
  • nav bar나 footer 같은 친구들을 떠올리면 쉽다.
• sticky
  • static이 항상 그 위치에 있는 반면, sticky는 스크롤을 따라 함께 내려간다.
  • 끈적끈적 스티키 노트를 붙인것처럼 착! 하고 달라붙어있는 모습을 상상해보자.