[CodeLion] Day3 실습 기록 🦁

숩딩·2022년 3월 30일

html 멋사TIL

[멋쟁이 사자처럼] 프론트엔드 스쿨 2기

목록 보기

4/28

Day3 기록

시맨틱하게 작성하는 HTML 실습

🍕 레시피를 작성하는 페이지를 만들어보자!

이 페이지는 최종 구현 페이지이다!

지금까지 배운 내용을 토대로 html 을 작성하는 실습을 해보았다.

<!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>
</body>

매우 평범하게 시작~
body 안에 제목을 적어주고

<h1>Let's Make Pizza</h1>

article 로 독립적인 영역을 만들어줬다.

<article>
	<h2>바베큐 토르티야 피자 </h2>
        
        <!-- 이미지가 들어갈 부분  -->
        
      <h3>재료</h3>
      <p style="word-break: keep-all;"> 
        토르티야 2장, 돼지고기 안심 80g, 양송이버섯 3개, 
        빨강 파프리카·노랑 파프리카 ¼개씩, 브로콜리 ⅛송이, 바비큐소스 2큰술, 
        모차렐라치즈 2½컵, 토마토소스 2½큰술, 간장·다진 마늘 1작은술씩, 
        포도씨유·소금·후춧가루·청주 약간씩
      </p>

      <h3>피자 만드는 방법</h3>
      <ol style="word-break: keep-all;">
        <li>
          돼지고기는 한입 크기로 썰어 소금, 후춧가루, 청주로 밑간한다.
        </li>

        <li>
          양송이버섯은 슬라이스하고, 파프리카는 네모나게 썰고,<br>
           브로콜리는 작게 썰어 끓는 물에 데친 뒤 찬물에 헹구어 물기를 뺀다.
        </li>

        <li> 
          달군 팬에 포도씨유를 두르고 다진 마늘을 볶아 향을 낸 다음<br>
           돼지고기를 볶아 노릇하게 익으면 바비큐소스를 넣는다.
          </li>

        <li>
          토르티야 한 장에 모차렐라치즈를 듬뿍 올리고 다른 토르티야로 덮는다.
        </li>

        <li>토마토소스를 펴 바르고 돼지고기, 채소, 모차렐라치즈를 얹어<br>
           220℃로 예열한 오븐에서 치즈가 녹을 때까지 5~6분간 굽는다.
        </li>
      </ol>
</article>

h2, h3 로 제목을 설정
한글의 white-space를 단어단위로 하기 위해 긴 글들에게 word-break: keep-all 을 사용
레시피 순서를 나타내는 요소에는 순서를 표현해주기 위해 ol (ordered list) 와 li 를 이용해 작성

여기까지는 쉽게 했지만 수업때 헷갈렸던 img 속성값으로 반응형 이미지로 만드는 부분이 헷갈렸다...

기존에는 html 에서 그냥 이런식으로 적고 css 미디어쿼리로 반응형 이미지로 설정하곤 했는데

<img src="/img/pizza-300.png" alt="pizzza">

html에서도 반응형으로 이미지 사이즈를 조절할 수 있는 속성 srcset 을 배웠다.
(srcset에 있는 이미지들을 브라우저가 성능에 가장 효율적인 이미지를 택해서 해당 이미지를 사이즈 조건에 적용시켜서 보여준다)
그래서 이 속성을 사용해서 반응형 이미지를 만들어 보려고 했으나
인터넷에서 다운받은 하나의 이미지로 반응형을 어떻게 만드는지 헷갈렸음 ,,

<img
 width="450px"
 sizes="(min-width: 960px) 250px,
		(min-width: 620px) 150px,
		300px"
 src="/img/pizza.jpg"
 alt="피자">

처음에 이렇게 코드를 짰드니 전혀 아무런 일도 일어나지 않았다.

응 .. 당연함,,
srcset 을 안썼으니깐요 ,,,
+ img에 width값을 설정해버려서 저 사이즈로만 유지됨요

그래서 다시 고쳐쓴 코드

<img
srcset="/img/pizza-300.png 700w,
       /img/pizza-300.png 600w,
       /img/pizza-300.png 300w"
sizes="(min-width: 960px) 450px,
       (min-width: 400px) 250px,
        150px"
src="/img/pizza-300.png"
alt="달리는 피자 캐릭터">

<img
srcset="/img/pizza-450.jpg 700w,
        /img/pizza-450.jpg 600w,
        /img/pizza-450.jpg 300w"
sizes="(min-width: 960px) 450px,
       (min-width: 400px) 250px,
        150px"
src="/img/pizza-450.jpg"
alt="바베큐 토르티야 피자">

