본문 바로가기
IT/CSS

Responsive Design

by 무녈 2021. 5. 11.

자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다.

⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️

SIZING ELEMENTS

Relative Measurements

Responsive Design을 통해 웹 사이트가 화면 크기에 관계없이 모든 장치에서 읽을 수 있고 시각적으로 호소력을 지닐 수 있다.

Responsive design는 다음을 기반으로 웹 사이트의 콘텐츠를 크기 조정 및 재구성하는 기능을 말한다.

  1. 웹 사이트의 다른 콘텐츠 크기
  2. 웹 사이트를 보고 있는 화면 크기

웹 사이트에서 사용되는 픽셀 단위(px)를 사용하며, 픽셀은 콘텐츠의 크기를 정확한 크기로 조정하는 데 사용된다.

예를 들어, div의 너비가 정확히 500픽셀이고 높이가 100픽셀이 되도록 하려면 px 단위를 사용할 수 있다.

그러나 픽셀은 고정된 하드 코딩된 값이다.

화면 크기가 변경되면(예: 전화기의 가로 보기에서 세로 보기로 전환) 픽셀 크기의 요소가 너무 작게 나타나거나 화면을 오버플로하거나 완전히 읽을 수 없게 될 수 있다.

 

CSS를 사용하면 하드 코딩된 측정을 피하고 대신 relative measurements을 사용할 수 있다.

relative measurement는 하드 코딩된 측정보다 유리하며, 이는 화면 크기나 레이아웃에 관계없이 웹 사이트의 비율이 그대로 유지될 수 있기 때문이다.

Em

상대 크기 조정 통합은 픽셀 이외의 단위를 사용하며, CSS에서 비교적 크기가 큰 콘텐츠를 만들기 위해 사용할 수 있는 측정 단위는 CSS에 작성된 em

 

em은 요소의 글꼴 크기 또는 브라우저가 지정한 기본 기본 글꼴 크기를 나타낸다.

 

예를 들어 브라우저의 기본 글꼴이 16픽셀(일반적으로 브라우저의 텍스트 크기)이면 1em은 16픽셀이며, 2ems는 32픽셀과 같다.

 

CSS에서 em을 사용할 수 있는 방법을 보여주는 두 가지 예시

.heading {
  font-size: 2em;
}

위의 예제는 기본 글꼴이 지정되지 않았기 때문에, heading 요소의 글꼴 크기는 브라우저의 기본 글꼴 크기에 비례하여 설정된다.

기본 글꼴 크기가 16픽셀이라고 가정하면 heading 요소의 글꼴 크기는 32픽셀이 된다.

.splash-section {
  font-size: 18px;
}
 
.splash-section h1 {
  font-size: 1.5em;
}

위의 예제는 브라우저의 기본 글꼴 크기 대신 기본 글꼴 크기(18px)가 splash-section 요소 내의 모든 텍스트에 대해 정의된다.

두 번째 CSS 규칙은 splash-section의 기본 글꼴(18픽셀)을 기준으로 splash-section 내부에 있는 모든 h1 요소의 글꼴 크기를 설정한다. h1 요소의 결과 글꼴 크기는 27픽셀이다.

Rem

CSS에서 두 번째 상대 치수 단위는 rem 코드

 

rem은 root em을 의미

em과 유사하게 작동하지만 글꼴 크기를 조정하기 위해 부모 요소를 확인하는 대신 root element를 확인해야 히며, root element는 <html> tag다.

 

대부분의 브라우저는 <html>의 글꼴 크기를 16픽셀로 설정하므로 기본적으로 rem 치수는 기본 글꼴 크기인 16 픽셀에 상대적인 값을 가진다.

root 요소인 <html>tag에 다른 글꼴 크기를 설정하고 싶다면 CSS rule을 추가한다.

html {
  font-size: 20px;
}
 
h1 {
  font-size: 2rem;
}

root 요소인 <html>의 글꼴 크기를 20픽셀로 설정할 경우, 이후의 모든 rem 치수는 20픽셀을 기준으로하며 예제의 h1 요소의 크기는 40픽셀이 된다.

 

rem을 사용할 때의 한 가지 장점은 모든 요소를 동일한 글꼴 크기 값과 비교하여 글꼴의 크거나 작은 크기를 쉽게 예측할 수 있다는 것이다. 전체 웹 사이트에 걸쳐 요소의 크기를 일관되게 조정하는 데 관심이 있는 경우 rem 치수는 작업에 가장 적합한 단위입니다.

