공부정리

html의 클래스에서 img 태그에 loading='lazy'를 추가해주면 image의 lazy 로딩이 가능합니다.

<img loading="lazy" src="" width="200" height="200" />

lazy 로딩이란 이미지 태그가 뷰포트 내에 위치하게 되었을때 load를 하는 것을 의미합니다.

loading 속성이 추가되기 전에는 intersection Observer API 객체를 생성하고 observe를 하다가

viewport내에 들어오게 되면 src를 바꿔주는 식으로 lazy loading을 하였었습니다.

또는

scroll, resize 또는 orientationchange 같은 이벤트 핸들러를 사용한다고 하는데 이 방식은 제가 잘 모르겠습니다.

loading 속성에 들어가는 값은 아래 세개의 속성이 들어갑니다

• auto : 브라우저의 기본 lazy loading 동작입니다.
• lazy : 뷰포트에 위치하게 되었을때 load 됩니다
• eager : 페이지에서의 위치에 관계없이 리소스를 즉시 로드합니다.

auto 값은 사용하지 않는것이 좋다고 문서에는 나와있습니다.

lazy loading 사용할거면 width, height 꼭 지정해주어야 합니다.

inline으로 설정해주거나 inline 스타일에서 직접 값을 정의해주세요!!! 

이거 해주지 않으면 로딩되고 나서 레이아웃 발생하게 됩니다.

빈번한 레이아웃은 로딩을 느리게 만듭니다 ㅜㅜ

설정해주지 않은 상태면 default width, height이 0이기 때문에 로딩 이후에 img가 들어오게 되면 전체 레이아웃 다시 계산하여야 합니다.

반응형 작업을 주로 하실때 picture tag를 사용하시면 이미지 부분은 편리하게 반응형 작업을 할 수 있는데요

picture tag에도 lazy loading을 정의할 수 있습니다.

2022.03.31 - [markup/html] - Html picture tag 🏞

이때는 img 태그에만 loading="lazy"를 적용해주면 브라우저에서 알아서 처리해줍니다.

참고로 저 img 태그는 source의 media에서 해당하는 사항이 없을때 나타나는 default 사항입니다.

<pitcture>
  <source media="all" srcset="example1.jpg">
  <img src="example.jpg" loading="lazy" >
</picture>

화면에 바로 보이는 img 태그 요소들에는 loading="lazy" 속성을 사용하는 것을 피하는것이 좋다고 합니다.

loading="lazy"를 사용하면 브라우저에서 IntersectionObserver를 사용 가능 여부에 따라 이미지의 뷰포트 내 위치를 알때까지 기다려야 한다고 합니다.

아래의 예제는 즉시 보이는 이미지에는 loading 속성을 적용하지 않은 예시 입니다.

<!-- visible in the viewport -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">

<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">

* css에서 설정하는 배경이미지에는 lazyLoading을 적용할 수 없다고 합니다....

https://web.dev/i18n/ko/browser-level-image-lazy-loading/

input 의 pattern 속성을 통해 값의 valid 여부를 판별할 수 있게 할 수 있습니다.

pattern 속성에는 정규표현식이 들어가게 됩니다.

input 의 validity 메소드를 통해 ValidityState 객체를 load 할 수 있고 여기서 pattern의 통과 여부를 조회할 수 있습니다.

<form class="form" id="form">
  <input type="text" class="input" pattern="[0-9]+">
</form>

pattern 속성에는 정규표현식이 들어갑니다. 

정규표현식은 쉽지 않지만....  react에서 비제어 컴포넌트로 이용하고자 할때 html의 api를 이용하면 접근방법에 힌트를 얻을 수 있을것만 같습니다

2022.03.03 - [Frontend/React] - 제어 컴포넌트 vs 비제어 컴포넌트

아래는 input에 pattern 속성을 지정한 후에 validity를 통해 ValidityState 객체를 조회한 화면 입니다.

우리가 얻고자 하는 valid 값 외에도 다양한 속성이 있습니다.

이곳의 valid 값을 통해 input에 입력된 값이 적절한 값인지를 알수 있을것 같네요

만약 통과 하지 못했다면 setCustomValidity를 통해 사용자에게 표시해줄 경고 문구를 설정할 수 있고 

reportValidity 메소드를 통해 사용자에게 노출시켜 줄 수 있습니다.

