markup/html

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

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 태그를 추가해주는 이유는 두..

Html DOCTYPE, meta data 🔥

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

Html button의 type 속성

button의 type 기본 값은 submit 입니다. form tag 외부에서 사용시 button의 type에 button을 명시해주는 것이 좋습니다. form tag 외부에서 button tag를 사용할 때는 기본값이 submit이지만 클릭했을때 아무일도 일어나지 않습니다. button의 type 속성에는 3개의 값이 들어갈 수 있습니다. submit, reset, button submit: 서버로 데이터를 전송합니다. form tag 내부에 button 태그가 존재할 때 유효합니다. default 값입니다! reset: 모든 값을 초기값으로 되돌려 줍니다. button: 클릭했을때 아무일도 일어나지 않습니다. 클라이언트의 스크립트와 연결시킬 수 있습니다. 이번에 처음 알게 되었습니다. button의..

HTML 시맨틱 마크업

시맨틱 마크업은 뭐고 왜 필요할까???? 시맨틱(Semantic)은 아래와 같은 의미를 가진다. 시멘틱 뜻은 알겠고 그러면 시맨틱 마크업은 의미의 마크업 일까요???? 시맨틱 마크업은 마크업을 의미를 잘 전달할 수 있도록 작성하자 정도로 저는 이해하고 있습니다. html4 까지는 이러한 것들이 없어서 태그의 이름이 제각각 이었습니다. 각자의 기호에 맞게 사용했기 때문이죠 그래서 검색엔진은 웹페이지의 내용을 올바르게 식별할수가 없었습니다. (기준이 제각각이고 의미도 다 다르니까 우선순위의 설정도 힘들고 여러가지 애로사항이 있었지 않았을까 생각이 드네요) html5가 표준으로 체택되면서 이때 같이 등장한것이 , , , , , , 등등 태그가 의미를 나타낼 수 있는 태그들이 많이 추가되었어요. 이 태그들이 등..

label 태그

Input 태그를 작성시 label 태그는 왜 필요한지???? 어떤 이점이 있을지 알고 싶었습니다. 크게 2가지의 이유로 필요하다고 생각합니다. 1. label 태그와 input 태그를 연결해주면 label 태그를 클릭함으로써 input 태그가 체크 or focusing 되게 할 수 있습니다. 이러한 동작은 웹의 ux에 도움을 줄것 같네요 2. 스크린 리더기에서 label 태그를 읽어서 사용자가 입력해야 하는 텍스트가 무엇인지 더 쉽게 이해할 수 있습니다. 이러한 두가지 이유가 있으니 이제 어떻게 사용하는지 알아보도록 하겠습니다. click me click me input 태그는 Label 밖에 위치할 수도 있고 안에 위치할 수도 있습니다. 밖에 위치할 경우 label의 for와 input의 id 값이 ..