# responsive

he1256

1 그리드 기본: https://goddino.tistory.com/246

he1256

모질라 : https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries

ohmy0418

Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share데스크탑 (PC)데스크탑 (PC)의 뷰포트는 웹 브라우저 창 (visibla area)의 뷰포트와 같다.때문에 사용자가 브

kimheewon

📚 Overview 사이트명: DNA Projecten 공식 홈페이지 작업 기간: 7일 소요 라이브러리: jquery, gsap 유형: 반응형, 클론 코딩 특징: 모바일, 태블릿, PC 3가지 버전으로 제작한 반응형 웹사이트입니다. ✔️ What's the point? gsap.timeline을 활용한 라운드 모션 반응형을 위한 GSAP의 matchM...

tootb

2.1. The power of relative values CSS는 웹페이지에 동적바인딩(late-binding) 스타일을 부여한다. > 동적바인딩(late-binding) 바인딩(binding)이란 프로그램에 사용된 구성 요소의 실제 값 또는 프로퍼티를 결정짓는

cmaw

Figma, Photoshop 등 그래픽 리소스를 html + css + js 로 변환해 브라우저에 표현하는 것.디자인 리소스 : Photoshop, PowerPoint 와 같이 전통적인 툴에서 Sketch, Zeplin, Figma, Protopie 처럼 최근 많

hjbaek5796

To allow webpage to adapt to the current viewport width (or even height).Use % (or vh / vw) unit instead of px for elements that should adapt to viewp

harimad

이번 장에서는 웹 페이지 기본 구조를 설계해 보겠습니다.아래는 웹 페이지에서 해당하는 영역을 색깔별로 나타냈습니다.특정 넓이(768px)를 기준으로 특정 영역이 동적으로 변경됩니다.즉, 반응형 웹 페이지를 적용해야 합니다.아래는 전형적으로 많은 웹 사이트에서 사용하는

badassong

오늘은 css 레이아웃 flex와 양대산맥을 이루고 있는 grid에 대해서 배웠다! 브라우저 지원 이슈 때문에 grid보다 flex를 훨씬 많이 써온터라 좀 헷갈리는 부분이 있었지만 앞으로도 많이 연습해 보면서 감을 익혀야겠다..!flex는 1차원적인 구조를 가지고 있

woodd

log 2015. 4. 29. 13:07@media only all and (조건문) { : 조건문 사이에 포암되어 있는 공백은 필수 적이다.  @media : 미디어 쿼리 시작문 선언 only { : 미디어 쿼리를 지원하는 사용자 에이전트만 쿼리구문을 해석하라

sdh0305

3줄을 가진 햄버거를 만든 후 toggle이 움직일 때 마다 1번째, 3번째 줄은 회전을 주고 2번째 줄은 투명화

pjj2059

1) 필기내용 <닷 홈 운영하기>웹 서버 운영 : Web client ↔ Internet ↔ 웹 서버→ 기능을 분리하여 부하 방지웹 서버 : 웹 서버가 설치 된 컴퓨터 / Web server SW, 예) apache, nginx 등 / HTTP기반으로 클라이언트의

pjj2059

1) 필기내용https://getbootstrap.com/docs/5.2/getting-started/download/: getbootstrap 태그 → CDN via jsDelivr→ Skip the download with jsDelivr to delive

dullgi

학습한 내용 CSS로 반응형 페이지 만들기 CSS에 @media 쿼리를 사용 @media (최대, 최소 너비) {스타일을 설정} 화면의 조건을 만족하면, css가 작동하는 것이 가능함 학습 내용 중 어려웠던 점 스크린 화면의 크기에 따른 최적화가 어려움 min과 ma

21color

컨텐츠를 물과 같이 만들어라! 엘리쌤의 말씀 . . . 사실 내 포폴에 반응형 대응 되는 녀석들이 거의없다....^ ^ 그나마 블로그에는 약간의 대응을 해 놓긴했지만 반응형을 염두에 두고 짜지 않았기때문에 아무래도 모바일에서 보기에는 힘든구석이 있다. 그래서 요번에

dosomething

Range 객체를 이용해 반응형에 따라 댓글 기능을 수정한 사례와 Range 인터페이스에서 사용한 메서드를 정리하였습니다

inspire1123

* 반응형 웹 디자인은 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현해준다. 1. 모바일 기기를 위한 뷰포트 뷰포트란 스마트폰 화면에서 실제 내용이 표시되는 영역 뷰포트는 ` 태그를 이용해 와 `태그 사이에 작성한다.PC에 맞게

nomore12

Material-UI Grid리액트 머티리얼ui Grid 컴포넌트를 이용하여 반응형 레이아웃을 꾸며보았다. styled-components등으로 미디어 쿼리를 사용하는 것 보다 시간이 많이 단축되었다.머티리얼 ui는 스크린 가로 사이즈에 따라 xs, sm, md, lg

rand_guy

여태까지는 Flex-grow를 Navbar의 모든 메뉴의 사이즈를 비율로 조정할 때, 사용했다.하지만 특정 메뉴의 사이즈만 브라우저의 크기에 반응하도록 만들 때, 반응하길 원하는 메뉴에만 flex-grow를 설정하면 크기에 맞춰서 사이즈가 커졌다가 작아졌다가 한다.

roghabo

기준을 정해서 변수로 값을 저장한다.Ex)변수를 이용하여 mixin을 만든다.Ex)mixin을 이용하여 반응형을 코딩한다.Ex)