const input = document.querySelector('.input')
const test = () => {
  const isValid = input.validity.valid
  if (!isValid) {
    input.setCustomValidity('this is wrong')
    input.reportValidity()
  }
}

input.addEventListener('change', test)

reportValidity를 하지 않으면 setCustomValidity에서 설정한 메시지는 사용자에게 보여지지 않습니다!



input에 pattern을 지정해 두면 form에서 submit을 하기 전에 input들의 pattern 통과 여부를 검증합니다

submit은 되지 않고 경고 문구를 출력해 줍니다!

submit전에 input들의 setCustomValidity를 설정 해두면 submit 버튼을 눌렀을때 customMessage를 띄워주므로 ux에 도움이 될수 있습니다!

input의 값의 변화여부를 탐지 할때 change 이벤트를 이용하면 input에서 focus out 되었을때만 이벤트가 발생합니다.

실시간으로 변화하는 값의 여부를 탐지하고 싶다면 keyup, keydown 과 같은 keypress 이벤트를 이용하여야 합니다.

See the Pen Untitled by 정우병 (@woobottle) on CodePen.

picture tag는 media query의 내용에 따라 표현하고자 하는 이미지를 표현할 수 있습니다.

반응형으로 페이지를 제작하여야 할때 viewport의 크기에 따라 원하는 이미지를 보여줄 수 있을것 같습니다.

html5 에서 등장하였으며 버전이 낮은 하위 브라우저에서는 지원하지 않으므로 미리 확인해보고 적용하여야 합니다.

기본 쓰임새는 아래와 같습니다.

<picture>
    <source media="(max-width:300px)" srcset="./images/cayenne.jpeg">
    <source media="(max-width:500px)" srcset="./images/user.jpg">
    <source media="(max-width:700px)" srcset="./images/clothes.png">
    <img src="./images/spider-man-shooting.png" style="width: 300px; height: 300px;">
</picture>

picture 태그 내부에는 source 태그와 img 태그가 위치합니다.

source, img 둘다 닫힌 태그이므로 따로 닫는 태그는 추가해주지 않아도 됩니다.

source의 media attribute에서 True를 반환하면 true를 반환한 source태그의 srcset이 화면에 나타나게 됩니다.

맨 아래에 img 태그를 추가해주는 이유는 두가지 입니다.

1. 위의 source 태그들이 전부 false를 반환하였을 경우 출력값

2. 필수 추가 요소 (img 태그를 추가해 주지 않으면 화면에 출력되지 않습니다.)

아래에 사용하는 예시를 첨부해 두었습니다.

반응형 페이지를 제작할때 picture 태그를 활용하면 효율적으로 사용할 수 있을것 같습니다.

출처: https://www.w3schools.com/tags/tag_picture.asp

DOCTYPE에 대하여 설명하시오
meta 태그에 대해서 알고 있나요?
meta 태그의 요소에 대해서 아는대로 말해보세요

doctype은 html5에서 웹 브라우저의 표준모드를 활성화 하기 위하여 사용합니다.

html living standard부터 doctype이 간소화 되었습니다.

doctype을 선언하지 않으면 quirks mode라는 하위호환성 모드로 진입합니다.

doctype은 <html> 태그 전에 사용하여야 합니다.

html5 이전 버전에서 사용하던 doctype 입니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
</html>

<!DOCTYPE html PUBLIC
     "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
</html>

이렇게 명시해주는 이유는 브라우저가 컨텐츠를 정확하게 표현하도록 마크업 언어에 대한 규칙을 제공하기 위해 사용합니다.

html5 가 표준이 되면서 아래와 같이 변경되었습니다.

html5 버전부터는 아래와 같이 doctype을 선언합니다.

<!DOCTYPE html>
<html>
</html>

이러한 doctype을 선언하지 않으면 브라우저에서는 하위호환성 모드로 마크업을 표현할 수도 있습니다.

브라우저에는 하위 호환성 모드, 표준모드, 거의 표준모드 와 같은 모드들이 존재하는데

(하위 호환 모드는 오래된 브라우저에서를 위하여 렌더링 하고자 할때 사용됩니다.)

이렇게 되면 의도한 것과는 다르게 컨텐츠가 화면에 표시될 수도 있습니다.

웹 페이지를 표준모드로 렌더링 하기 위해서는 doctype을 선언해주어야 합니다.

표준모드로 렌더링 하여 모든 웹 브라우저에서 같은 레이아웃으로 제공될 수 있도록 해야합니다.

