기능적인 요소들
참고 : html코드검사기

📌<img>

: html 페이지에 이미지를 삽입할 때 사용하는 태그 (열린 태그만 있음)
인라인요소이다.(여러장을 등록 시, 옆으로 이미지가 붙게 된다.)
이미지 태그에는 type 속성 없음!!!!

<img src="이미지경로" alt="이미지정보텍스트">

src 속성

src (source)
경로에 /로 시작되면 절대경로(root 제일 본래 경로, 시작 경로)
이 프로젝트의 절대경로는 무엇일까?
예를 들어 dayhun/images/peng.png과 dayhun/test/img.html의 위치라면,
따라서 /images/peng.png로 경로를 지정

상대경로를 이용하면, img.html에서 이미지폴더로 가려면 하나 밖으로 나가야함
따라서 ../images/peng.png로 경로를 지정
../ : 현 폴더의 하나 밖!
./ : 현 폴더 현재 그 위치!

이렇게 총 방법 2가지 가능.

alt 속성

alt는 대체 속성이라고 생각하면 된다.
이미지 로딩에 실패하면 alt속성의 값이 등장한다!
또는 스크린리더와 같은 프로그램에 정보를 제공하기 위한 용도로 사용하니, 잘 사용하자!
장식적인 이미지들은 따로 alt값을 넣어주지 않아도 된다.

• <img src="경로"> 이 경우 스크린리더에서 "파일명"과 "라벨이 없는 이미지"라고 읽어준다.
• 따라서 <img src="경로" alt="">라고 공백으로 해주면 스크린리더에서 생략하게된다!
• <img src="경로" alt=" ">라고 공백이 있으면 "파일명"을 읽음!
  되도록이면 alt를 쓰든 안쓰든 사용하도록 하자!

반응형 이미지를 위한 srcset

srcset 속성을 사용하면 여러 해상도에 대응하여 브라우저가 알아서 이미지를 선택하면서 최상의 이미지를 로딩하게 된다.
성능에 따라 로딩의 속도가 달라지기 때문에, srcset을 이용하면 좋다.
즉, 이미지들 중에서 브라우저가 선택!

- x 서술자

: 화소의 밀도를 나타낸다.
화소의 밀도(Pixel density) : 동일한 면적에 들어가는 화소의 수
같은 1픽셀 크기 안에 화소의 갯수가 많을 수록 해상도가 높아진다고 보면 된다.

<img
width="200px"
srcset="img/logo_1.png 2x, # 1픽셀에 2개의 화소가 들어간다.
        img/logo_2.png 3x" #1픽셀에 3개의 화소가 들어간다.
src="a.png"
alt="test">

cf)
현재 화면의 화소 밀도를 알고 싶으시다면 브라우저 api를 이용해서 볼 수 있다.
화면의 콘솔창에서 window.devicePixelRatio 명령어를 입력
숫자가 높을 수록 좋은 모니터 ㅎㅅㅎ

- w 서술자

: 원본 이미지의 넓이가 차례대로 300px, 600px, 900px 임을 브라우저에게 알려준다.
이때 px가 아닌 w로 표기해야한다.

<img
width="200px" # 이미지의 크기
srcset="img/logo_1.png 300w, # 이 중 골라서 보여주기
        img/logo_2.png 600w,
        img/logo_3.png 700w"
src="a.png"
alt="test">

x와 w를 함께 사용하진 않는다!
srcset 속성은 인터넷익스플로러에서 작동하지 않음!
크기가 큰 것 부터 쓰기!

- size 속성

: 뷰포트의 조건에 따라 이미지가 UI안에서 차지하게 될 사이즈를 브라우저에 알려주기

<img srcset="images/rabbit_500.png 500w,
    images/rabbit_300.png 300w, images/rabbit_150.png 150w" 
	sizes="(min-width:960px) 500px, (min-width:640px) 300px, # 그외는 300으로!
    900px" src="images/rabbit_150.png" alt="rabbit">

화면크기가 줄어들고 늘어남에 따라, 지정된 토끼 이미지 등장!

브라우저는 우리가 제공한 이미지의 원본 사이즈와 뷰포트에 따른 이미지의 사이즈 정보를 통합해 가장 적절한 이미지를 로딩하게 된다.

srcset 속성을 사용하면 그에 맞는 sizes 속성도 반드시 명시해야함!

