깡뇽

[Front-End] 반응형 웹사이트와 상대 측정 본문

Web/HTML & CSS

[Front-End] 반응형 웹사이트와 상대 측정

깡뇽 2021. 2. 8. 23:50
반응형

반응형 웹사이트 디자인이란?

디자인과 개발이 화면 크기, 플랫폼 및 방향 같은 사용자의 행동과 환경에 반응하는 것을 말한다.

→ 웹사이트에 있는 다른 콘텐츠의 크기와 웹사이트를 보고 있는 화면의 크기를 기반으로 콘텐츠의 크기를 조정하고 재구성한다.

 

Pixel(픽셀)은 고정된 하드 코딩 값. 즉, 화면 크기가 변하면 픽셀 크기의 요소가 너무 작게 보이거나 화면을 넘치게 된다.

→ CSS를 사용하여 하드 코딩 측정을 피하고 상대 측정을 사용해야 한다.

∴ 상대 측정을 통해 화면 크기나 레이아웃에 관계없이 웹 사이트의 비율을 유지시킬 수 있다.

 

⤷ 반응형 웹 디자인에 대해 자세히 설명하고 있는 사이트

www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/

 

Responsive Web Design - What It Is And How To Use It — Smashing Magazine

Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In

www.smashingmagazine.com

 

상대 측정

◎ Em

em은 CSS에서 사용할 수 있는 상대 측정 단위 중 하나.

과거에 em은 사용되는 서체와 크기에서 대문자 M의 너비를 나타냈었지만 지금은 그렇지 않다.

오늘날은 현재 요소의 글꼴 크기를 나타내거나, 아무것도 제공되지 않은 경우 브라우저에서 설정한 기본 기본 글꼴 크기를 나타낸다.

ex) 브라우저 기본 글꼴 : 16px -> 1em = 16px , 2em = 32px

 

 

◎ Rem

rem은 CSS에서의 두 번째 상대 측정 단위.

Rem은 root em을 의미한다. 

em과 유사하게 작동하지만 글꼴 크기를 조정하기 위해 부모 요소를 확인하는 대신 루트 요소 <html> 태그를 확인한다.

대부분의 브라우저는 글꼴 크기 <html>를 16 픽셀로 설정하는데 원한다면 CSS 규칙을 추가할 수 있다.

ex) html태그 요소의 폰트 크기를 20px라고 했으므로, h1의 폰트 크기는 40px가 된다. 

html {
  font-size: 20px;
}

h1 {
  font-size: 2rem;
}

 

☆전체 웹 사이트에서 일관되게 요소의 크기를 조정하는 데 관심이 있다면 rem 측정이 작업에 가장 적합한 단위이고, 근처의 다른 요소와 비교하여 요소의 크기를 조정하는 데 관심이 있다면 em 단위가 작업에 더 적합할 것입니다.

 

 

◎ 백분율 : height & width

백분율(%)은 페이지의 상위 요소를 기준으로 텍스트가 아닌 HTML 요소의 크기를 조정할 수 있음.

백분율이 사용되면 요소는 상위 요소 (컨테이너라고도 함)의 크기에 상대적으로 크기가 조정된다.

백분율은 종종 너비 및 높이, 패딩, 테두리 및 여백과 같은 상자 모델 값의 크기를 지정하는 데 사용된다. 

또한 위치 지정 속성 (위쪽, 아래쪽, 왼쪽, 오른쪽)을 설정하는 데 사용할 수도 있다.

ex) sub에 해당하는 부분의 크기는 높이 100픽셀, 넓이 150픽셀이 된다.

.main {
  height: 200px;
  width: 300px;
}

.main .sub {
  height: 50%;
  width: 50%;
}

부모 요소의 크기를 먼저 설정하지 않으면 자식 요소의 크기가 잘못 설정될 수 있으니 주의.

※ 상자 모델에는 패딩, 테두리 및 여백이 포함되어 있으므로 요소의 너비를 100%로 설정하면 내용이 상위 컨테이너로 오버플로우 될 수 있다. 100%는 콘텐츠에 패딩, 테두리, 마진이 없을 때만 사용해야 한다.

 

 

◎ 백분율 : padding & margin

백분율(%)을 사용하여 요소의 패딩과 마진을 설정할 수도 있음.

백분율을 사용하여 높이와 너비를 설정하면 하위 요소의 치수가 상위 요소의 치수를 기준으로 계산되는데 

패딩 및 여백을 설정하는 데 백분율을 사용하는 경우 부모 요소의 너비 만을 기준으로 계산된다.

 

