모바일 환경이 중요해지면서,
프런트 앤드 개발자들은 모두 반응형을 고려해서 작업을 한다.
PC환경과 모바일 환경 모두 가독성을 잡기 위해서는
각 스크린 사이즈마다, 적당한 사이즈를 찾아서 적용하는 것이 중요하다.
📐CSS 반응형 단위 vw, vh
반응형으로 개발한 다 고하면, 대부분의 개발자들이 익숙한 단위는 %를 생각한다.
해당 %를 지정할 경우 스크린 넓이에 해당 % 맞춰서 자동 조절된다.
이와 비슷한 개념으로 이용되는 것이 vw, vh이다.
- vw : 뷰포트 너비의 1%, 뷰포트 가로 사이즈가 기준
- vh : 뷰포트 높이의 1% , 뷰포트 세로 사이즈가 기준
CSS에서 사용하는 vw와 vh는 상대적 길이 단위로
비교대상과 비교해서 상대적인 크기를 측정하는 단위이다.
예를 들어보자, 현재 브라우저 화면이 1000px이라고 가정하면,
div 박스 width를 10vw로 지정하면, 실제로 표시되는 넓이는 100px가 차지한다.
그런 뒤, 화면을 크기를 조절해서 1500px로 늘리게 되면
div박스 with 10vw로 지정한 div의 실제 넓이는 150px로 표시될 것이다.
🧮 vw, vh 계산기 활용
위의 예시처럼 vw 계산을 위해서는 전체 넓이에 몇 정도를 차지해야 되는지
계속 계산이 필요하다. 간단한 % 와 다르게 계속 계산을 해야 되기 때문에,
vw를 이용해서 css를 작성한다면 이미 만들어진 vw, vh 계산기를 켜놓고 작업하면
좀 더 편하게 코드를 작성할 수 있다.
VW 계산기
publishing.kr
실제 적용 예시
2021.01.01 - [FrontEnd/css] - [css/svg] css animation과 svg를 활용해 글자가 그려지는 효과 만들기
svg 중 기존에 만든 코드를 보면 반응형이 전혀 적용되지 않았던 코드이다.
svg로 Text를 만들어서 넓이를 525px로 고정하여 x표 좌표를 옮겨서 만들었던 텍스트 svg를
반응형을 적용해보도록 하겠다.
기존 코드
<svg width=525 height=160 viewBox="0 0 525 160">
<text x="0" y="50%">O</text>
<text x="45" y="50%">R</text>
<text x="90" y="50%">D</text>
<text x="135" y="50%">I</text>
<text x="155" y="50%">N</text>
<text x="199" y="50%">A</text>
<text x="240" y="50%">R</text>
<text x="285" y="50%">Y</text>
<text x="350" y="50%">C</text>
<text x="395" y="50%">O</text>
<text x="440" y="50%">D</text>
<text x="485" y="50%">E</text>
</svg>
반응형으로 만들기
기존에 만들었던 x표 좌표를 vw로 바꿔주자.
위에 말한 계산기를 이용하도록 하자.
반응형 적용 코드
위의 코드를 반응형 코드인 vw를 이용해서 변경해서 완성한 코드이다.
해당 코드를 적용해보면 화면을 조정하면 svg가 화면비율에 딱 맞게 조정되는 것을 확인할 수 있다.
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
body {
width: 100%;
height: 100%;
background: #16345A;
padding: 0;
margin: 0;
}
.text-box {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
svg.title {
display: block;
width: 100%;
}
svg.title text {
font-family: 'Staatliches', cursive;
font-size: 17vw;
fill: #F1C164;
}
</style>
</head>
<body>
<div class="text-box">
<svg class="title" height="17vw">
<text x="1vw" y="17vw">O</text>
<text x="9vw" y="17vw">R</text>
<text x="17vw" y="17vw">D</text>
<text x="26vw" y="17vw">I</text>
<text x="30vw" y="17vw">N</text>
<text x="38vw" y="17vw">A</text>
<text x="46vw" y="17vw">R</text>
<text x="54vw" y="17vw">Y</text>
<text x="67vw" y="17vw">C</text>
<text x="75vw" y="17vw">O</text>
<text x="84vw" y="17vw">D</text>
<text x="92vw" y="17vw">E</text>
</svg>
</div>
</body>
</html>
'FrontEnd > css' 카테고리의 다른 글
| [css] 레이아웃 구성 시 position fixed 와 sticky 차이 알아보기 (0) | 2021.08.16 |
|---|---|
| css 선택자 반복 코드를 줄여주는 :is 사용 방법 (css 코드 줄이기) (0) | 2021.08.14 |
| css로 만드는 체크박스 ON/OFF 스위치 버튼 디자인 예제(라이트모드/다크모드) (2) | 2021.03.04 |
| [css/svg] css와 svg, ::after&::before를 활용한 버튼 hover효과를 만들기 (0) | 2021.01.06 |
| [css/svg]css animation과 svg를 활용해 글자가 그려지는 효과 만들기 (2) | 2021.01.01 |