[Web] HTML CSS - quick review

HTML & CSS

Block level vs. Inline level

• Block level
  • <div></div>
  • 기본적으로 한 라인에 하나씩

• Inline level

  • <span></span>
  • 기본적으로 한 라인에 여러개 가능
• position
  • relative: 원래 위치 기준으로 얼마나 움직일 것인지
  • absoulte: 현재 component의 바로 위의 부모 component를 기준으로 얼마나 움직일 것인지
  • fixed: 현재 페이지 전체를 기준으로 얼마나 움직일 것인지
  • sticky: 원래 위치에 존재하는데, 스크롤을 움직이면 위치를 바꾸지 않고 붙어있는 것을 뜻한다

Flexbox

• flexbox는 container와 item으로 구성된다.

  • container 에 대해 꾸밀 수 있는 것

    • display
    • flex-direction
      • display: flex로 먼저 flex 선언을 하고, flex-direction: column-reverse와 같이 선언하면 나열되는 방향과 순서가 결정된다
    • flex-wrap
      • nowrap: 페이지의 크기가 줄어들어도 한 줄에 다 적힌다
      • wrap: 페이지의 크기가 줄어들면 item이 여러 줄에 걸쳐 나타난다
    • flex-flow
    • justify-content
      • space-around
      • space-between
    • align-items
    • align-content

  • item에 대해 꾸밀 수 있는것

    • order
    • flex-grow: 페이지를 늘리거나 줄일 때 해당 item이 어느 비율을 따라 움직일지
    • flex-shrink
    • flex
    • align-self

• 아이템이 나열되는 순서를 수평으로 따라가는 것이 main axis, 수직이 되는 축이 cross axis