# Viewport

27개의 포스트
post-thumbnail

SVG

SVG 애증의 SVG.. 알고 씁시다!😂

2023년 3월 18일
·
0개의 댓글
·

SVG / viewBox, viewPort

SVG(Scalable Vector Graphics)란? 확장 가능한 마크업 언어(Extensible Markup Language; XML)로 작성된 벡터 기반의 그래픽 이미지 포맷 " svg = 코드로 구성된 이미지 " 👉 장점 1) 컬러를 바꿀 수 있다. 2)

2023년 2월 27일
·
0개의 댓글
·

[CSS in Depth] 2. Working with relative units - part 2

상대단위로 em과 rem만 있는 것이 아니다. 브라우저 뷰포트의 상대적 크기(길이)를 정의하기 위한 뷰포트 단위도 존재한다. Viewport 란출처: MDN - Viewport 컴퓨터 그래픽스에서, 뷰포트(viewport)는 현재 화면에 보여지고 있는 다각형(보통 직사

2023년 1월 26일
·
0개의 댓글
·
post-thumbnail

[SVG] viewport viewbox

✍️ viewport width height 과 viewbox width height의 개념을 정확히 몰라서 엄청 헤매었던 기억이 있다. (의도 하지 않았는데 반만 보이고 작아지고.... )그 때 고생했던 기억으로 정리해보았다.

2022년 12월 15일
·
0개의 댓글
·
post-thumbnail

반응형 이미지

웹브라우저, 모바일 화면에서 viewport의 크기, 해상도 등에 반응하여 이미지의 사이즈를 다르게 보여주는 것을 말함.예를 들어 모바일 화면의 이미지를 그대로 노트북에 가져오면 저화질의 이미지를 보게되는데, 이런 현상을 방지하기 위해 노트북에서는 큰 이미지로 변환해

2022년 12월 12일
·
0개의 댓글
·
post-thumbnail

반응형 웹사이트

미디어쿼리 viewport

2022년 12월 1일
·
0개의 댓글
·

[HTML] meta viewport

meta태그 중 viewport의 종류

2022년 11월 6일
·
0개의 댓글
·

[HTML] 반응형웹 viewport

모바일 웹을 만들던 중 반응형을 추가했는데도 모바일 화면이 제대로 나타나지 않았다.. 알고보니 를 빼먹은 것이었다. viewport 모바일 화면에서 실제 내용이 표시되는 영역 viewport 를 지정하면 모바일 화면에 맞춰 확대 또는 축소하여 표시할 수 있다. 사용법 head 태그 아래에 다음과 같이 추가할 수 있다. 속성 width : 뷰포...

2022년 9월 24일
·
0개의 댓글
·
post-thumbnail

React 스크롤 특정 영역에서 애니메이션 효과 주기

특정 영역에 도달하면 애니메이션 효과 시작되게하는 방법

2022년 9월 1일
·
0개의 댓글
·
post-thumbnail

HTML - 뷰포트

웹 페이지가 화면에 보여지는 영역기기별로 화면에 보여지는 영역이 다르기 때문에, 동일한 웹 페이지도 기기에 따라서 다르게 보여질 수 있다. 기기마다 배율조정이 다르기 때문에 PC와 모바일기기로 동일한 페이지를 보고 있어도, 보여지는 영역이 다른 것을 확인할 수 있다.

2022년 7월 6일
·
0개의 댓글
·

meta tag viewport

log 2015. 4. 29. 14:45사용자가 보게 될 화면의 넓이device-widt로도 지정 가능. 즉 본래 디바이스 넓이 그대로 바로 적용 가능width=240 width=device-width사용자가 보게 될 화면의 높이device-height로도 지정 가능.

2022년 7월 1일
·
0개의 댓글
·
post-thumbnail

CSS align과 unit, viewport

align, unit, viewport

2022년 6월 26일
·
0개의 댓글
·
post-thumbnail

반응형 웹(Responsive Web)

최근 절대 허용하지 않을 것 같던 '애플'도 허용한만큼 웹을 어느 기기에서도 사용할 수 있도록 만드는 것의 중요성이 더욱 높아지고 있죠! 때문에 기기마다 다른 화면을 맞추기 위해 viewport의 개념을 더 잘 이해할 필요가 있습니다 아래 사진의 viewport, 눈에

2022년 6월 24일
·
0개의 댓글
·

검색 엔진 밥상 차려주기

검색 엔진 노출 확률을 높이는 방법

2022년 3월 18일
·
0개의 댓글
·
post-thumbnail

[TIL]반응형 웹 디자인과 viewport

반응형 웹 디자인(Responsive Web Design)은 RWD라고도 하며, 쉽게 말해 브라우저 창의 폭에 따라 레이아웃을 바꿀 수 있도록 하는 기술이다.

2022년 2월 16일
·
1개의 댓글
·

HTML①-간단한 페이지로 확인하는 기초문법

html 코드는 크게 두 덩어리로 나눌 수 있다. 메타데이터(주:데이터에 대한 데이터)를 담고 있는 head부분과 본문내용이 담긴 body부분이다. 이 두 부분은 html 태그로 감싼다. 1. Head 1) Doctype Doctype은 본문이 html5를 따른다는 선언이다. 코드의 가장 위에 위치한다. 2) head head 안에는 데이터를...

2022년 1월 19일
·
0개의 댓글
·
post-thumbnail

100vh, viewport 주의점

viewport 사용하지말자?! 최근 모바일용 웹을 개발하면서 한 화면에서 스크롤이 생기지 않도록 만들 필요가 있었는데.... 너무 고생을 해서 기록을 남겨놓는다.

2021년 11월 25일
·
0개의 댓글
·