markup22 Html <img loading='lazy'> 😴 html의 클래스에서 img 태그에 loading='lazy'를 추가해주면 image의 lazy 로딩이 가능합니다. lazy 로딩이란 이미지 태그가 뷰포트 내에 위치하게 되었을때 load를 하는 것을 의미합니다. loading 속성이 추가되기 전에는 intersection Observer API 객체를 생성하고 observe를 하다가 viewport내에 들어오게 되면 src를 바꿔주는 식으로 lazy loading을 하였었습니다. 또는 scroll, resize 또는 orientationchange 같은 이벤트 핸들러를 사용한다고 하는데 이 방식은 제가 잘 모르겠습니다. loading 속성에 들어가는 값은 아래 세개의 속성이 들어갑니다 auto : 브라우저의 기본 lazy loading 동작입니다. la.. 2022. 4. 19. Css visibility: hidden, display: none, opacticy: 0️⃣ 개발을 하던중 css에서 dom 요소를 화면에서 보이지 않게 해주는 속성들을 사용하게 될때가 있습니다. visibility, diasplay, opactity를 제어하는 것이 대표적인 방법입니다. 이 요소들 간에 어떤 차이가 있을지 궁금중이 생겨 포스팅을 합니다. layout paint add Event visibility: hidden 0 x display: none x x opacity: 0 0 0 세개의 속성 전부 dom 요소에는 포함이 됩니다. opacity: 0과 visibility: hidden은 화면상에 공간을 차지합니다. 하지만 display: none은 화면에서 공간을 차지하지 않습니다. opacity: 0은 eventHandler를 등록할 수 있지만 visibility: hidden은 .. 2022. 4. 5. Css scroll snap 😶🌫️ 마우스 혹은 손가락으로 스크롤을 할때 화면을 자석마냥 찰싹 찰싹 상단/중단/말단 에 붙일 수 있습니다. 이게 말로 하면 어려운데 아래 동작을 보면 이해하기 쉬울겁니다!! 부모요소에 scroll-snap-type, scroll-padding을 지정할 수 있고 자식요소에 scroll-snap-align, scroll-margin을 지정할 수 있습니다. 이렇게 부모 요소, 자식 요소에 관련된 속성을 따로 부여하여 제어했었던 것은 css flex에서도 했었던 것 같네요 위의 예제는 scroll-snap을 지정한 예제와 지정하지 않은 예제입니다. 지정하지 않은 예제는 탐색을 위해 더 많은 스크롤 동작을 수행해야 하지만 scroll-snap 을 효율적으로 이용하면 더 적은 동작으로 원하는 것들을 보여줄 수 있습니다.. 2022. 4. 4. Html input pattern, setCustomValidity, reportValidity 👍 input 의 pattern 속성을 통해 값의 valid 여부를 판별할 수 있게 할 수 있습니다. pattern 속성에는 정규표현식이 들어가게 됩니다. input 의 validity 메소드를 통해 ValidityState 객체를 load 할 수 있고 여기서 pattern의 통과 여부를 조회할 수 있습니다. pattern 속성에는 정규표현식이 들어갑니다. 정규표현식은 쉽지 않지만.... react에서 비제어 컴포넌트로 이용하고자 할때 html의 api를 이용하면 접근방법에 힌트를 얻을 수 있을것만 같습니다 2022.03.03 - [Frontend/React] - 제어 컴포넌트 vs 비제어 컴포넌트 아래는 input에 pattern 속성을 지정한 후에 validity를 통해 ValidityState 객체를 .. 2022. 4. 1. Html picture tag 🏞 picture tag는 media query의 내용에 따라 표현하고자 하는 이미지를 표현할 수 있습니다. 반응형으로 페이지를 제작하여야 할때 viewport의 크기에 따라 원하는 이미지를 보여줄 수 있을것 같습니다. html5 에서 등장하였으며 버전이 낮은 하위 브라우저에서는 지원하지 않으므로 미리 확인해보고 적용하여야 합니다. 기본 쓰임새는 아래와 같습니다. picture 태그 내부에는 source 태그와 img 태그가 위치합니다. source, img 둘다 닫힌 태그이므로 따로 닫는 태그는 추가해주지 않아도 됩니다. source의 media attribute에서 True를 반환하면 true를 반환한 source태그의 srcset이 화면에 나타나게 됩니다. 맨 아래에 img 태그를 추가해주는 이유는 두.. 2022. 3. 31. 미디어 쿼리 🌱 반응형 웹을 반영하기 위해서 미디어 쿼리를 적용해야 합니다. 아래는 미디어 쿼리의 실사용 예시 입니다. @media screen and (min-width: 200px) { .media-query-div { background-color: black; } } @media screen and (min-width: 400px) { .media-query-div { background-color: green; } } @media screen and (min-width: 600px) { .media-query-div { background-color: blue; } } @media screen and (min-width: 800px) { .media-query-div { background-color: oran.. 2022. 3. 29. 이전 1 2 3 4 다음
