# responsive

[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)

TIL 005 CSS_Responsive Units(반응형 단위)
물이 담긴 컵 같이 유동적으로 반응하는 반응형 웹사이트를 위한 Units를 배워보자!
react full-responsive homepage
react 프로젝트중에 웬만하면 보지 못했던 vanila JS스러운(?)코드를 보았다. 브라우저 윈도우의 넓이 값인데 반응형을 고려할때 요긴하게 쓰일수 있다. ex) if (window.innerWidth <= 960)이것도 react를 쓰면서 오랜만에 만나는 a

srcset = ? sizes=?
이미지 반응형을 어떻게하면 좀 더 좋아질까 검색하던 중에 <img> 태그에서 srcset, sizes를 이용하면 반응형에 좋다는 글이 있어서 공부했다.<img> 태그에서 src 를 이용해 이미지를 불러왔다면 srcset 도 이미지를 불러온다는건 비슷하다.다른
Skeleton: 극 미니멀을 추구하는 반응형 CSS 라이브러리
부트스트랩이나 리액트에서 많이 쓰는 Material UI 같은 UI Framework 들은 많이 알려져 있지만, 상대적으로 Skeleton CSS는 많이 알려지진 않은 것 같다. 아마도 'skeleton'이라는 단어 자체가 한글 뜻 그대로 '뼈대'라는 의미로 프로그래밍에서 너무 많이 쓰이는 단어이기 때문일 것이다. skeleton CSS라는 용어도 사실...

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