html5에서는 SGML과 호환될 수 없으므로 문서 형식 정의를 제공할 필요는 없습니다.(이전의 html에서 dtd를 통해 문서의 형식 정의를 제공하던 것과 같이 할 필요가 없어졌다.)

html5 에서 DOCTYPE의 유일한 목적은 표준모드를 활성화하기 위함입니다.

meta 태그는 해당 문서 혹은 application의 metadata를 담기 위한 요소입니다.

metadata는 데이터를 설명해주기 위한 데이터로 알고 있습니다.

대표적으로 charset, viewport, description, facebook에서의 open graph 요소가 있습니다.

<!-- charset, 문자 인코딩을 어떻게 할 것인지 결정-->
<!-- utf-8, 전세계 언어의 대부분을 지원 -->
<!-- DB의 charset과 맞춰서 선언해주는 것이 가장 바람직-->
<meta charset="utf-8">

<!-- viewport, 모바일, 태플릿 pc에서 화면을 어떻게 노출시킬지 알려주기 위하여 사용 -->
<!-- 해당 meta tag가 없으면 모바일 브라우저에서 이상하게 렌더링 됨 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<!-- SEO에 대한 도움을 주는 metadata -->
<meta name="description" content="웹 사이트에 대한 정보">


<!-- facebook -->
<!-- open graph protocol -->
<meta property="og:title" content="metadata element">
<meta property="og:description" content="metadata element">
<meta property="og:url" content="metadata element">
<meta property="og:image" content="metadata element">

이중에 meta name="description"을 사용하지 않게 되면 

크롤러가 웹페이지를 긁어 갈때 body 요소내부에서 의미있는 첫번째 것을 가져가게 됩니다. 

메뉴명 혹은 로고가 긁어질 수도 있게 됩니다. 원하던 요소가 검색엔진에 노출되지 않을수 있게 됩니다.

출처 : http://www.tcpschool.com/html-tags/doctype

https://developer.mozilla.org/ko/docs/Web/HTML/Quirks_Mode_and_Standards_Mode

https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%ED%98%95%EC%8B%9D_%EC%84%A0%EC%96%B8

• 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의 type이 어떤 특성이 있고 왜 존재하는지

button 태그는 html4 에서 등장했습니다. 

button의 등장 이전에는 <input type="button" /> 을 이용해 button의 동작을 대신하였다고 합니다.

input 태그는 닫힌 태그라 자식을 가질수가 없습니다. 

하지만 button태그는 안에 자식을 가질수 있습니다.

이미지나 svg와 같은것들도 위치시킬 수 있습니다.

<button type="button">
	test
</button>

::after, ::before와 같은 pseudo 속성들을 가질수 있고 이를 이용해 스타일을 커스텀하기 편합니다.

이러한 button tag를 사용할 때 type의 명시를 지정해주는 것이 좋습니다.

기본 값이 submit이기 때문입니다!!

button tag를 form tag의 외부에서 사용할 때에는 type이 'submit'이여도 동작하지 않습니다. 

하지만 form tag로 감싸질 수 있는 상황이 발생할 수도 있고 웹 접근성을 고려할 때 기본값이 아닌 type="button"으로 명시를 해주는게 좋다고 생각합니다.

See the Pen Missing button type by Claire (@clairecodes) on CodePen.

출처 : https://nykim.work/96

https://developer.mozilla.org/ko/docs/Web/HTML/Element/button

시맨틱 마크업은 뭐고 왜 필요할까????

시맨틱(Semantic)은 아래와 같은 의미를 가진다.

시멘틱 뜻은 알겠고 그러면 시맨틱 마크업은 의미의 마크업 일까요????

시맨틱 마크업은 마크업을 의미를 잘 전달할 수 있도록 작성하자 정도로 저는 이해하고 있습니다.

html4 까지는 이러한 것들이 없어서 태그의 이름이 제각각 이었습니다. 각자의 기호에 맞게 사용했기 때문이죠

그래서 검색엔진은 웹페이지의 내용을 올바르게 식별할수가 없었습니다. (기준이 제각각이고 의미도 다 다르니까 우선순위의 설정도 힘들고 여러가지 애로사항이 있었지 않았을까 생각이 드네요)

html5가 표준으로 체택되면서 이때 같이 등장한것이 <header>, <section>, <article>, <aside>, <footer>, <nav>, <main> 등등 

