코딩일지(2024-04-27)
나의 깃헙블로그에 반응형 요소들을 추가해보았다.
오늘은 드디어 반응형 웹개발에 착수했다. 원래 기존에 내가 개발하고 배포한 이 웹사이트에는 고질적인 문제가 있었다.
/image-20240427192412187.png)
위 사진에서 왼쪽사진은 일반 pc모니터 비율에서 제공되는 모습이고 오른쪽 사진은 모바일 환경의 모니터 비율에서 제공되는 모습이다. 내가 추가한 저 요소들을 한쪽으로 몰리면서 깨져보이는 것을 확인할 수 있다. 그래서 나는 이를 해결하기 위해 반응형 웹페이지의 기본을 다시 공부하려고 한다. 저거를 만들때 반응형 요소로 만들까 생각을 했었긴 했지만 이 사이트를 초기에 개발하던 당시에는 그게 너무 귀찮았다. 그래서 하는 수 없이 정적으로 만들고 효과만 입히고 시마이 쳤었다ㅋㅋ.
/image-20240427192834010.png)
이번에는 이 강의(링크)를 들으면서 제대로 공부해보려고 한다. 원래 ROS공부가 우선이긴한게 이런 이유때문에 이게 자그마치 5개월이나 밀렸기 때문에 이제는 해결해야할 때가 온것이다.
변화의 첫걸음(?), viewport(뷰포트)
뷰포트(viewport)란, 현재 화면에 보여지고 있는 영역이라고 한다. 기기 별로 뷰포트가 다르기 때문에, 동일한 웹페이지라도 기기에 따른 배율 조정이 발생해 화면의 크기가 다르게 보이는 현상이 나타난다. 아래 그림은 동일한 HTML 문서를 각각 PC와 모바일로 확인할 결과이다.
/image-20240427193105214.png)
이렇게 다른 모습을 띄는 이유는 위에서 말한것처럼 기기에 따른 자동 배율조정이라고 한다.
메타태그를 통해 뷰포트를 해보려고 한다.
정리해보자면,
반응형 웹-> 반응하는 형태의(기기,브라우저의 크기에 맞게 변경해가는) 웹문서 + 이를 위한 기법들’
반응형 웹의 핵심: 가변성
가변적인 대응을 위해서는 <html>문서에다가 viewport속성에 대한 마크업을 추가해야 한다.
절대 단위를 쓰는 대신 em&rm단위를 써보자!
나는 솔직히 지금까지 hhtml문서를 짤때, 절대단위 또는 상대단위를 썼었고, 템플릿을 가져오는 경우에만 그곳에서 em 또는 rm을 쓰라고 해서 그렇게 썼었다.
댓글남기기