CSS CSS 정사각형 만들기 - %와 vw, vh의 차이점 (가로 세로 비율 유지하기)
페이지 정보
조회 746회 작성일 22-06-20 01:55
본문
CSS 정사각형 만들기
%와 vw, vh의 차이 (가로 세로 비율 유지하기)
고정 크기라면 문제가 없는 이야기지만, 반응형 가변 크기라면 정사각형을 만들기가 어렵다.
그것을 해결하는 여러 가지 방법 중 vw, vh를 이용한 방법을 소개한다.
CSS 정사각형 만들기 - %와 vw, vh의 차이점 (가로 세로 비율 유지하기)
반응형이면 정사각형을 만들기 어려운 이유
정사각형이 단 한 개라면 이것까지는 쉽다.
그렇지만 정사각형이 여러 개이고, 거기다가 반응형이면 가로가 계속 변하기 때문에 그때 그때 세로의 크기도 변해야 한다는 어려움이 생기는 것이다.
보통, 한 화면에 두 개의 요소를 넣을 때, CSS에서는 아래처럼 가로를 정할 것이다.
[code]
<script>
.대상요소이름 { width:50%; }
</script>
[/code]
50%이므로 전체의 반씩 차지하는 사각형을 만들게 된다.
여기서 문제는 세로를 무엇의 50%로 해야 하는가이다.
그런데 이것으로 정사각형을 만드는 것은 애초에 불가능하다. 모니터나 휴대폰 자체가 정사각형이 아니기 때문이다.
CSS 정사각형 만들기
그러면 이렇게 해 보자. 위의 코드에 vw를 사용하는 것이다.
[code]
<script>
.대상요소이름 { width:50vw; height:50vw; }
</script>
[/code]
사실, vw는 가로의 길이를 말하고, vh는 세로의 길이를 말한다.
그러나... 위의 코드를 잘 보라, 세로 길이(height)에 vw를 써버렸다. 세로 길이에 가로 단위를 쓴 것이다.
그런데, 이렇게 하면 정사각형이 된다. height에 가로 길이를 넣었기 때문이다.
%로 할 때는 무엇을 기준으로 퍼센트를 정해야 정사각형이 될지 문제가 되었지만, vw, vh로 할 때는 가로를 기준으로 세로를 정하는 것이 가능해지는 것이다.
물론, 크기가 마음에 안 든다면 숫자를 같은 비율로 줄이거나 늘리면 된다.
%와 vw, vh의 차이점은 뭘까?
- %는 자신을 감싸고 있는 크기를 기준으로 비율을 정하는 것이다.
- vw, vh는 모니터 전체의 크기까지 생각한 기준으로 비율을 정하는 것이다.
그래서 이런 vw, vh와 퍼센트는 이런 차이점도 생긴다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
- %는 화면 오른쪽 끝과 화면 아래에 생기는 스크롤바 안까지만 전체라고 생각한다.
- vw, vh는 스크롤바를 무시하고 실제 모니터의 크기를 전체라고 생각한다.
그러므로, 이런 저런 추가 요소의 영향까지 다 받는 상태의 상대적인 크기를 가지고 작업한다면 %가 편하고, 무조건 화면이라는 하나의 조건에 대해 크기를 정하고 싶다면 vh, vw가 더 편하다.
단, 일반적으로는 %를 쓰는 경우가 더 많다.