태그가 의미를 나타낼 수 있는 태그들이 많이 추가되었어요.

이 태그들이 등장하면서 검색엔진은 기준을 가질수 있었고 웹 페이지들의 내용을 올바르게 식별하는 것이 점차 가능해 졌습니다. 

w3c에 따르면 시멘틱 웹을 다음과 같이 정의합니다.

어플리 케이션, 기업 및 커뮤니티 전반에 걸쳐 데이터를 공유하고 재사용할 수 있습니다.

의미를 부여하는 몇가지 예를 확인해보겠습니다.

• 헤더와 푸터에 <header>, <footer> 사용
• 메인 컨텐츠에 <main> 사용
• 영역별로 나뉘어져야 할때는 <section> 사용
• 최상위 제목으로 <h1> 사용
• 내비게이션에 <nav> 사용

예를 들어 강조를 해야할때 <strong> 태그와 <b> 태그가 있습니다.

둘의 효과는 같습니다. b는 태그자체의 의미가 스타일(bold의 약자), strong은 태그자체의 의미가 강하게 라는 뜻을 가지고 있습니다.

이러할때 의미 부여가 되는 strong을 쓰는것이 시멘틱 마크업에 더 적합하지 않을까 생각합니다.

결론 

=> 시멘틱 마크업을 사용하자

이유는???

• 유지보수에 더 좋다 왜??? => 태그만 보고 위치와 역할 파악이 가능해진다.
• 검색엔진 최적화에 유리하다. 왜??? => 검색엔진이 시멘틱 태그를 중요한 키워드로 간주하기 때문에!!
• 스크린 리더가 의미를 파악하기 쉬워진다. mac의 voiceover를 이용하면 스크린 리더기가 화면을 읽어줍니다. 이때 header, footere등을 같이 읽어 준다면 대상자가 이해를 하기가 더 쉬워실 겁니다.

개인적으로 시맨틱 마크업이 잘 되어있다고 생각하는 사이트 

 https://www.lezhin.com/ko

출처 : 

http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/html/html5_semantic_elements.asp.html

https://velog.io/@hyun_sang/HTML-%EC%8B%9C%EB%A7%A8%ED%8B%B1-%EB%A7%88%ED%81%AC%EC%97%85

Input 태그를 작성시 label 태그는 왜 필요한지???? 어떤 이점이 있을지 알고 싶었습니다.

크게 2가지의 이유로 필요하다고 생각합니다.

1. label 태그와 input 태그를 연결해주면 label 태그를 클릭함으로써 input 태그가 체크 or focusing 되게 할 수 있습니다. 

이러한 동작은 웹의 ux에 도움을 줄것 같네요

2. 스크린 리더기에서 label 태그를 읽어서 사용자가 입력해야 하는 텍스트가 무엇인지 더 쉽게 이해할 수 있습니다.

이러한 두가지 이유가 있으니 이제 어떻게 사용하는지 알아보도록 하겠습니다.

<label for="test">click me</label>
<input type="text" id="test">

<label>
  click me
  <input type="text" id="test">
</label>

input 태그는 Label 밖에 위치할 수도 있고 안에 위치할 수도 있습니다. 

밖에 위치할 경우 label의 for와 input의 id 값이 일치하여야 합니다.

안에 위치할 경우 일치시켜주는 과정은 필요 없습니다.

두개의 경우 모두 lable을 클릭하면 input창에 focusinig이 잡히게 됩니다.

type이 checkbox, radio면 check 값이 토글 되게 됩니다.

주의사항 

접근성 측면에서  lable 태그 안에 anchor태그나 button tag는 넣지 않는것이 좋습니다.

이렇게 하면 lable을 클릭했을때 해당 태그들이 트리거 되므로 입력에 방해가 될 수도 있습니다.

<!-- 지양 해야할 사례 -->

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions">
  I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a>
</label>

헤더 태그들 또한 사용하지 않는것이 좋습니다.

헤더 태그는 주로 탐색 목적의 보조 도구로 사용되는데 Label 태그 안에 헤더 태그가 존재하게 되는 경우 

많은 보조 기술들을 방해하게 됩니다.

<!-- 지양 해야할 사례 -->

<label for="your-name">
  <h3>Your name</h3>
  <input id="your-name" name="your-name" type="text">
</label>

https://developer.mozilla.org/ko/docs/Web/HTML/Element/label

https://codepen.io/woobottle/pen/BamGKNy