🌈 미리 보기
1. 가로 900px 이하
2. 가로 900px 미만 && 1400px 이상
3. 가로 1400px 초과
⌨️ 소스
1. window.innerWidth 함수 사용
2. 미디어 쿼리 사용 -> 가으더님 코드
같이 공부하는 팀원인 가으더님은 미디어쿼리를 공부한 후 적용해보셨다고 한다.
(가으더님 블로그: https://yh4752.tistory.com/)
💻 결과
결과는 동일하다.
가으더님의 코드를 if-else문으로 묶을 수 없는지도 생각해보면 좋을 거 같다.
💬 특징
✔️ javascript의 화면 단위 (px -> vw 단위 변환)
CSS는 viewport 기능을 지원하고 그에 따라 vh, vw 단위가 존재한다. 그러나 Javascript는 vh, vw 같은 단위를 지원하지 않는 듯하다.
이에 대한 논의를 찾아보니 slack에서 답을 찾을 수 있었다.
https://stackoverflow.com/questions/28295072/how-can-i-convert-px-to-vw-in-javascript
How can I convert px to vw in JavaScript?
I want to convert px to vw in JavaScript, how can I do it? I've been looking for it, but I haven't found anything. So, 1px → ? vw Thanks.
stackoverflow.com
위의 글에 따르면,
1px = (100vw / [document.documentElement.clientWidth] px)
라는 식을 이용하면 된다고 한다.
예를 들어, viewport가 500px 너비라면, 1px = (100vw/500px) = 0.2vw로 치환되는 것이다.
해상도에 따라 크기가 달라져야 하므로 화면의 크기를 구해온다.
흠... 사용을 해봐야 감이 올 거 같긴 한데 이런 부분에서는 CSS가 더 좋은 거 같다.
✔️ window.innerWidth()
아래에서 window.innerWidth()의 레퍼런스를 확인할 수 있다. 단위는 px이다.
https://developer.mozilla.org/ko/docs/Web/API/Window/innerWidth
Window.innerWidth - Web API | MDN
intViewportWidth stores the window.innerWidth property value.
developer.mozilla.org
✔️ 미디어 쿼리
나도 미디어쿼리가 뭔지 알고 싶어서 노마드 코더 강의에 있는 것으로 막간을 이용해 공부해봤다. 강의를 안 들은 걸 보면 아마 챌린지 진도표에는 없는 강의였던 것 같다.
우선, CSS를 기반으로 한 설명이다.
Media Query(미디어 쿼리)란?
오직 CSS만을 이용해서 사용자의 스크린의 사이즈를 알 수 있는 방법이다. (세로-portrait, 가로-landscape)
미디어 쿼리를 이용하면 반응형 웹사이트를 손쉽게 만들 수 있다.
스크린을 얼마 이하로 줄였을 때~ 에 대한 코드를 작성하고 싶으면 아래와 같이 쓰면 된다. -> max-width
@media screen and (max-width: 400px){ // 스크린이 400px보다 작으면
div {
background-color: tomato; // 배경색을 tomato 색으로 바꾼다.
}
}스크린을 얼마 이하로 늘렸을 때~ 에 대한 코드를 작성하고 싶으면 아래와 같이 쓰면 된다. -> min-width
@media screen and (min-width: 400px){ // 스크린이 400px보다 크면
div {
background-color: tomato; // 배경색을 tomato 색으로 바꾼다.
}
}두 개를 같이 쓰면 어느 정도 사이에만 한정할 수도 있다.
@media screen and (min-width: 400px) and (max-width:750px) { // 스크린이 400~750px이면
div {
background-color: tomato; // 배경색을 tomato 색으로 바꾼다.
}
}가로모드, 세로모드
device가 가로모드인지 세로모드인지도 조건을 추가하여 가로모드일 때와 세로모드일 때의 효과를 다르게 줄 수 있다.
위의 코드에 가로모드 조건을 추가하면 아래와 같다.
@media screen and (min-width: 400px) and (max-width:750px) and (orientation: landscape) {
div {
background-color: tomato; // 배경색을 tomato 색으로 바꾼다.
}
}이걸 이용하면 세로모드로 접속할 시, "폰을 가로로 돌려주세요"라는 메세지를 띄우는 것은 매우 간단하다.
/* HTML */
<body>
<span>디바이스를 화면을 돌려주세요 :<</span>
</body>
/* CSS */
<style>
@media screen and (orientation: landscape) {
span {
display: none;
}
}
</style>media의 screen이 landscape일 때는 span의 display를 none으로 적용하여 숨기는 것이다.
그렇다면 Javascript에서는 미디어쿼리를 어떻게 쓸 수 있을까? 바로 matchMedia()를 이용하는 것이다.
아래의 설명은 https://blog.outsider.ne.kr/1153를 참고했다.
matchMedia
const media = window.matchMedia("CSS에서 사용하는 미디어쿼리 문법");
// ex.
const mediaX = window.matchMedia("screen and (orientation:portrait)");
const mediaY = window.matchMedia("max-width:700px");괄호 안에 CSS에서 사용하는 미디어쿼리 문을 그대로 작성하면 된다. 따라서 CSS를 안다면 다른 것을 또 배우지 않아도 되는 것이 편리하다.
matchMedia() 함수는 MediaQueryList를 반환하고 이 오브젝트는 media와 matches라는 두 가지의 프로퍼티가 존재한다.
media -> 사용한 미디어쿼리 문자열을 반환한다.
matches -> 현재 화면이 미디어 쿼리 범위에 들어가면 true를, 아니면 false를 반환한다.
위의 가으더님의 코드를 보면 보다 더 잘 이해가 된다.
🎈 느낀 점
css의 경우 viewport 단위를 사용하면 화면 크기에 따라 저절로 비율이 조정되므로 아무 생각 안 해도 되는데 js의 경우 px로 표현하니까 그러면 다른 화면(ex. mobile)의 경우 어떻게 보여질까 궁금하기도 하고 걱정되기도 했다. 그래서 처음에 코드를 작성할 때 px로 쓰는 것을 지양했는데 다른 분이 작성하신 코드를 보니 (https://foodsexer.tistory.com/m/96?category=950410) 그게 가장 흔한 방법인 듯 하여 일단 작성해봤다.
다음에는 viewport로 바꿔서 코드를 작성해보면 좋을 것 같다. 아무래도 번거로울 거 같긴 한데 좋은 경험이 될 듯하다.
'Project > 개인 프로젝트' 카테고리의 다른 글
| 작성해야 할 글 리스트 ... (2) | 2021.12.04 |
|---|---|
| [JS] 바닐라 JS | 깃(git)과 함께 하는 테트리스 클론 코딩 일지 (1) (4) | 2021.08.01 |
| [JS] 바닐라 JS | #chall1) 여러가지 event 함수 만들어 사용해보기 (0) | 2021.07.30 |
| [HTML, CSS] 뮤직 플레이리스트 + 현재 재생 곡 화면 클론 (1) | 2021.07.18 |
| [HTML, CSS] 도서 라이브러리 프레임 클론 (0) | 2021.07.18 |
