
반응형을 구현할 때, 해당 요소가 너무 큰 경우에는 flex를 사용하여 자연스럽게 떨어지게 하거나 미디어쿼리를 사용하여 해당요소를 작게 하는 등 여러 가지 방법을 이용하여 구현한다. 하지만 다른 사람의 작업물이거나 복잡하게 구현되어 있는 경우에는 어디서 부터 손을 대야 할지 감이 잡히지 않을 때가 있다.더군다나 반응형을 구현하기 위해 디바이스별로 정해놓은 구간이 있는 상황에서 새로 레이아웃을 획정해야 하는 경우에는 난감한 경우가 발생한다. 애매한 구간에서만 동일한 비율로 간단하게 줄일 수 있다면 좋을 텐데 말이다.이러한 경우에 간단하게 css의 zoom 프로퍼티를 사용하면 된다. zoom : 0.5; // 50% 촉소zoom : 1; // 기본 zoom : 2; // 2배 확대 미디어쿼리를 사용하..

전체 wrapper에 백그라운드 이미지를 주고, 스크롤했을 시 고정이 되게 하고 싶었다.결론을 먼저 말하자면 한 줄의 코드로 이 기능이 구현되었다.background-attachment: fixed; -scroll(기본값) : 스크롤 시 페이지와 함께 같이 움직이는 속성.-fixed : 스크롤 시 보이는 페이지와 다르게 배경 이미지는 고정되는 속성. 하지만 모바일 브라우저에선 사용할 수 없고, 가끔 버벅거리는 듯한 느낌을 주며 스크롤이 내려간다. 해결 방법 - 배경 레이어를 따로 나누어서 적용하기//HTML // 배경 처리할 레이어를 따로 분리 // CSS.bg { position: fixed; // 배경 이미지가 아닌 배경 레이어를 고정 top: 0; ┓ left: 0;..
- Total
- Today
- Yesterday
- javascript
- Pressable
- 스크롤
- this
- zoom
- 고정
- background-attachment
- React Hooks
- touchableopacity
- 리액트
- React Native
- yml
- CORS
- React
- jenv
- window.location
- 상태관리
- useState
- custom hooks
- bind
- button
- css
- withcredentials
- yaml
- useRef
- useMemo
- jdk
- useReducer
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |