CSS의 폭과 높이 단위, vw / vh / vmin / vmax

W3Schools.com 관련 페이지 캡처

 

viewport : 브라우저 윈도 창의 크기, 가변적

 

※ CSS Viewport is defined as the visible area on a window screen which refers to the displays of the mobile devices. Adding CSS <meta> tag with viewport is an efficient way to improve the web pages to look on smaller screens. The ViewPort is not the same size as the original Webpage. It is not a standard but still tagged as a key approach for Responsive Web Design. In simple terms, viewport helps web browsers to break pages and add them on a small screen in a readable format (prevents side scroll). Here Let’s learn the Viewport meta tag in our CSS.

[출처] CSS Viewport | How to Use Viewport in CSS with Examples (educba.com)

 

"The viewport is the user's visible area of a web page. The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen."

[출처] https://www.w3schools.com/css/css_rwd_viewport.asp

 

"The concept of the viewport

The CSS viewport refers to the part of the website, which is visible in the browser window. Therefore, the viewport is usually not the same size as the actual page. Mobile phones and other devices with smaller screens display pages in a virtual window or viewport."

[출처] https://www.bitdegree.org/learn/meta-viewport

---

vw : 뷰포트 가로(폭)의 1% 단위로 지정

Relative to 1% of the width of the viewport

 

vh : 뷰포트 높이의 1% 단위로 지정

Relative to 1% of the height of the viewport

 

vmin : 뷰포트 가로와 세로 중 짧은 면의 1% 단위로 지정

Relative to 1% of the viewport's smaller dimension

 

vmax : 뷰포트 가로와 세로 중 긴 면의 1% 단위로 지정

Relative to 1% of the viewport's larger dimension

---

적용 사례

 

- 뷰포트 폭(가로)의 15% 크기로 폰트 크기 지정

h1 {
  font-size: 15vw;
}

 

- 뷰포트 높이(세로)의 30% 크기로 폰트 크기 지정

h1 {
  font-size: 30vh;
}

 

- 뷰포트 짧은 면의 15% 크기로 폰트 크기 지정

h1 {
  font-size: 15vmin;
}

 

- 뷰포트 긴 면의 15% 크기로 폰트 크기 지정

h1 {
  font-size: 15vmax;
}

 

- 'header' 클래스의 폭을 뷰포트 폭의 100% 크기로 지정

.header {

   width: 100vw;

}

 

- 'article-view' 클래스, 'iframe'의 높이를 뷰포트 긴 면의 56% 크기로 지정

.article-view iframe {
   height: 56vmax;
}

 

※ iframe : inline frame element, an embedded HTML page of a HTML page

---

[참고] W3SCHOOLS, CSS Units, "https://www.w3schools.com/cssref/css_units.asp"

---

CSS 공부
clear - CSS: Cascading Style Sheets | MDN (mozilla.org)

 

If an element contains only floated elements, its height collapses to nothing. If you want it to always be able to resize, so that it contains floating elements inside it, you need to self-clear its children. This is called clearfix, and one way to do it is to add clear to a replaced ::after pseudo-element on it.

 

#container::after {
	content: "";
	display: block;
	clear: both;
}