https://studiomeal.com/archives/197 IE 브라우저에서는 지원 안됨 → Flex

• IE → 엣지

• float : 블락 → 인라인

  • width가 지정 되어야 하위 블락이 비어있는 공간으로 올라옴
  • margin, padding 을 사용해서 박스의 공간을 처리
  • clear를 반드시 사용 : 사용 후
  • 형제 레벨에서 float 속성을 적용

• Flex : 블락의 width를 지정하지 않더라도 자동으로 처리됨.

  • margin, padding을 사용하지 않고 자동으로 처리
  • 부모 레벨에서 처리됨
  • 형제 레벨에서 처리됨

태그<div>, 엘리멘트:<div></div>

position(중요한 개념): 엘리멘트(박스)의 위치를 조정: left, top, right, bottom

• relative: 자기 자신의 원본 위치를 기준점, 자신의 블락이 없어지지 않음
• absolute:
  • 기본적으로 부모의 position 설정이 없는 경우:
    • body(left: 0, right: 0)를 기준점으로 설정, 자신의 블락이 없어짐
  • 부모의 포지션 속성이 relative인 경우: 기준점을 부모의 부모로 설정
  • 부모 relative & 자식 absolute (부모의 position의 값이 있는 경우)
    • 부모를 기준점으로 설정됨
  • 조상 relative & 자식 absolute (조상의 position의 값이 있는 경우)
    • 조상을 기준점으로 설정됨
  • 조상 position 값이 없음 & 자식 absolute
    • view port를 기준점으로 잡는다. body (left 0, right 0)
• fixed:
  • 뷰 포트(pc, 테블릿, 모바일)를 기준점으로 잡는다. body의 왼쪽 최상단(left 0px, top 0px)
  • 스크롤을 이동하더라도 항상 고정 위치에 있음
  • 자신의 블락이 없어짐. body가 기준점

z-index:

• 박스의 레이어를 적용해서 박스의 우선 순위 결정. 21억
• 값이 낮을수록 아래에 적용됨
• 값이 높을수록 위에 적용됨
• 10, 20, 30
• 100, 200, 300, …

투명도 설정: opacity