반응형 웹 디자인의 종류와 정의

🏷️ Vivian's curating

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

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


✍️ 요약

  • Fixed

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

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

    • ex) 네이버 PC 버전


  • Fluid (Flexible)

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

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

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

    • ex) 원티드 사이트


  • Adaptive

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

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


  • Respondive

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

반응형 웹 제대로 알고 디자인하기 2

Brunch Story

반응형 웹 제대로 알고 디자인하기 2

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2024년 3월 28일 오전 2:09

댓글 0