💡 sizes 속성을 사용할 때 주의할 점
CSS를 통한 이미지의 사이즈를 컨트롤 하는 방법인 sizes 속성과 충돌 할 수 있기 때문에,
협업시 사전에 반드시 동료들에게 어떠한 방법으로 반응형 이미지를 처리했는지 공유해야 충돌을 피할 수 있다!

📌<picture>

: 각기 다른 디스플레이 혹은 디바이스에 따라 조건에 맞는 이미지를 보여주는 요소이다.
<source> 요소와 <img> 요소를 이용!

- media 속성

media 속성의 값을 통해 조건에 알맞는 이미지를 찾고, 조건에 맞는 source의 srcset 속성값을 찾아 scr에 넣어 화면에 출력하게 된다.
media 속성은 사진 자체를 교체할 수 있다.
<img> 요소가 없다면 이미지가 화면에 나타나지 않으니 주의!

❓img의 srcset와 picture의 media 차이점이 정확히 뭘까?

즉, srcset에서 x서술자, w서술자, sizes 속성은 동일 이미지로, 사이즈가 바뀜
picture 태그의 media 속성은 다른 이미지로 바뀌기 가능

<picture>
    <source srcset="babies_large.jpeg" media="(min-width:960px)"> #해당안되면 아래로
    <source srcset="babies.jpeg" media="(min-width:620px)"> #해당안되면 아래로
    <img src="babies_small.jpeg" alt="귀여운 아기 팽귄들"> # 최후의 수단으로 이 이미지를 보여라.
</picture>

- type 속성 : 이미지의 포맷 타입을 브라우저에게 알려주는 속성.

브라우저가 지원하면 포맷이 아니라면 다음 source 태그로 이동한다.
지원 가능한 포맥이 없다면, 맨 마지막 img 태그의 이미지를 랜더링한다.
즉, 브라우저가 쓸 수 있는 포맷을 고르는 것!

<picture>
    <source srcset="babies.webp" type="image/webp"> # 지원안하면 아래로
    <source srcset="babies.avif" type="image/avif"> # 지원안하면 아래로
    <img src="babies.jpeg" alt="귀여운 아기 팽귄들"> # 최후의 수단
</picture>

WebP나 AVIF 와 같은 최신 포맷의 이미지를 지원하고 싶다면
크로스브라우징을 위해 <picture> 요소와 함께 사용 하는 것이 좋다.

이러한 크로스브라우징 기법을 ⭐️점진적 향상기법⭐️이라고 한다.
위 코드를 예로 들면,

: 예전 기술 환경에서 동작할 수 있는 기능 구현 (<img src="babies.jpeg" alt="귀여운 아기 팽귄들" type="image/jpeg">)

최신기술환경에서는 최신 기술 제공
(<source srcset="babies.webp" type="image/webp"> <source srcset="babies.avif" type="image/avif">)

이 두가지를 모두하는 방법을 점진적 향상 기법이라고 한다.

이미지 포맷의 종류 ⭐️

• GIF(Graphics Interchange Format) :
  256색의 컬러만 표현 가능하기 때문에 선명하진 않지만 용량이 적게 든다.
  투명은 표현 가능하지만 그 정도를 조절하는건 불가능하며, 때문에 그림자 표현도 불가능.
  애니메이션 처리가 가능. 움짤!

• JPG/JPEG (Joint Photographic Expert Group image):
  매우 화소가 높고, 용량도 적지만 투명처리가 불가능.

• PNG (Portable Network Graphics) :
  왠만한 컬러는 모두 표현 가능하여 투명 영역을 처리 가능하지만 용량이 큼.

• SVG (Scalable Vector Graphics) :
  SVG 형식의 벡터 이미지는 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능.
  이미지의 모양 자체가 복잡해지고 컬러풀한 경우, 안에 코드가 굉장히 많아지기 때문에 용량이 엄청나게 증가하게 된다. 단순한 이미지만 표현하는 것이 좋음!

• WebP (Web Picture Format) :
  압축률이 좋다고 소문난 JPEG 이미지에 비해, 용량이 70% 수준으로 낮지만, 더 뛰어난 색상을 지원하는 포맷.
  그럼에도 불구하고 PNG처럼 투명도 표현 가능하며, GIF처럼 애니메이션 표현도 가능한 만능 포맷!