ex) margin-left와 같은 속성을 백분율(50%)로 설정하면 하위 요소가 부모 컨테이너의 오른쪽 절반으로 이동된다(부모 요소의 마진 반을 받는 것과는 반대로). 수직 패딩과 여백도 부모 너비를 기준으로 계산된다.

그 이유에 대한 시나리오로 1. 컨테이너 div가 정의되었지만 높이가 설정되지 않았다 (평평한 상태). 2. 컨테이너에는 하위 요소가 추가된다. 자식 요소에는 설정된 높이가 있다. 이로 인해 상위 컨테이너의 높이가 해당 높이로 늘어난다. 3.하위 요소를 변경해야 하며 높이가 수정된다. 이렇게하면 부모 컨테이너의 높이도 새 높이로 늘어난다. 이 주기는 자식 요소의 높이가 변경 될 때마다 끝없이 발생한다!

→ 높이가 설정되지 않은 경우 (부모의) 자식 요소의 변경으로 인해 높이가 지속적으로 변경된다. 이것이 수직 패딩과 여백이 높이가 아닌 부모의 너비를 기반으로 하는 이유.

 

 

◎ 너비와 높이 : 최소 & 최대

상대적 측정은 화면 크기가 다른 장치에서 일관된 레이아웃을 제공하지만, 웹 사이트의 요소가 너무 작거나 커지면 온전하지 못할 수 있으므로 min-width와 max-width를 사용하여 요소의 너비를 제한할 수 있다.

<너비>

•  min-width : 요소의 최소 너비를 보장.

•  max-width : 요소의 최대 너비를 보장.

<높이>

•  min-height : 요소의 최소 높이를 보장.

•  max-height : 요소의 최대 높이를 보장.

ex) 브라우저 크기를 조정할 때 단락 요소의 너비는 300 픽셀 미만으로 떨어지거나 600 픽셀을 초과하지 않는다.

p {
  min-width: 300px;
  max-width: 600px;
}

 

 

◎ 이미지와 비디오 크기 조정

웹 사이트에 이미지 및 비디오와 같은 다양한 미디어가 포함돼있으니 사용자가 올바르게 볼 수 있도록 비율을 조정하는 것이 중요하다.

ex) 이미지와 비디오의 비율을 비례적으로 조정하는 데 사용되는 매우 일반적인 디자인 패턴

.container {
  width: 50%;
  height: 200px;
  overflow: hidden;
}

.container img {
  max-width: 100%;
  height: auto;
  display: block;
}

위의 예에서 .container는 div이다.

너비 50%(브라우저 너비의 절반)와 높이 200 픽셀로 설정된다.

컨테이너보다 크기가 큰 모든 콘텐츠가 숨겨지도록 overflow를 hidden으로 설정한다. 이미지가 컨테이너의 너비에 따라 조정되도록 height속성은 auto로 하여 자동 폭에 비례하여 맞춰지도록 한다.

마지막으로 이미지를 (기본 상태 인 인라인 블록이 아닌) 블록 수준 요소로 표시한다.

이렇게 하면 이미지가 페이지의 다른 콘텐츠 (예 : 텍스트)와 정렬되지 않도록 해서 이미지에 의도하지 않은 마진을 추가할 수 있다.

 

+) 이미지의 너비를 컨테이너 너비로 조정함.

이미지가 컨테이너보다 크면 이미지의 세로 부분이 넘쳐 표시되지 않음.

max-height에 100%, width에 auto로 바꾸어 설정하면, 이미지 높이가 컨테이너의 높이가 되고 이미지가 컨테이너보다 크면 이미지의 너비가 오버플로우 되어 표시되지 않음.

 

 

◎ 배경 이미지 크기 조정

HTML 요소의 배경 이미지는 CSS 속성을 사용하여 반응형으로 크기를 조정할 수 있다.

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

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

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

세 번째 선언은 요소 내의 이미지를 중앙에 배치한다.

최종 선언은 배경 이미지의 크기를 조정하는 것이다. 이미지는 이미지의 비율을 유지하면서 요소의 전체 배경을 덮는다. 이미지의 크기가 컨테이너의 크기를 초과하면 이미지의 일부만 표시된다.

 

반응형
저작자표시 비영리 변경금지

'Web > HTML & CSS' 카테고리의 다른 글

[Front-End] Flexbox  (0) 2021.02.14
[Front-End] 미디어 쿼리  (0) 2021.02.10
[Front-End] 보조 탐색  (0) 2021.02.07
[Front-End] 링크와 버튼  (0) 2021.02.05
[Front-End] 텍스트 디자인  (0) 2021.02.04
'Web/HTML & CSS' Related Articles more