다른 요소와 비교하여 요소 크기를 조정하려는 경우, em unit이 해당 작업에 더 적합하다.

Percentages: Height & Width

페이지의 상위 요소를 기준으로 텍스트가 아닌 HTML 요소의 크기를 조정하기위해 백분율(percentage)을 사용할 수 있다.

 

백분율은 너비 및 높이, 패딩, 테두리 및 여백과 같은 box model 값의 크기를 조정하는 데 사용되며, positioning properties(위, 아래, 왼쪽, 오른쪽)를 설정하는 데 사용한다.

 

백분율을 사용한 요소의 높이와 너비의 크기 조정 예시

.main {
  height: 300px;
  width: 500px;
}
 
.main .subsection {
  height: 50%;
  width: 50%;
}

예시에서 .main과 .subsection은 각각 div를 나타낸다.

.subsection div는 .main div 안에 내포되어 있고, 상위 div(.main)의 치수는 300픽셀의 높이와 500픽셀의 너비로 설정되있다.

백분율이 사용되는 경우 요소는 상위 요소(or 컨테이너)의 치수에 비례하여 크기가 지정된다.

따라서 .subsection div의 치수는 150픽셀 높이와 250픽셀 너비가 된다.

상위 요소의 치수가 먼저 설정되지 않은 경우 하위 요소의 치수가 잘못 설정될 수 있다.

 

참고: box model에는 패딩, 테두리 및 여백이 포함되므로 요소의 너비를 100%로 설정하면 콘텐츠가 상위 컨테이너에 오버플로될 수 있다. 100%는 콘텐츠에 패딩, 테두리 또는 여백이 없는 경우에만 사용해야한다.

Percentages: Padding & Margin

백분율을 사용하여 요소의 패딩 및 여백을 설정할 수 있다.

 

패딩 및 여백을 설정하는 데 백분율이 사용되는 경우 상위 요소의 너비(width)만 기준으로 계산된다.

 

예를 들어, margin-left과 같은 property를 백분율(예: 50%)을 사용하여 설정할 경우, 요소는 상위 컨테이너에서 오른쪽으로 반 정도 이동한다(하위 요소는 상위 컨테이너의 여백의 반을 받는 것과 반대).

 

vertical padding과 margin도 상위 너비를 기준으로 계산된다. 

 

너비만 기준으로 하는 이유

  1. 컨테이너 div가 정의되었지만 높이가 설정되지 않았다(flat을 의미).
  2. 그런 다음 컨테이너에 하위 요소가 추가된다. 하위 요소의 높이가 설정되어 있다.
    이로 인해 상위 컨테이너의 높이가 해당 높이로 늘어난다.
  3. 하위 요소를 변경해야 하며 높이가 수정된다. 이로 인해 상위 컨테이너의 높이도 새 높이로 늘어난다.
    이 주기는 하위 요소의 높이가 변경될 때마다 끝없이 발생한다.

위의 시나리오에서, 설정되지 않은 높이(상위 높이)는 하위 요소의 변경으로 인해 지속적으로 높이를 변경한다.

그렇기 때문에 높이가 아닌 상위 너비를 기준으로 vertical padding과 margin을 두는 이유이다.

 

참고: 상대적인 크기를 사용하는 경우 em와 rem을 사용하여 텍스트 크기와 관련된 페이지의 텍스트 크기(즉, 텍스트 주위에 패딩)를 조정해야 한다. 이렇게 하면 텍스트 크기에 따라 일관된 레이아웃이 생성된다. 그렇지 않을 경우 백분율을 사용해야 한다.

Width: Minimum & Maximum

상대적 치수는 화면 크기가 다른 기기 간에 일관된 레이아웃을 제공하지만, 웹사이트의 요소는 너무 작거나 커지면 integrity을 잃을 수 있다. 다음 property로 요소의 너비를 제한할 수 있다.

  1. min-width: 요소의 최소 너비를 보장
  2. max-width: 요소의 최대 너비를 보장
p {
  min-width: 300px;
  max-width: 600px;
}

예시에서 브라우저의 크기가 조정될 경우 paragraph 요소의 너비가 300픽셀 아래로 내려가지 않으며, 600픽셀을 초과하지 않는다.

 

브라우저 창이 좁아지거나 넓어지면 텍스트가 매우 압축되거나 매우 커져서 읽기가 어려워질 수 있기 때문에, 이 두 가지 property를 통해 최소 폭과 최대 폭을 제한하여 항상 내용을 읽을 수 있을 수 있다.

 