이번엔 srcset 으로 픽셀설정 잘 해주고
min-width: 960px 이상에서는 이미지 width가 450px,
min-width: 400px 이상에서는 이미지 width가 250px,
그 이하에선 150px 이 되도록 sizes 를 입력해주니 잘 동작했다 ㅎㅎ

하나의 이미지 사이즈 말고 뷰포트 사이즈가 달라질 때 이미지가 아예 변경되도록도 해봤다
이건 <picture> 을 이용해서 작성해보았다.

<picture>
      <source srcset="/img/pizza-640.jpg" media="(min-width:960px)">
      <source srcset="/img/pizza-450.jpg" media="(min-width:640px)">
      <img width="80px" src="/img/pizza-300.png" alt="달리는 피자" sizes="(min-width:400px) 200px">
</picture>

<picture> 은 <source> 와 <img> 를 통해 각기 다른 조건에 맞는 이미지를 보여주는 요소이기 때문에 사용해보았다.
<picture> 요소는 media 속성의 값을 통해 조건에 알맞는 이미지를 찾는다. 조건에 맞는 <source> 요소 안의 srcset 속성 값을 찾아 <img> 태그의 src 에 넣어 화면에 보여주기 때문에 <img> 요소가 없다면 ~~이미지가 화면에 나타나지 않는다~~!
<picture> 와 <source> 요소 자체는 이미지를 표현하지 않는다는걸 기억하자!!!!!

마지막으로 중요했던 출처 태그!
인용을 나타내는 <cite> 를 이용해서 작성해주었다.

<cite>출처: <a href="https://www.smlounge.co.kr/best/article/25487">https://www.smlounge.co.kr/best/article/25487</a></cite>

최종코드

<!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>
    <h1>Let's Make Pizza</h1>
    
      <article>
        <h2>바베큐 토르티야 피자 </h2>
       
        <img
        srcset="/img/pizza-300.png 700w,
                /img/pizza-300.png 600w,
                /img/pizza-300.png 300w"
        sizes="(min-width: 960px) 450px,
               (min-width: 400px) 250px,
               150px"
        src="/img/pizza-300.png"
        alt="달리는 피자 캐릭터">

        <img
        srcset="/img/pizza-450.jpg 700w,
                /img/pizza-450.jpg 600w,
                /img/pizza-450.jpg 300w"
        sizes="(min-width: 960px) 450px,
               (min-width: 400px) 250px,
               150px"
        src="/img/pizza-450.jpg"
        alt="바베큐 토르티야 피자">

        <picture>
          <source srcset="/img/pizza-640.jpg" media="(min-width:960px)">
          <source srcset="/img/pizza-450.jpg" media="(min-width:640px)">
          <img width="80px" src="/img/pizza-300.png" alt="달리는 피자" sizes="(min-width:400px) 200px">
        </picture>

      <h3>재료</h3>
      <p style="word-break: keep-all;"> 
        토르티야 2장, 돼지고기 안심 80g, 양송이버섯 3개, 
        빨강 파프리카·노랑 파프리카 ¼개씩, 브로콜리 ⅛송이, 바비큐소스 2큰술, 
        모차렐라치즈 2½컵, 토마토소스 2½큰술, 간장·다진 마늘 1작은술씩, 
        포도씨유·소금·후춧가루·청주 약간씩
      </p>

      <h3>피자 만드는 방법</h3>
      <ol style="word-break: keep-all;">
        <li>
          돼지고기는 한입 크기로 썰어 소금, 후춧가루, 청주로 밑간한다.
        </li>

        <li>
          양송이버섯은 슬라이스하고, 파프리카는 네모나게 썰고,<br>
           브로콜리는 작게 썰어 끓는 물에 데친 뒤 찬물에 헹구어 물기를 뺀다.
        </li>

        <li> 
          달군 팬에 포도씨유를 두르고 다진 마늘을 볶아 향을 낸 다음<br>
           돼지고기를 볶아 노릇하게 익으면 바비큐소스를 넣는다.
          </li>

        <li>
          토르티야 한 장에 모차렐라치즈를 듬뿍 올리고 다른 토르티야로 덮는다.
        </li>

        <li>토마토소스를 펴 바르고 돼지고기, 채소, 모차렐라치즈를 얹어<br>
           220℃로 예열한 오븐에서 치즈가 녹을 때까지 5~6분간 굽는다.
        </li>
      </ol>
      <cite>출처: <a href="https://www.smlounge.co.kr/best/article/25487">https://www.smlounge.co.kr/best/article/25487</a></cite>
      </article>
    
</body>
</html>