🙀 시맨틱한 마크업 실습

서가희·2022년 3월 30일

HTML

목록 보기

3/6

시맨틱하게 HTML 작성하기

요리 레시피 작성하는 페이지 with 🍕

업로드중..

<body>
    <section>
        <!-- h1 태그로 제목 붙여주는거 좋음 -->
        <h1>피자 만들기</h1>
        <picture>
            <source srcset="./images/pizza_1.jpg" media="(min-width:960px)">
            <source srcset="./images/pizza_2.jpg" media="(min-width:620px)">
            <img src="./images/pizza_2.jpg" alt="늘어나는 치즈">
        </picture>   
        <!-- p 대신 ol,li로 하는게 좋음 -->
        <ol>
            <li>믹싱 볼에 올리브오일을 제외한 모든 재료를 넣어주세요.
                이때, 이스트와 설탕 소금은 엉겨 붙지 않도록 간격을 두고 넣어주세요.</li>
            <li>반죽기를 사용할 경우 저속(1단)으로 클린업 단계까지 믹싱해주세요.
                반죽기가 없다면 직접 손으로 치대주셔도 좋아요.</li>
            <li>클린업 단계는 오른쪽 사진처럼 볼 안쪽 면에 뭉친 가루 없이 깔끔하게 반죽이 한덩이 질 때예요.</li>
            <li>올리브오일을 넣고 중속(2단)에서 1분-> 고속(3~4단)으로 최종 단계까지 반죽해주세요.</li>
            <li>반죽 위로 비닐을 덮어준 뒤 따뜻하고 습한 곳에서 40분~1시간 정도 1차 발효시켜주세요.</li>
            <li>발효는 오른쪽 사진처럼 반죽이 2배 이상 부풀어 오르고 비닐에 비친 반죽에 구멍이 뽕뽕 보이면 발효가 잘 된 거라고 보시면 돼요.</li>
            <li>1차 발효를 마친 반죽은 양손으로 감싸듯이 잡고 둥글리기 해주세요.
                다시 비닐을 덮어 실온에서 15분 중간 발효 시켜주세요.</li>
            <li> 밀대를 이용하여 피자 도우 반죽을 얇게 밀어주세요.
                이때 반죽의 크기는 팬의 지름보다 0.5~1cm 정도 더 크게 밀어주세요.</li>
            <li>반죽을 피자 팬에 조심스럽게 옮겨준 뒤 포크를 이용하여 바닥 전면에 무작위로 구멍을 내주세요.</li>
            <li>반죽 위로 토마토소스 및 토핑을 수북하게 얹어줄 거라서 구멍이 일정하게 예쁘게 낼 필요는 없어요.
                무작위로 콕콕 가볍게 찍어가며 구멍을 만들어주세요.</li>
            <li>반죽 위로 피자 토핑을 가득 넣어주세요.
                180도 예열된 오븐에서 20분 정도 구워주세요.</li>
        </ol>
            
        <!-- h5는 제목이라 볼 수 없어서 적당하지 않음 -->
        <!-- 인용할 때 cite 참고가 좋음!! -->
        <cite>참고: <a href="https://www.10000recipe.com/recipe/6872262">여기를 눌러주세요</a> </cite>
    </section>
</body>

section 태그로 영역을 나누어주었다.
h1 태그로 제목 작성
picture 태그 사용하여 media 조건에 만족하는 srcset 이미지가 나오도록 만들어주었다.
사실 레시피 순서할 때 p 태그로 하나씩 작성했었다!! 비효율적일 뿐더러 ol li 태그를 바로 작성하면 되는 것을 ㄲㅏ먹었다ㅏ~~~
인용할 때에는 cite 태그가 좋다는 것 기억하기🥨 인용 시 q 태그도 있따

최종 소스코드

<!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>html 만들어보기</title>
    <style>
        a {
            text-decoration: none;
            color : darkgrey;
        }
    </style>