• AVIF (AV1 Image File Format) :
  WebP 처럼 뛰어난 색상표현, 애니메이션 지원, 투명도 표현 모두 가능.
  JPEG 이미지의 50% 수준인 용량을 자랑하는 차세대 이미지 포맷!
  아직 지원하지 않는 브라우저가 많음에 주의해야함.

📚 html 연습

떡볶이 조리법을 만들어보기!

화면의 크기가 620px 이하가 되면 이미지가 바뀌도록 설정했다.

📚 피드백

🔑 참고 사이트 부분은 <cite>를 이용해주는 것이 좋음!!

(링크도 걸어주는게 좋음!)
무언가의 출처, 인용한 것을 작성할 때 사용하는 태그이기 때문!

수정 전 코드

<p>
	<a href="https://www.10000recipe.com/recipe/6858080">참고 사이트 : 떡볶이만들기</a>
</p>

수정 후 코드

<cite>
	<a href="https://www.10000recipe.com/recipe/6858080">참고 사이트 : 떡볶이만들기</a>
</cite>

cf)
footer 태그는 회사정보, 저작권 쓸때 사용하기 때문에, 참고사이트 태그로 사용하기엔 부적절함!

🔑 article 태그는 따로 떼어놓았을때도 어색하지 않아야 사용할 수 있다.

즉, articule은 독립적이어야한다. (독립적으로 그 기능을 할 수 있어야 한다.)

예를 들어, 떡볶이 만들기 h1과 떡볶이 이미지 picture태그를 article로 감싸면 따로 보았을때 "엥 이게 뭐지?" 할 수 있으니 사용하기 부적절하다는 뜻이다.

만약, 재료내용과 만드는 방법 내용을 넣고싶다면
두 내용은 독립적으로 있어도 내용적으로 기능을 하기 때문에
<article> 재료내용~ </article>
<article> 만드는 방법 내용~ </article>
으로 표현할 수 있다.

🔥 section과 article 더 공부하기🔥

🔑 음식 만들기 목록은 ol li로 쓰는게 적당!

순서가 있는 목록 같은 경우엔,
<p>태그를 사용하는 것 보다는, <ol><li>를 사용하는 것이 옳다!
만약 순서가 없는 목록의 경우엔,
<ul>로!!
ol,ul 정리

🔑 이미지의 alt부분은 조금 구체적인 설명을 넣어주는 것이 좋다!

단순히 '떡볶이사진'이라는 설명보다는 '빨간 매운 떡볶이사진'처럼 이미지를 알 수 있는 설명을 넣어주는 것이 좋다!

🔑 p태그는 문장을 감쌀 뿐이다.

너무 많은 문장을 감싸는 용도로는 좋지 않다!
사용하더라도 짧은 문장에서 사용하는 것을 추천!

🔑 body>header/main/footer 습관 good

header > h1 넣는 부분
main > 내용 넣는 부분
footer > 회사 정보 등을 넣는 부분

<body>
	<header></header>
	<main></main>
	<footer></footer>
</body>

📚 피드백 후 수정

화면 줄이기 전 화면

화면 줄였을 때 화면

수정한 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>떡볶이 조리법</title>
</head>
<body>

    <header>
        <h1>떡볶이 만들기</h1>
    </header>

    <main>  
        <section>
            <picture>
                <source srcset="food2.jpeg" media="(min-width:620px)">
                <img width="auto" height="300px" src="./food.jpeg" alt="빨간매운떡볶이">
            </picture>
            
            <ol>
                <li>떡은 따로 불려두거나 그러지 않아도 괜찮아요. 떡 400g을 냄비에 넣어주세요.</li>
                <li>물은 종이컵으로 2컵 넣어주세요.</li>
                <li>설탕 4큰술, 간장 2큰술, 고춧가루 1큰술, 고추장 1큰술을 넣고 풀어주세요.</li>
                <li>물을 끓이다가 파를 1컵 넣고 졸여주세요.</li>
                <li>떡볶이 완성~!</li>
            </ol>
        </section>    
    </main> 

    <footer>
        <cite>
            <a href="https://www.10000recipe.com/recipe/6858080">
            참고 사이트 : 떡볶이만들기
            </a>
        </cite>
    </footer>    

</body>
</html>