와 대박 vh에 대한 삽질

와대박 이제 이해함

 

지금까지 vh를 vw로 쓴 이유가

가로 vw는 보통 페이지가 가로로 길어지진 않고, 화면이 1920px로 고정되어있으니까 넓어지지않는데

세로 vh는 컨텐츠가 많으면 페이지가 막 2000px까지 늘어날수도있는데, vh는 늘어난 페이지 2000px을 기준으로하니

디자인을 1080px로 했을 때 컨텐츠들이 늘어나는거 아님????????????

 

했는데 아니었음

걍화면 기준이었음...

 

 

 

네, 맞습니다. vw와 vh 단위는 각각 뷰포트 너비와 높이의 백분율을 기준으로 합니다.

• vw (viewport width): 뷰포트 너비의 1%를 의미합니다. 예를 들어, 1920px 너비의 화면에서 1vw는 19.2px입니다.
• vh (viewport height): 뷰포트 높이의 1%를 의미합니다. 예를 들어, 1080px 높이의 화면에서 1vh는 10.8px입니다.

vh 단위는 뷰포트 높이를 기준으로 하기 때문에, 컨텐츠가 많아져서 페이지가 길어지더라도 vh 단위로 지정된 요소의 높이는 변하지 않습니다. 이는 뷰포트의 높이에 따라 고정되기 때문입니다.

만약 컨텐츠가 많아져서 페이지가 길어질 때 요소의 높이를 조절하고 싶다면, vh 대신 상대적인 단위(예: em, %, rem)나 고정된 단위(예: px)를 사용하는 것이 좋습니다.

예를 들어, 컨텐츠가 많아질 때 요소의 높이를 조절하고 싶다면 다음과 같이 할 수 있습니다:

예시

 

 

/* 상대적인 단위 사용 */

.searchBox {

    height: 4em; /* 폰트 크기를 기준으로 높이 설정 */

}

 

/* 고정된 단위 사용 */

.searchBox {

    height: 50px; /* 고정된 높이 설정 */

}

 

 

 

 

이렇게 하면 컨텐츠가 많아져서 페이지가 길어지더라도 요소의 높이가 적절하게 조절됩니다.

 

 

 

고마워요 코파일럿!@

+ 아니었어요!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

추가로 따로 더 알아봣는데

걍 무작정 vw vh쓰면 안되는거였음;;;;;

반응형이필요할때만쓰고 변동ㅇ이필요없는 요소는 다른걸 써도된다는거였음....

 

 

걍 vw vh가 처음에 줄어드는게 너무 신기해서 vw vh신봉자가 된거였음.....................................

ㅎㅎ