IT/HTML

HTML 1일차 - 태그

쭈루짱나눈짱 2023. 5. 9. 10:34
반응형
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>태그 공부</title>
</head>

<body>
    <!--
        <p> - 텍스트 단락을 입력할 때
        <br> - 줄 바꿈을 할 때

        텍스트를 굵게 표시
        <strong> - 경고나 주의사항처럼 강조해야 할 때
        <b> - 단순히 글자만 굵게 표시할 때

        텍스트를 기울여 표시
        <em> - emphasis의 줄임말
        <i> - italic의 줄임말

        순서없는 목록 태그 - <ul> , <li>
        순서있는 목록 태그 - <ol>, <li>

    -->


    <h1>레드향</h1> 추가된 내용
    <p>껍질에 <strong>붉은 빛</strong>이 돌아 <b>레드향</b>이라 불린다</p>
    <p><em>레드향</em><i>한라봉</i>과 귤을 교배한 것으로 <br>
        일반 귤보다 2~3배 크고, 과육이 붉다.</p>
    <hr>
    <h2>레드향 샐러드 레시피</h2>
    <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
    <ul style="list-style-type:square;">
        <li>샐러드 채소를 씻어 물기를 제거한 후 먹기 좋게 썰어서 준비합니다.</li>
        <li>레드향과 아보카도, 토마토도 먹기 좋은 크기로 썰어 둡니다.</li>
        <li>드레싱 재료를 믹서에 한꺼번에 넣고 갈아 줍니다.</li>
        <li>볼에 샐러드 채소와 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
    </ul>
    <ol type="i">
        <li>샐러드 채소를 씻어 물기를 제거한 후 먹기 좋게 썰어서 준비합니다.</li>
        <li>레드향과 아보카도, 토마토도 먹기 좋은 크기로 썰어 둡니다.</li>
        <li>드레싱 재료를 믹서에 한꺼번에 넣고 갈아 줍니다.</li>
        <li>볼에 샐러드 채소와 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
    </ol>
    <hr>

    <!--
        (이름과 값 형태로 된>설명 목록 <dl>, <dt>, <dd> 태그
        기본형  <dl>
                    <dt>이름</dt>
                    <dd>값</dd>
                </dl>
    -->
    <h2>상품 구성</h2>
    <dl>
        <dt>선물용 3kg</dt>
        <dd>소과 13~16과</dd>
        <dd>중과 10~12과</dd>
    </dl>
    <dl>
        <dt>선물용 5kg</dt>
        <dd>중과 15~19과</dd>
    </dl>
</body>

</html>
반응형

'IT > HTML' 카테고리의 다른 글

HTML 3일차 - form 태그  (0) 2023.05.09
HTML 2일차 - 하이퍼링크(a)  (0) 2023.05.09
HTML 2일차 - 미디어태그(audio, video)  (0) 2023.05.09
HTML 2일차 - 미디어태그(object, embed)  (0) 2023.05.09
HTML 2일차 - 미디어 태그(img)  (0) 2023.05.09