# vh

vw, vh
vw와 vh는 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환한다.vw (viewport width) : 뷰포트의 폭에 근거하여 1vw는 width 의 1% 와 같다.vh (viewportheight) : 뷰포트의 높이에 근거하여 1vh는 Height 1% 와 같
2023.08.03
웹뷰 프로젝트를 진행하고있다.할때마다 느끼는건데, 웹뷰는 프론트만 잘 구현한다고 되는게 아닌 것 같다.회사별, Android, IOS 플랫폼별 웹뷰 정책이 너무 천차만별이라 어디선 되고 어디선 안되는게 너무 많다.일단 진행하면서 경험한 이슈들을 정리해본다. Androi

[F-Lab 모각코 챌린지 44일차] CSS 단위 (px, %, vh, vw, em, rem)
CSS 단위 (px, %, vh, vw, em, rem)

[CSS] vw와 vh
뷰포트(viewport)는 웹 페이지가 표시되는 화면 영역을 의미한다.뷰포트는 사용자가 웹 페이지를 볼 때 실제로 보이는 영역으로, 브라우저 창이나 모바일 기기의 화면 크기에 따라 동적으로 변한다.뷰포트 너비의 1/100을 나타내며, 뷰포트의 너비에 상대적인 크기를 지
CSS 단위(작성중)
px : 픽셀em: 요소의 글자 크기rem : root element(html)의 글자 크기vw : 뷰포트 가로 너비의 백분율vh : 뷰포트 세로 너비의 백분율

CSS-grid(2)
block 요소는 width와 height이 주어져 있지 않을 경우, width는 최대값으로 heigthdms '0'으로 표현된다.따라서, grid container에 height값을 지정해 줘야한다.fr = fraction(부분)gird에서 사용 가능한 공간을 뜻하며
[CSS in Depth] 2. Working with relative units - part 2
상대단위로 em과 rem만 있는 것이 아니다. 브라우저 뷰포트의 상대적 크기(길이)를 정의하기 위한 뷰포트 단위도 존재한다. Viewport 란출처: MDN - Viewport 컴퓨터 그래픽스에서, 뷰포트(viewport)는 현재 화면에 보여지고 있는 다각형(보통 직사
[CSS] 박스 모델(1) 2-6
inline이 아닌 요소는 width와 height로 크기를 조절할 수 있다.부모의 길이에 상대적인 %뷰포트(viewport) 너비와 높이의 1/100 단위인 vw와 vh이들 중 큰 것과 작은 것의 1/100 단위인 vmax와 vmin(텍스트가 한 줄일 경우) heig
rem/em/vw/vh...의 max()? min()?
폰트 사이즈가 기본 3vw이며 최대 32px가 되면 그 값에서 홀딩폰트 사이즈가 기본 3vw이며 최소 12px로 되어지면 그 값에서 홀딩이처럼 min, max를 섞어서 사용도 가능하다!출처

height
vh(veiwport high) 를 사용하면 내가 보는 화면에 꽉 찹니다하지만 퍼센트를 쓰면보이지 않습니다body에 height가 충분하지 않아서 그렇것입니다 보이게 하려면body와 html에 100% 를 줘야하는데 선택자가 두개나 더 생기기 때문에 height를 줄때

Front-end 국비지원 #012일
HTML 구성CSS 구성HTML 구성CSS 구성HTML 구성CSS 구성최대한 중복되는 HTML의 클래스를 이용하여 CSS를 작성한다.onmouse(마우스를 올릴때 바뀌는 이벤트)onmouseover="this.src='경로'" onmouseout="this.src='경
[CSS] CSS 단위 완벽 정리 (px, %, em, rem, vw, vh)
CSS의 단위에는 여러 가지가 있는데, 크게 절대적인 유닛과 상대적인 유닛으로 나눌 수 있다. 절대적 유닛은 말 그대로 값이 변하지 않는 px, pt 등을 의미한다. 상대적 유닛은 반응형 디자인에 많이 쓰이는 %, em, rem, vw, vh 등을 의미한다.
절대 단위와 상대 단위
절대 단위 (Absolute length units) : 다른 것과 상관 없이 항상 동일한 크기인 단위 px pt | 단위 | 관련 사항 | |:---:|-----| |px|픽셀| |pt|포인트| 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로

css 단위 | em, rem, vw, vh, %
절대단위(absolute unit) : css에서의 절대단위는 보통 px(픽셀), pt(포인트)를 많이 쓴다. 그렇지만 이 단위들은 화면의 크기가 변화해도 변하지 않기에 추천하지 않는다.상대단위(relative unit) : 브라우저를 기준으로 폰트 사이즈가 유연하게

픽셀 값을 변환하자!
프로젝트에서 웹 프론트뷰를 짜다보면 px값을 rem 단위로 변환하거나 뷰 포트 단위로 변환해야하는 경우가 생긴다. 그때 유용한 페이지! (사실 내가 보려고 출간,,)px을 em / rem으로 변환px을 vw / vh 뷰포트 단위로 변환

가변크기단위 / em, %, rem, vw, vh, vmin, vmax
px 같은 고정크기 단위가 아닌 주변의 font-size를 기준으로 변하는 단위가 있다!하나씩 알아보자.간혹 1em, 2em 보일 때가 있었다. 배수를 뜻하는 가변크기 단위다.⭐ 기준 : 부모의 글자크기출력(부모의 크기값 \* 자식의 em 값) = 자식이 가지게 될 크

100vh, viewport 주의점
viewport 사용하지말자?! 최근 모바일용 웹을 개발하면서 한 화면에서 스크롤이 생기지 않도록 만들 필요가 있었는데.... 너무 고생을 해서 기록을 남겨놓는다.

CSS 프로퍼티 값의 단위
px은 픽셀(화소) 단위이다. 1px은 화소 1개 크기를 의미한다.픽셀은 디바이스 해상도(resolution)에 따라 상대적인 크기를 갖는다.이와 같이 디바이스 별로 픽셀(화소)의 크기는 제각각이기 때문에 픽셀을 기준으로 하는 단위는 명확하지 않다.%는 백분률 단위의