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

🏷️ 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

    함께 읽은 게시물

    ⟪토스가 만든 리서치툴, TNS⟫

    ... 더 보기

    토스가 특허 낸 리서치툴, TNS (Toss Navigation Score) 제작기

    toss.tech

    토스가 특허 낸 리서치툴, TNS (Toss Navigation Score) 제작기

     • 

    저장 4 • 조회 1,092



    AI 시대, 데이터 분석에 대해 새롭게 정의해야 하는 이유

    AI 시대를 맞이하면서 우리는 다양한

    ... 더 보기


    🤖 최초의 AI 브라우저, Dia 직접 써봤습니다! 🌐

    ... 더 보기

    《편의성보다 우선해야 할 인간적 접촉》

    ... 더 보기