# Viewport
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 사용하지말자?! 최근 모바일용 웹을 개발하면서 한 화면에서 스크롤이 생기지 않도록 만들 필요가 있었는데.... 너무 고생을 해서 기록을 남겨놓는다.
Design #9 BUILDING YOUR FIRST WEB PAGE
본 블로그의 포스팅 내용은 Udemy Vako Shvili의 "Complete Web Design: from Figma to Webflow to Freelancing" 강의 내용의 일부입니다.

width값 100vw와 100%
도대체 난 그동안 뭘한거지? width값 100vw 100%의 차이점은? 어라? 나 왜 모르지?? 어떻게 모를 수 있지??? 공부한지 1년이 다 되어가는데 모른다니 부끄럽고 스스로에게 화가난다. 그러니 이참에 제대로 공부해보자! (mdn과 여러 기술블로그를 구글링하여
css - 화면에 배경 이미지 꽉 차게 하려면?
왓차 화면을 긁었는데, Home에 영화카드를 띄우면 footer와 겹친다.background와 같은 위치 속성에 height: 100vh;가 있었다. 따라서 화면 크기만큼만 background가 적용되고 스크롤을 내리자마자 footer 위치인데, 억지로 영화카드를 집어

🎨 Responsive Web Design
😁 반응형 디자인 👨🏻 현대 어플리케이션을 디자인하기 위하여 👩🏻 데스크톱 vs 태블릿 vs 모바일 🤣 Viewport 👶🏻 Veiwport란? 👵🏻 Viewport 설정하기 👴🏻 Viewport 사용시 주의사항 😎 Grid-View

[03] UI/UX :: 개발을 위한 디자이너들의 기본
최근 여러 유튜브를 보며 UI/UX 디자인을 전문적으로 하시는 분들의 영상을 보곤 합니다. 물론 디자인적 실력은 뛰어나지만 개발에 대한 이해도가 부족하여 이것이 실제 업무로 넘어갈시 큰 문제점이 보이는 경우가 많이 보이곤 합니다. UI/UX 디자인은 시각 디자인이라는 큰 틀 안에 존재하지만, 개발에 대한 이해도가 반드시 필요한 분야입니다. 개발에 대한 이해...