# responsive
media query responsive : 미디어쿼리 반응형 설계
모질라 : https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries
Responsive Web
Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share데스크탑 (PC)데스크탑 (PC)의 뷰포트는 웹 브라우저 창 (visibla area)의 뷰포트와 같다.때문에 사용자가 브

DNA Projecten
📚 Overview 사이트명: DNA Projecten 공식 홈페이지 작업 기간: 7일 소요 라이브러리: jquery, gsap 유형: 반응형, 클론 코딩 특징: 모바일, 태블릿, PC 3가지 버전으로 제작한 반응형 웹사이트입니다. ✔️ What's the point? gsap.timeline을 활용한 라운드 모션 반응형을 위한 GSAP의 matchM...
[CSS in Depth] 2. Working with relative units
2.1. The power of relative values CSS는 웹페이지에 동적바인딩(late-binding) 스타일을 부여한다. > 동적바인딩(late-binding) 바인딩(binding)이란 프로그램에 사용된 구성 요소의 실제 값 또는 프로퍼티를 결정짓는

웹 퍼블리싱 정리
Figma, Photoshop 등 그래픽 리소스를 html + css + js 로 변환해 브라우저에 표현하는 것.디자인 리소스 : Photoshop, PowerPoint 와 같이 전통적인 툴에서 Sketch, Zeplin, Figma, Protopie 처럼 최근 많
Responsive Design Ingredients
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

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

[코캠]베이스캠프 10일차 | grid, 반응형
오늘은 css 레이아웃 flex와 양대산맥을 이루고 있는 grid에 대해서 배웠다! 브라우저 지원 이슈 때문에 grid보다 flex를 훨씬 많이 써온터라 좀 헷갈리는 부분이 있었지만 앞으로도 많이 연습해 보면서 감을 익혀야겠다..!flex는 1차원적인 구조를 가지고 있
반응형 웹을 위한 조건무 선언, 미디어쿼리, 조건문
log 2015. 4. 29. 13:07@media only all and (조건문) { : 조건문 사이에 포암되어 있는 공백은 필수 적이다. @media : 미디어 쿼리 시작문 선언 only { : 미디어 쿼리를 지원하는 사용자 에이전트만 쿼리구문을 해석하라

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

[5/30 일반] 부트스트랩-부트스트랩으로 싱글 페이지 웹사이트 제작
1) 필기내용https://getbootstrap.com/docs/5.2/getting-started/download/: getbootstrap 태그 → CDN via jsDelivr→ Skip the download with jsDelivr to delive
[TIL 2022] CSS 반응형 - 미디어쿼리
학습한 내용 CSS로 반응형 페이지 만들기 CSS에 @media 쿼리를 사용 @media (최대, 최소 너비) {스타일을 설정} 화면의 조건을 만족하면, css가 작동하는 것이 가능함 학습 내용 중 어려웠던 점 스크린 화면의 크기에 따른 최적화가 어려움 min과 ma
CSS - Unit (feat. Responsive)
컨텐츠를 물과 같이 만들어라! 엘리쌤의 말씀 . . . 사실 내 포폴에 반응형 대응 되는 녀석들이 거의없다....^ ^ 그나마 블로그에는 약간의 대응을 해 놓긴했지만 반응형을 염두에 두고 짜지 않았기때문에 아무래도 모바일에서 보기에는 힘든구석이 있다. 그래서 요번에

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

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

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

[CSS] navbar의 특정 메뉴만 반응형으로 작동하기
여태까지는 Flex-grow를 Navbar의 모든 메뉴의 사이즈를 비율로 조정할 때, 사용했다.하지만 특정 메뉴의 사이즈만 브라우저의 크기에 반응하도록 만들 때, 반응하길 원하는 메뉴에만 flex-grow를 설정하면 크기에 맞춰서 사이즈가 커졌다가 작아졌다가 한다.
scss 반응형 Setting
기준을 정해서 변수로 값을 저장한다.Ex)변수를 이용하여 mixin을 만든다.Ex)mixin을 이용하여 반응형을 코딩한다.Ex)