CSS의 사이트 레이아웃

웹을 탐색할 때 콘텐츠에 대해 서로 다른 레이아웃 기술을 사용하는 사이트를 우연히 발견했을 것입니다. 데스크탑에서 동일한 사이트를 방문한 다음 모바일에서 또는 브라우저 창 크기를 조정하여 동일한 사이트를 방문한 경우 이를 알아차렸을 수 있습니다.

CSS에는 다양한 유형의 레이아웃이 있으며 일부는 다른 것보다 인기가 있으며 현대 웹에서 일부는 사용자 친화적이지 않은 것으로 눈살을 찌푸리게 합니다. 일부 대형 웹사이트는 여전히 데스크톱용으로 사이트를 설계하고 모바일 사용자를 다른 도메인으로 리디렉션합니다.

이 게시물에서는 CSS의 다양한 유형의 레이아웃에 대해 논의하고 프로젝트 또는 사이트 사용자에 따라 선택할 수 있습니다.

이러한 레이아웃 유형을 시연하기 위해 특정 웹 사이트를 사용할 것입니다. 사이트는 Liquidapsive입니다. 이 글을 쓰는 시점에는 사이트가 다운되었지만 internet archive 덕분에 사이트 스냅샷을 사용할 수 있습니다.

Open the snapshot 오른쪽 상단 모서리에 있는 드롭다운 메뉴에서 레이아웃을 변경하여 따르십시오.


CSS의 레이아웃에 대해 이야기할 때 레이아웃은 종종 네 가지 범주로 나뉩니다.

정적

액체

어댑티브

응답형

정적 레이아웃

사이트가 콘텐츠에 대해 정적 레이아웃을 사용하는 경우 요소 크기 조정에 고정 단위가 사용되며 이를 방문하는 웹 브라우저에 관계없이 레이아웃은 동일합니다. 모바일에서 이런 종류의 사이트를 방문하면 브라우저에 가로 스크롤 막대가 추가됩니다.

오늘날의 최신 웹에서 사용자는 사이트에서 정말 가치 있는 콘텐츠를 제공하지 않는 한 이러한 유형의 사이트를 피하는 경향이 있습니다.

너비가 800px이고 높이가 400px인 사이트의 가상 예를 들어 보겠습니다. 데스크톱 컴퓨터에서 사이트를 방문하는 경우 아무 것도 알아차리지 못하겠지만 브라우저 창의 크기를 조정하거나 모바일에서 사이트를 방문하면 브라우저에 가로 스크롤 막대가 추가됩니다.

웹 아카이브 스냅샷을 열고 브라우저 크기를 조정하십시오.

정적 레이아웃: 데스크톱 보기

정적 레이아웃: 모바일 보기입니다. 스크롤 막대에 주의하십시오.

액체 레이아웃

액체 레이아웃은 크기 조정에 상대적인 단위를 사용합니다. 상대 단위의 예:

ems

% (퍼센트)

또 다른 예가 문제를 해결해야 합니다. 사이트 너비를 80%로 설정한 경우 사이트는 항상 브라우저80%의 viewport를 차지합니다. 데스크톱에서는 이것이 문제가 되지 않을 수 있지만 장치가 작성자가 의도한 것보다 크면 레이아웃이 깨질 수 있고 더 작은 장치에서는 읽기가 어려울 수 있습니다.

액체 레이아웃: 데스크톱 보기

액체 레이아웃: 모바일 보기

적응형 레이아웃

이것은 px와 같은 고정 단위를 사용하지만 주요 추가 사항인 — 를 사용하기 때문에 정적 레이아웃과 유사합니다.

미디어 쿼리를 사용하면 브라우저viewport가 특정 너비에 있을 때 적응형 레이아웃이 변경됩니다.

아래 코드 샘플을 살펴보고 주석을 읽어 보십시오.

/**
  * Here we set the header to 100px. This
  * will be the case for smaller devices
  */
.header {
   width: 100px
}

/**
  * When the resolution is at least 480px
  * we change the header width to 480px. Remember
  * we are using px which is a fixed unit
  */
@media screen and (min-width: 480px) {
  .header {
    width: 300px;
  }
}

예제 사이트로 전환하고 레이아웃을 적응형으로 변경한 다음 브라우저 크기를 조정하여 차이점을 확인합니다.

적응형 레이아웃: 데스크톱 보기

적응형 레이아웃: 모바일 보기

이 레이아웃의 단점 중 하나는 서로 다른 여러 레이아웃을 설계해야 하기 때문에 코드 유지 관리 용이성입니다viewports.

반응형 레이아웃

Pioneered by web designer Ethan Marcotte 그의 A List Apart 기사에서.

반응형 레이아웃은 상대적 단위 및 미디어 쿼리를 사용하여 액체 및 적응형 레이아웃의 장점을 결합합니다. 이를 통해 각 장치 및 크기viewport에 적합한 레이아웃을 제공할 수 있습니다.

반응형 레이아웃

다음 주제는 이 레이아웃 기술에 관한 것입니다.


다음은 반응형 웹 디자인입니다.