공부정리

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/

개발을 하던중 css에서 dom 요소를 화면에서 보이지 않게 해주는 속성들을 사용하게 될때가 있습니다.

visibility, diasplay, opactity를 제어하는 것이 대표적인 방법입니다.

이 요소들 간에 어떤 차이가 있을지 궁금중이 생겨 포스팅을 합니다.

세개의 속성 전부 dom 요소에는 포함이 됩니다.

opacity: 0과 visibility: hidden은 화면상에 공간을 차지합니다. 

하지만 display: none은 화면에서 공간을 차지하지 않습니다.

opacity: 0은 eventHandler를 등록할 수 있지만

visibility: hidden은 eventHandler를 등록할 수 없었습니다. (visibility: visible 이면 eventHandler는 정상적으로 등록되어집니다.)

visibility: hidden일때 eventHandler가 등록되지 않는 것과 

opacity: 0 일때 eventHandler가 등록되는 것이 가장 인상깊었습니다.

기획에 따라 알맞은 도구를 선택하는 것이 중요할 듯 합니다.

아래는 예시들 입니다!!

마우스 혹은 손가락으로 스크롤을 할때 화면을 자석마냥 찰싹 찰싹 상단/중단/말단 에 붙일 수 있습니다.

이게 말로 하면 어려운데 아래 동작을 보면 이해하기 쉬울겁니다!!

부모요소에 scroll-snap-type, scroll-padding을 지정할 수 있고

자식요소에 scroll-snap-align, scroll-margin을 지정할 수 있습니다.

이렇게 부모 요소, 자식 요소에 관련된 속성을 따로 부여하여 제어했었던 것은 css flex에서도 했었던 것 같네요

위의 예제는 scroll-snap을 지정한 예제와 지정하지 않은 예제입니다. 

지정하지 않은 예제는 탐색을 위해 더 많은 스크롤 동작을 수행해야 하지만 

scroll-snap 을 효율적으로 이용하면 더 적은 동작으로 원하는 것들을 보여줄 수 있습니다. 

더 나은 ux를 제공해 줄 수 있을것 같습니다.

부모 요소 지정 속성

scroll-snap-type : [none | x | y | block | inline | both] [mandatory | proximity]? ;

scroll-padding : [우리 padding 주듯이]

scroll-snap-type은 scroll을 어디로 할 것이냐를 지정합니다. 

저는 y축으로의 스크롤에 효과를 주기 위해 y를 넣어주었습니다.

mandatory | proximity 는 필수로 지정할 것이냐 | 브라우저의 속성을 따를 것이냐 입니다.

기본 속성은 mandatory 입니다.

scroll-padding은 보이는 화면에서 padding을 주는 것입니다.

자식 요소 지정 속성

scroll-snap-align : [none | start | center | end]

scroll-margin : [우리 margin 주듯이]

scroll-snap-align은 기준점을 의미합니다. 

start를 하면 시작점

center를 하면 중간

end를 하면 끝점을 기준점으로 지정합니다. 

scroll-margin은 개별 요소에서 margin을 지정할 수 있습니다.

See the Pen scroll-snap by 정우병 (@woobottle) on CodePen.

이전 글 중 scroll을 smooth 하게 하는 속성도 있어서 같이 첨부합니다!

2022.03.22 - [markup/css] - scroll-behavior 🌱

출처: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap

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

반응형 웹을 반영하기 위해서 미디어 쿼리를 적용해야 합니다.

아래는 미디어 쿼리의 실사용 예시 입니다.

@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: orange;
    }
  }

미디어 쿼리에는 논리연산자를 이용해 미디어 기기, 미디어 특성 등을 설정할 수 있습니다.

위의 예시중 screen은 미디어 기기, 조건은 min-width 입니다.

미디어 쿼리에 사용할 수 있는 논리연산자는 다음과 같습니다.

• and -> 모든 조건이 참일때 쿼리 내용을 수행합니다. 주로 미디어 기기와 특성을 조합할때 사용합니다.
• not -> 쿼리가 거짓일때만 내용을 반영합니다. (미디어 쿼리 전체의 내용을 부정합니다)
• only
• ,  -> or의 역할을 대신해 줍니다.

미디어 기기에는 다음과 같은 종류가 있습니다.

• all  -> 모든 장치에 적합합니다.
• screen -> 화면이 대상입니다.
• print -> 인쇄 결과물 및 출력 미리보기 화면에 나오는 문서입니다.
• speech -> 음성 합성장치 대상입니다.

복잡한 미디어 쿼리의 예시를 살펴보겠습니다.

@media (min-width: 30em) and (orientation: landscape) {...}

최소 width가 30em 이고 미디어 기기가 가로모드일때만 쿼리를 실행합니다.

@media screen and (min-width: 3em) and (orientation: landscape) {...}

화면이 달린 기기여야 하고 최소 width가 3em 이고 미디어 기기가 가로모드일때만 쿼리를 실행합니다.

이때 미디어 특성의 width는 viewport를 기준으로 입니다.

출처: https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries

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

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;

부드러운 동작을 선호하는 저로서는 사용할 일이 많을것 같습니다!

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior