[TIL] 2020-05-13

rakkoon23·2020년 5월 14일
0

TIL

목록 보기
5/6

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
profile
모빌리티 스타트업에서 데이터를 다루고 있습니다.

0개의 댓글