참고: 픽셀 단위는 요소의 치수에 대한 엄격한 제한을 보장하는 데 사용된다.

Height: Minimum & Maximum

요소의 최소 및 최대 높이를 제한할 수 있다.

  1. min-height: 요소 상자의 최소 높이를 보장
  2. max-hight: 요소 상자의 최대 높이를 보장
p {
  min-height: 150px;
  max-height: 300px;
}

예시에서 모든 paragraph의 높이는 150픽셀 이하로 줄어들지 않고 높이는 300픽셀을 초과하지 않는다.

 

요소의 max-height property를 너무 낮게 설정하면 요소의내용이 요소 외부로 오버플로되어 읽을 수 없는 내용이 생길 수 있다.

Scaling Images and Videos

웹 사이트에는 이미지 및 비디오와 같은 다양한 미디어가 포함되어 있기 때문에, 이러한 미디어가 포함되어 있는 경우 사용자가 올바르게 볼 수 있도록 비례적으로 크기가 조정되었는지 확인하는 것이 중요하다.

.container {
  width: 50%;
  height: 200px;
  overflow: hidden;
}
 
.container img {
  max-width: 100%;
  height: auto;
  display: block;
}

예시에서 .container는 컨테이너 div를 나타며, 브라우저 너비의 절반인 50%의 폭과 200픽셀의 높이로 설정된다.

overflow를 hidden으로 설정하면 컨테이너보다 큰 dimension을 가진 모든 내용이 보기에서 숨겨진다.

 

두 번째 CSS 규칙은 컨테이너의 너비에 따라 이미지가 확장되도록 하며, height property는 auto로 설정된다.

이미지의 높이가 폭에 비례하여 자동으로 조정되며, display는 이미지를 인라인 블록이 아닌 block level 요소로 표시한다.

이렇게 하면 이미지가 페이지의 다른 내용(예: 텍스트)과 정렬하지 못하게 되어 이미지에 의도하지 않은 여백을 추가할 수 있다.

 

이미지와 비디오의 크기를 비례적으로 조정하는 데 사용되는 매우 일반적인 디자인 패턴이기 때문에, 예시 전체를 암기하도록한다.

 

참고: 예시에서는 이미지(또는 비디오)의 너비를 컨테이너의 너비로 조정한다. 이미지가 컨테이너보다 크면 이미지의 수직 부분이 overflow되고 표시되지 않는다. 이 동작을 바꾸기 위해 max-height를 100%로 설정하고 width를 auto로 설정하면 컨테이너의 높이에 따라 이미지의 높이가 조정된다. 이때 이미지가 컨테이너보다 크면 이미지의 수평 부분이 overflow 되고 표시되지 않는다.

Scaling Background Images

HTML 요소의 배경 이미지 또한 CSS property을 사용하여 확장될 수 있다.

body {
  background-image: url('#');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

첫 번째 CSS declaration은 배경 이미지를 설정한다(#은 이 예에서 이미지 URL의 자리 표시).

두 번째 declaration은 CSS 컴파일러에게 이미지를 반복하지 않도록 지시한다(기본적으로 이미지는 반복됩니다).

세 번째 declaration은 이미지의 중심을 요소 내에 맞춘다.

 

최종 declaration이 예시의 포커스이며, 배경 이미지의 크기를 조정한다.

이미지는 이미지의 비율을 유지하면서 요소의 전체 배경을 포함한다.

이미지의 치수가 컨테이너의 치수를 초과하면 이미지의 일부만 표시된다.

참고

 

하드코딩 - 나무위키

이 저작물은 CC BY-NC-SA 2.0 KR에 따라 이용할 수 있습니다. (단, 라이선스가 명시된 일부 문서 및 삽화 제외) 기여하신 문서의 저작권은 각 기여자에게 있으며, 각 기여자는 기여하신 부분의 저작권

namu.wiki

 

Making a Website Responsive: Learn Responsive Design Cheatsheet | Codecademy

Learn responsive design techniques, like relative sizing units and media queries, to create websites viewable on devices of all sizes.

www.codecademy.com

반응형

'IT > CSS' 카테고리의 다른 글

Layout with Flexbox  (0) 2021.05.22
Responsive Design - II  (0) 2021.05.16
Secondary Navigation  (0) 2021.05.08
Links and Buttons  (0) 2021.05.08
Text Design  (0) 2021.05.08

관련글

댓글

티스토리툴바