markup

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..

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은 ..

Css scroll snap 😶‍🌫️

마우스 혹은 손가락으로 스크롤을 할때 화면을 자석마냥 찰싹 찰싹 상단/중단/말단 에 붙일 수 있습니다. 이게 말로 하면 어려운데 아래 동작을 보면 이해하기 쉬울겁니다!! 부모요소에 scroll-snap-type, scroll-padding을 지정할 수 있고 자식요소에 scroll-snap-align, scroll-margin을 지정할 수 있습니다. 이렇게 부모 요소, 자식 요소에 관련된 속성을 따로 부여하여 제어했었던 것은 css flex에서도 했었던 것 같네요 위의 예제는 scroll-snap을 지정한 예제와 지정하지 않은 예제입니다. 지정하지 않은 예제는 탐색을 위해 더 많은 스크롤 동작을 수행해야 하지만 scroll-snap 을 효율적으로 이용하면 더 적은 동작으로 원하는 것들을 보여줄 수 있습니다..

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 객체를 ..

Html picture tag 🏞

picture tag는 media query의 내용에 따라 표현하고자 하는 이미지를 표현할 수 있습니다. 반응형으로 페이지를 제작하여야 할때 viewport의 크기에 따라 원하는 이미지를 보여줄 수 있을것 같습니다. html5 에서 등장하였으며 버전이 낮은 하위 브라우저에서는 지원하지 않으므로 미리 확인해보고 적용하여야 합니다. 기본 쓰임새는 아래와 같습니다. picture 태그 내부에는 source 태그와 img 태그가 위치합니다. source, img 둘다 닫힌 태그이므로 따로 닫는 태그는 추가해주지 않아도 됩니다. source의 media attribute에서 True를 반환하면 true를 반환한 source태그의 srcset이 화면에 나타나게 됩니다. 맨 아래에 img 태그를 추가해주는 이유는 두..

미디어 쿼리 🌱

반응형 웹을 반영하기 위해서 미디어 쿼리를 적용해야 합니다. 아래는 미디어 쿼리의 실사용 예시 입니다. @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..

Html DOCTYPE, meta data 🔥

DOCTYPE에 대하여 설명하시오 meta 태그에 대해서 알고 있나요? meta 태그의 요소에 대해서 아는대로 말해보세요 doctype은 html5에서 웹 브라우저의 표준모드를 활성화 하기 위하여 사용합니다. html living standard부터 doctype이 간소화 되었습니다. doctype을 선언하지 않으면 quirks mode라는 하위호환성 모드로 진입합니다. doctype은 태그 전에 사용하여야 합니다. html5 이전 버전에서 사용하던 doctype 입니다. 이렇게 명시해주는 이유는 브라우저가 컨텐츠를 정확하게 표현하도록 마크업 언어에 대한 규칙을 제공하기 위해 사용합니다. html5 가 표준이 되면서 아래와 같이 변경되었습니다. html5 버전부터는 아래와 같이 doctype을 선언합니다..

scroll-behavior 🌱

css 속성중에 scroll-behavior 속성이 있습니다. 위의 이미지는 scroll-behavior을 적용한것 아래의 이미지는 적용하지 않은 것입니다. scroll-behavior 속성을 적용하면 navigation이나 cssom scroll API에 의해 scroll이 발생했을때의 동작을 정의할 수 있습니다. 아래와 같은 값들을 적용할 수 있습니다. /* Keyword values */ scroll-behavior: auto; scroll-behavior: smooth; /* Global values */ scroll-behavior: inherit; scroll-behavior: initial; scroll-behavior: revert; scroll-behavior: unset; 부드러운 동작..

Css progress bar 만들기

css를 이용하여 간단한 progress bar를 만들어 보았다. 이전에 class101 clone을 할때 구현하지 못했었는데 이렇게 쉽게 구현할 수 있는걸 보니 어이가 없을 정도다. css만 가지고 있으면 할 수 있다. 이왕 animation을 이용할거 rotate도 주어 box의 흔들림또한 같이 표현하였다. 시간을 표시해주는 부분은 미세한 ms의 차이로 인해 완벽히 들어맞지는 않는다. 하지만 closure와 setInterval을 이용하여 구현하였다. box 내부의 차오름과 비어짐은 가상요소인 ::after를 이용하였다. 가상 요소인 before와 after는 쓰임새가 참 많아서 좋다 keyframe으로 animation의 이름을 지정하고 그 안에 %가 증가할때마다의 action을 정의해 주었다. c..

Css margin과 padding의 차이

margin요소의 바깥 여백, padding은 요소의 안쪽 여백을 지정해줄수 있습니다 margin과 padding은 개별요소 들을 설정해줄수도 있고 축약형으로도 사용할 수 있습니다. 아래에 사용예시와 방향에 대한 정보가 같이 있습니다. margin-top: 10px margin-right: 10px margin-bottom: 10px margin-left: 10px padding-top: 10px padding-right: 10pxm padding-bottom: 10px padding-left: 10px // 상 우 하 좌 (시계방향으로 인식하면 편함) margin: 10px 9px 8px 7px padding: 10px 9px 8px 7px // 상,하 좌,우 margin: 10px 9px paddin..