해말그미의 코딩공부

TIL : 반응형 웹 1 본문

TIL

TIL : 반응형 웹 1

해말그미 2024. 8. 2. 23:56
https://www.youtube.com/watch?v=yRyphOqSFKo&list=PLFeNz2ojQZjvPhBMUy3-641YBOOyLrXYS&index=1
위 강의를 요약한 블로그 글입니다.

 

🌼 개요

반응형 웹이란, 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해 가며 반응하는 웹문서 또는 이를 위해 사용하는 기법을 뜻한다.

 

뷰포트는 현재 화면에 보여지고 있는 영역

기기 별로 뷰포트가 다르기 때문에, 동일한 웹 페이지라도 기기에 따른 배율 조정이 발생해 화면의  크기가 다르게 보이는 현상이 발생한다.

 

기기에 따라 다른 화면 크기에 대응하기 위해, 웹문서에 viewport 속성에 대한 마크업을 추가해야 한다.

너비를 기기의 너비 기준으로 초기화하겠다, 이니셜 스케일은 원상태 그대로()

 

이 정도 크기가

이렇게 작아지는 걸 알 수 있다.

데스크톱에서의 배율 기준과 모바일에서의 배율이 서로 달라서 그런 것이다.

이런 차이를 극복하기 위해서 

viewport 속성에 대한 마크업을 추가

 

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

 

 

🌼 상대 단위 em , rem

절대 길이 단위 px

입문 레벨에서 가장 많이 사용하는 단위인 px(픽셀)은 절대 길이 단위로 어떤 상황에서도 동일한 값을 유지하므로, 가변성이 없습니다.

 

em과 rem은 박스에서 텍스트 크기를 조정할 때 사용하는 상대 단위로

em은 부모 요소의 글꼴 크기를, rem은 루트 요소의 글꼴 크기를 의미한다.

루트 요소는 <html>요소를 말하는 것이고, 루트 요소 글자 크기 기본값은 16px이다.

 

또한 em으로 내, 외부 여백 크기(패딩 , 마진)를 정할 때는 자기 자신의 글자 크기를 기준으로 한다.

 

🌼 vw vh vmin vmax => 뷰포트 크기를 기반으로 값을 계산하여 크기를 결정하는 가변 단위

em rem은 주변 상황에 따라 크기를 달리 할 수 있지만 , 브라우저나 기기 화면에 크기에 따라 달라지는 단위는 아니다. 

(상위 글자 크기에 따라 달라지는 것)

 

font-size : 1vw; /*뷰포트 너비의 100분의 1*/
font-size : 1vh; /*뷰포트 너비의 100분의 1*/
font-size : 1vmin; /*뷰포트 높이와 너비 중 작은 쪽의 100분의 1*/
font-size : 1vmax; /* 뷰포트 높이와 너비 중 큰 쪽의 100분의 1 */

화면 너비의 백분율을 계산 해서

font-size : 50vw; 하면 50/100 해서 화면의 반만큼 차지한다. 

 

🌼 가변 레이아웃(가변 그리드)

부모 요소의 크기에 비례해 자식 요소의 크기가 변하는 방식은 가변 레이아웃을 만들 때 흔히 사용되는 방식.

% 단위는 백분율 값을 나타내고, 부모 요소와 상대적 크기를 지정할 때 사용

 

960px처럼 고정사이즈로 하면 화면 크기가 줄었을 때 잘릴 수 있기에  % 써준다.

padding:10% 하면 부모의  width를 기준으로 잡는다. 

'TIL' 카테고리의 다른 글

TIL : 반응형 웹 3  (0) 2024.08.05
TIL : 반응형 웹 2  (0) 2024.08.03
TIL : 24.07.24  (0) 2024.07.24
TIL : 24.07.23  (0) 2024.07.23
TIL : 24.07.22  (0) 2024.07.22
'TIL' Related Articles more
Comments