🏷️ Vivian's curating

Fluid 웹 디자인에 대해 공부하다가 반응형 디자인과의 차이를 제대로 알 수 없어 다른 아티클을 찾아 보았다. 기존의 고정 디자인, 그리고 적응형과 반응형 디자인에 대해 느낌으로만 알고 있었고 이론적으로는 잘 알지 못했는데 아래 아티클에 영상으로 자세히 설명되어 있어 이해가 잘 되었다.

꼭 직접 확인해보길. 그럼 이해가 쏙쏙 될 것이다!

✍️ 요약

• Fixed

  • 화면에 따라 너비가 변화하지 않고, 고정되는 속성

  • 데스크탑 & 모바일 웹으로 나뉜 페이지거나 테이블이 포함된 어드민 페이지에서 주로 사용

  • ex) 네이버 PC 버전

• Fluid (Flexible)

  • 요소들이 화면 크기에 맞게 유연하게 조정되는 것을 의미

  • 속성은 %와 같은 상대적인 단위

    • 섹션을 감싸는 큰 컨테이너, 카트,리스트,버튼 등, 이미지 텍스트

  • ex) 원티드 사이트

• Adaptive

  • 종단점(Breakpoint)에 따라 다양한 레이아웃을 갖고 있는 속성

  • 특정 너비의 스냅샷 이외에 커버가 어려움

• Respondive

  • Fixed, Fluid, Adaptive를 모두 섞은 것