# Viewport
SVG / viewBox, viewPort
SVG(Scalable Vector Graphics)란? 확장 가능한 마크업 언어(Extensible Markup Language; XML)로 작성된 벡터 기반의 그래픽 이미지 포맷 " svg = 코드로 구성된 이미지 " 👉 장점 1) 컬러를 바꿀 수 있다. 2)
[CSS in Depth] 2. Working with relative units - part 2
상대단위로 em과 rem만 있는 것이 아니다. 브라우저 뷰포트의 상대적 크기(길이)를 정의하기 위한 뷰포트 단위도 존재한다. Viewport 란출처: MDN - Viewport 컴퓨터 그래픽스에서, 뷰포트(viewport)는 현재 화면에 보여지고 있는 다각형(보통 직사
[SVG] viewport viewbox
✍️ viewport width height 과 viewbox width height의 개념을 정확히 몰라서 엄청 헤매었던 기억이 있다. (의도 하지 않았는데 반만 보이고 작아지고.... )그 때 고생했던 기억으로 정리해보았다.
반응형 이미지
웹브라우저, 모바일 화면에서 viewport의 크기, 해상도 등에 반응하여 이미지의 사이즈를 다르게 보여주는 것을 말함.예를 들어 모바일 화면의 이미지를 그대로 노트북에 가져오면 저화질의 이미지를 보게되는데, 이런 현상을 방지하기 위해 노트북에서는 큰 이미지로 변환해
[HTML] 반응형웹 viewport
모바일 웹을 만들던 중 반응형을 추가했는데도 모바일 화면이 제대로 나타나지 않았다.. 알고보니 를 빼먹은 것이었다. viewport 모바일 화면에서 실제 내용이 표시되는 영역 viewport 를 지정하면 모바일 화면에 맞춰 확대 또는 축소하여 표시할 수 있다. 사용법 head 태그 아래에 다음과 같이 추가할 수 있다. 속성 width : 뷰포...
HTML - 뷰포트
웹 페이지가 화면에 보여지는 영역기기별로 화면에 보여지는 영역이 다르기 때문에, 동일한 웹 페이지도 기기에 따라서 다르게 보여질 수 있다. 기기마다 배율조정이 다르기 때문에 PC와 모바일기기로 동일한 페이지를 보고 있어도, 보여지는 영역이 다른 것을 확인할 수 있다.
meta tag viewport
log 2015. 4. 29. 14:45사용자가 보게 될 화면의 넓이device-widt로도 지정 가능. 즉 본래 디바이스 넓이 그대로 바로 적용 가능width=240 width=device-width사용자가 보게 될 화면의 높이device-height로도 지정 가능.
반응형 웹(Responsive Web)
최근 절대 허용하지 않을 것 같던 '애플'도 허용한만큼 웹을 어느 기기에서도 사용할 수 있도록 만드는 것의 중요성이 더욱 높아지고 있죠! 때문에 기기마다 다른 화면을 맞추기 위해 viewport의 개념을 더 잘 이해할 필요가 있습니다 아래 사진의 viewport, 눈에
[TIL]반응형 웹 디자인과 viewport
반응형 웹 디자인(Responsive Web Design)은 RWD라고도 하며, 쉽게 말해 브라우저 창의 폭에 따라 레이아웃을 바꿀 수 있도록 하는 기술이다.
HTML①-간단한 페이지로 확인하는 기초문법
html 코드는 크게 두 덩어리로 나눌 수 있다. 메타데이터(주:데이터에 대한 데이터)를 담고 있는 head부분과 본문내용이 담긴 body부분이다. 이 두 부분은 html 태그로 감싼다. 1. Head 1) Doctype Doctype은 본문이 html5를 따른다는 선언이다. 코드의 가장 위에 위치한다. 2) head head 안에는 데이터를...
100vh, viewport 주의점
viewport 사용하지말자?! 최근 모바일용 웹을 개발하면서 한 화면에서 스크롤이 생기지 않도록 만들 필요가 있었는데.... 너무 고생을 해서 기록을 남겨놓는다.