# responsive

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)

aliceinkorea

물이 담긴 컵 같이 유동적으로 반응하는 반응형 웹사이트를 위한 Units를 배워보자!

gytlr01

react 프로젝트중에 웬만하면 보지 못했던 vanila JS스러운(?)코드를 보았다. 브라우저 윈도우의 넓이 값인데 반응형을 고려할때 요긴하게 쓰일수 있다. ex) if (window.innerWidth <= 960)이것도 react를 쓰면서 오랜만에 만나는 a

heumheum2

이미지 반응형을 어떻게하면 좀 더 좋아질까 검색하던 중에 <img> 태그에서 srcset, sizes를 이용하면 반응형에 좋다는 글이 있어서 공부했다.<img> 태그에서 src 를 이용해 이미지를 불러왔다면 srcset 도 이미지를 불러온다는건 비슷하다.다른

aiden

전격 비교

devknth

부트스트랩이나 리액트에서 많이 쓰는 Material UI 같은 UI Framework 들은 많이 알려져 있지만, 상대적으로 Skeleton CSS는 많이 알려지진 않은 것 같다. 아마도 'skeleton'이라는 단어 자체가 한글 뜻 그대로 '뼈대'라는 의미로 프로그래밍에서 너무 많이 쓰이는 단어이기 때문일 것이다. skeleton CSS라는 용어도 사실...

jerrynim_

서론 이미지가 많이 들어가는 페이지를 제작하기에 앞서 페이지에 2.3M짜리 이미지가 들어간 것을 보고 이대론 안되겠다 싶어 효과적인 UX를 위해 https://images.guide/를 읽고서 반응형 사이트에서 이미지 최적화를 제대로 하기위해 공유하기 위해 작성합니다. 반응형 이미지를 사용시 고려해야할 사항 이미지 크기(size)와 관련한 성능/속도 및...