내가 만드는 사이트는 데스크탑에서 보는것도 좋지만, 모바일에서도 보면 좋을 것 같아서 모바일 및 데스크탑 겸용으로 만들고 싶었다. 그리고 그렇게 하려면 매우 복잡할 것 같았다. 그런데 생각보다 매우 쉬웠다.
viewport라는 메타태그 옵션이 있다. 뷰포트는 실제로 페이지가 보이는 영역 "자체"를 의미한다.
이 뷰포트의 설정을 어떻게 해라 라고 지정하면 그 설정대로 페이지가 보이게 된다.
예를들어 아래와 같이 설정한다면?
<meta name="viewport" content="width=300" ... (중략)
이런식으로 해버리면, 보이는 부분의 너비를 300에 맞춰버린다. 이런 값들을 모든 디바이스에 맞출 수는 없는 것이다.
따라서 다음과 같은 옵션이 필요하다.
width=device-width : 디바이스에 맞춰 너비를 조정하겠다는 것.
initial-scale=1 사이트 열리자 마자, 초기 배율을 100%로 한다는것. 1.5는 150%
결론적으로, 다음과 같은 코드를 <head> 태그에 삽입하면, 해당 페이지는 어떤 장치에서는 크기에 맞춰서 보여주게 된다.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
# 참고 : 추가 옵션들
minimum-scale 터치로 축소할때 최대
maximum-scale 터치로 확대할 때 최대
user-scalable=no 확대축소를 못하게 함. 즉 위에 maximum등은 yes를 해둬야함.
# 참고 : 가상 모바일기기 에뮬레이터
PC에 설치해서 사용하는 프로그램이며, 가상으로 모바일기기의 크기별로 화면을 볼 수 있다.
아래와 같은 식.
'SCC 9기' 카테고리의 다른 글
| [SCC 9기] - Project TIL : 웹폰트 적용하기 (0) | 2020.08.31 |
|---|---|
| [SCC 9기] - Project TIL : 마우스오버로 색깔 바꾸기 (0) | 2020.08.31 |
| [SCC 9기] - Project TIL : mariadb 내용을 딕셔너리 형태로 재생성 (0) | 2020.08.27 |
| [SCC 9기] - Project TIL : mongodb 에서 mariadb로 전환 (0) | 2020.08.25 |
| [SCC 9기] - Project TIL : 날짜/시간 변경 알고리즘 (0) | 2020.08.22 |