https://www.youtube.com/@uknowcoding/videos
2강 반응형 웹이란
모바일의 등장으로 본격화됨, 데스크톱 화면을 위해 존재했던 웹 문서의 설계에 변화요구되기 시작, 변화 초기에는 모바일 전용 URL 을 제공하는 방법이 주로 사용됨, 네이버가 현재 그러한 방식임
모바일 환경과 격리가 성공적으로 정착한 사례도 물론 있지만, 기기의 유형이 갈수록 다양해짐에 따라 한계가 존재함
사용하는 기기에 적절하게 맞춰지는 사이트를 개발하는 것이 바람직함
즉, 반응형 웹 사이트를 만드는 것이 좋음. 반응형 웹 사이트에서 가장 핵심이 되는 요소가 가변성임
뷰포트(viewport)란?
현재 화면에 보여지고 있는 영역을 의미
기기 별로 다른 화면 크기에 대응하기 위해, 웹 문서에 뷰포트 속성에 대한 마크업을 추가해야 함
동일한 웹 페이지라도 기기에 따른 배율 조정이 발생해 화면의 크기가 다르게 보이는 현상이 나타남
가변성을 위해서 체크해야 할 사항 viewport
content = width=device-width
3강 상대 단위 em&rem
박스에서 텍스트 크기를 조정할 때 사용하는 상대 단위
절대 길이 단위 px(픽셀) : 입문 레벨에서 가장 많이 사용하는 단위, px 어떤 상황에서도 동일한 값을 유지, 가변성이 없음
em이란?
부모 요소의 글꼴 크기
em으로 여백 크기(padding, margin)를 정할 때는 자기 자신의 글자 크기를 기준으로
ex. 부모가 32, em은 당연히 32
rem이란?
루트 요소의 글꼴 크기
*Padding이란?
요소의 내용과 경계(Border) 사이의 간격
요소 내부의 여백을 조정할 때 사용
배경색이나 경계선이 포함될 경우, padding 영역도 배경색에 포함됨
*Margin(외부 여백) 이란?
요소의 경계와 다른 요소 사이의 간격
요소 외부의 간격을 조정할 때 사용
인접한 요소 간의 간격을 설정하는 데 유용
padding : 1rem;
margin : 1rem;
pedding, margin의 폰트사이즈
개발자 도구 - 레이아웃 보면 됨
em과 rem은 브라우저 기기 화면 에 따라 크기가 달라지는 단위 아님, 따라서 진정한 반응형 단위라고 할 수 없음
#4강 뷰포트 단위 vw vh vmin vmax
vw(Viewport Width)
- 뷰포트 너비가 1000px일 경우, 1vw는 10px.
- 따라서 50vw는 뷰포트 너비의 50% (500px).
vh (Viewport Height)
vmax = 너비와 높이 중에 큰 거를 쓰겠다
vmin Viewport Minimum
*내용 정리
뷰포트 크기를 기반으로 크기를 계산하는 가변 단위들이 있음
vw는 뷰포트 너비의 100분의 1 크기를 뜻함
vh는 뷰포트 높이의 100분의 1크기를 뜻함
vmin은 뷰포트 높이와 너비중 작은 쪽의 100분의 1 크기를 뜻함
vmax는 뷰포트 높이와 너비 중 큰 쪽의 100분의 1 크기를 뜻함
ex. 뷰포트 단위 사용
body {
margin: 0;
padding: 0;
}
.container {
width: 100vw;
height: 100vh;
background: linear-gradient(to right, #ff7e5f, #feb47b);
font-size: 2vmin; /* 화면 크기에 따라 텍스트 크기 변화 */
display: flex;
align-items: center;
justify-content: center;
}
5강 가변 레이아웃(가변 그리드)