CSS

• 웹 개발 사이드 프로젝트를 하는데 CSS에서 막히는 부분이 있어 생활코딩 강의를 들었다/
• Inline vs. Block
  • 모든 HTML 태그들은 display의 속성의 기본값으로 Inline 또는 Block을 갖고 있다.
  • Block : 새로운 라인에서 시작하며, 해당 라인의 모든 너비를 차지한다(ex. h1)
  • Inline : 새로운 라인에서 시작하지 않고, 요소의 너비도 contents만큼만 차지한다(ex. a, span)
• Box-sizing
  • border 등 박스 모델을 조작하다보면, 원래 원했던 최대 크기와 다르게 출력될 때가 있다. 이러한 문제를 사전에 예방하고자 아래 CSS 태그를 먼저 선언하는 사람들이 많다.
  • • { box-sizing : border-box; }
• position : relative vs. static
  • postion 속성의 기본값은 static이다.
    • static으로 설정되면, top, right, bottom, left와 같은 offset 설정에 영향을 받지 않고, 웹 페이지의 흐름에 따라 요소들이 위치하게 된다.
    • relative로 설정되면, 해당 태그의 기본 위치 즉, static으로 지정됐을 때 원래 위치했어야 할 위치를 기준으로 위치하게 된다.
• position : absolute
  • 위치가 설정된 조상(ancestor) 요소를 기준으로 위치하게 됨.
  • 만약, 위치가 설정된 조상 요소가 없다면, 를 기준으로 위치하게 된다.

- 참고 자료

• 생활코딩
• TCP School