</head>
<body>
    <section>
        <!-- h1 태그로 제목 붙여주는거 좋음 -->
        <h1>피자 만들기</h1>
        <picture>
            <source srcset="./images/pizza_1.jpg" media="(min-width:960px)">
            <source srcset="./images/pizza_2.jpg" media="(min-width:620px)">
            <img src="./images/pizza_2.jpg" alt="늘어나는 치즈">
        </picture>   
        <!-- p 대신 ol,li로 하는게 좋음 -->
        <ol>
            <li>믹싱 볼에 올리브오일을 제외한 모든 재료를 넣어주세요.
                이때, 이스트와 설탕 소금은 엉겨 붙지 않도록 간격을 두고 넣어주세요.</li>
            <li>반죽기를 사용할 경우 저속(1단)으로 클린업 단계까지 믹싱해주세요.
                반죽기가 없다면 직접 손으로 치대주셔도 좋아요.</li>
            <li>클린업 단계는 오른쪽 사진처럼 볼 안쪽 면에 뭉친 가루 없이 깔끔하게 반죽이 한덩이 질 때예요.</li>
            <li>올리브오일을 넣고 중속(2단)에서 1분-> 고속(3~4단)으로 최종 단계까지 반죽해주세요.</li>
            <li>반죽 위로 비닐을 덮어준 뒤 따뜻하고 습한 곳에서 40분~1시간 정도 1차 발효시켜주세요.</li>
            <li>발효는 오른쪽 사진처럼 반죽이 2배 이상 부풀어 오르고 비닐에 비친 반죽에 구멍이 뽕뽕 보이면 발효가 잘 된 거라고 보시면 돼요.</li>
            <li>1차 발효를 마친 반죽은 양손으로 감싸듯이 잡고 둥글리기 해주세요.
                다시 비닐을 덮어 실온에서 15분 중간 발효 시켜주세요.</li>
            <li> 밀대를 이용하여 피자 도우 반죽을 얇게 밀어주세요.
                이때 반죽의 크기는 팬의 지름보다 0.5~1cm 정도 더 크게 밀어주세요.</li>
            <li>반죽을 피자 팬에 조심스럽게 옮겨준 뒤 포크를 이용하여 바닥 전면에 무작위로 구멍을 내주세요.</li>
            <li>반죽 위로 토마토소스 및 토핑을 수북하게 얹어줄 거라서 구멍이 일정하게 예쁘게 낼 필요는 없어요.
                무작위로 콕콕 가볍게 찍어가며 구멍을 만들어주세요.</li>
            <li>반죽 위로 피자 토핑을 가득 넣어주세요.
                180도 예열된 오븐에서 20분 정도 구워주세요.</li>
        </ol>
            
        <!-- h5는 제목이라 볼 수 없어서 적당하지 않음 -->
        <!-- 인용할 때 cite 참고가 좋음!! -->
        <cite>참고: <a href="https://www.10000recipe.com/recipe/6872262">여기를 눌러주세요</a> </cite>
    </section>
</body>
</html>

☑ Tip

article은 독립적으로 기능! article 한개가 화면에 떴을때 무슨 소리지?가 되면 안돼

footer는 저작권정보, 회사 정보 등이 있을 때

img alt 값에 이미지에 대해 좀더 상세히 설명 👉 잘 늘어나는 치즈

p태그는 문장 하나만 감싸는 코드

cite 태그 : 인용, 출처 적어줄때

section 으로 구획 나눠주기, section 안에 section 중첩 가능

header/ main/ footer 로 크게 나눠주는 습관!

article : 미니 html이라고 생각하면 좋음

서가희

이전 포스트

🔎 HTML (2)

다음 포스트

🙀 시맨틱한 마크업 실습

HTML

시맨틱하게 HTML 작성하기

요리 레시피 작성하는 페이지 with 🍕

최종 소스코드

☑ Tip

🔎 HTML (2)

🔎 HTML (4)

0개의 댓글