CSS

상속

• 상속되는 속성
  => 디자인에 관련된 것
• 상속되지 않는 속성
  => 공간에 관련된 것

BOX

Box-Model

• 인라인 블록 박스
  => 인라인 박스처럼 렌더링되지만 너비와 높이를 설정할 수 있음
• 인라인 박스
  => 상, 하로는 margin, padding값을 주어도 공간이 벌어지지 않는다

overflow

• auto
  => 자식 박스가 부모 박스보다 큰 경우 스크롤이 생긴다
• visible
  => 자식 박스가 부모 박스보다 큰 경우 초과한 부분만큼 박스가 커진다
• hidden
  => 자식 박스가 부모 박스보다 큰 경우 초과한 부분을 숨긴다
• scroll
  => 자식 박스, 부모 박스의 크기와 상관없이 스크롤이 생긴다

여백

• inline 박스의 상하에도 margin, padding이 적용되나 넘친다

background

• background-clip
  => 배경 이미지 오려내기 영역 설정
  => 하단에 위치해야 box-sizing 속성이 적용된다
• background-origin
  => 배경 이미지 시작 위치 설정

positioning

• relative
  => 원래 위치에서 상대적으로 이동한다
• absolute
  => 페이지 내에서 자유롭게 이동이 가능하다
  => 부모 박스에 포지션값을 주면, 부모 박스 내에서 이동한다
• fixed
  => 설정한 대로 뷰포트 내에서 고정된다
• sticky
  => 자신의 위치에 도달할 때까지 달라붙는다

불릿 기호 없애기

• list-style-type: none;
  => ol에서 불릿 기호를 없애면 순서가 사라지기 때문에 다른 방식으로 숫자를 표현해 주자

float

자식이 모두 float돼서 잃어버린 부모의 height를 찾을 때

• display: flow-root;
• 부모도 float 시키기
• ::after를 만들어서 content 공백을 넣고 display를 block으로 설정하고, clear 시키기
  => clear 속성은 display가 block인 경우에만 적용이 가능하다
• overflow: hidden;
  => 넘치는 요소가 사라지는 리스크가 있다