1. HTML 문서의 구조

HTML 문서는 DOCTYPE 선언으로 시작하며, 웹 브라우저에 문서가 HTML5임을 알립니다.

2. 기본적인 HTML 태그


<html> HTML 문서의 시작과 끝을 나타냅니다.
<head> 웹 페이지의 메타 정보를 포함합니다.
<title> 웹 페이지의 제목을 설정합니다. 브라우저 탭에 표시됩니다.
<body> 웹 페이지의 본문을 나타냅니다.
<h1> ~ <h6> 제목 태그입니다. <h1>이 가장 크고, <h6>은 가장 작습니다.
<p> 문단을 나타내는 태그입니다.
<a> 하이퍼링크를 생성합니다. href 속성으로 링크를 지정합니다.
<img> 이미지를 삽입합니다. src 속성에 이미지 경로를 지정합니다.
<div> 블록 요소를 그룹화하여 섹션을 만듭니다.
<span> 인라인 요소를 그룹화하며 텍스트에 스타일을 적용합니다.
<table> 테이블을 생성합니다.
<tr> 테이블의 행을 정의합니다.
<td> 테이블의 데이터 셀을 정의합니다.
<th> 테이블의 헤더 셀을 정의합니다.
<ul> 순서 없는 목록을 만듭니다.
<ol> 순서 있는 목록을 만듭니다.
<li> 목록의 항목을 정의합니다.
<form> 사용자 입력을 위한 양식을 만듭니다.
<input> 입력 필드를 생성합니다. type 속성으로 다양한 필드를 만듭니다.

 

🔥 도전해봅시다

- 1. 사과와 바나나를 소개하는 패이지를 제작하여 봅시다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>바나나 소개</title>
</head>
<body>
    <h1>바나나!</h1>
    <hr>
    <h2>바나나에 대하여</h2>
    <p>바나나는 전 세계에서 가장 인기 있는 과일 중 하나입니다. 바나나는 건강에 보호적인 영향을 미칠 수 있는 필수 영양소를 함유하고 있습니다.</p>
    <img src="banana.png" alt="바나나 사진" width="200">
    
    <h2>바나나의 건강 이점</h2>
    <ul>
        <li>높은 섬유질 함량</li>
        <li>심장 건강</li>
        <li>소화 촉진</li>
    </ul>
    
    <h2>맛있는 바나나 레시피</h2>
    <form>
        <label for="email">이메일:</label>
        <input type="email" id="email" name="email"><br><br>
        <label for="recipe">당신의 좋아하는 바나나 레시피를 공유해주세요:</label><br>
        <textarea id="recipe" name="recipe" rows="4" cols="50"></textarea><br><br>
        <button type="submit">제출</button>
    </form>
    
    <a href="apple.html">사과에 대하여</a>
</body>
</html>

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>사과 소개</title>
</head>
<body>
    <h1>사과!</h1>
    <hr>
    <h2>사과에 대하여</h2>
    <p>사과는 달콤하고 영양이 풍부한 과일로, 세계적으로 사랑받는 과일입니다. 다양한 비타민과 항산화 물질이 풍부합니다.</p>
    <img src="apple.png" alt="사과 사진" width="200">
    
    <h2>사과의 건강 이점</h2>
    <ul>
        <li>면역력 강화</li>
        <li>체중 관리</li>
        <li>심장 건강</li>
    </ul>
    
    <h2>맛있는 사과 레시피</h2>
    <form>
        <label for="email">이메일:</label>
        <input type="email" id="email" name="email"><br><br>
        <label for="recipe">당신의 좋아하는 사과 레시피를 공유해주세요:</label><br>
        <textarea id="recipe" name="recipe" rows="4" cols="50"></textarea><br><br>
        <button type="submit">제출</button>
    </form>
    
    <a href="banana.html">바나나에 대하여</a>
</body>
</html>

'Education > KnockOn Bootcamp 3rd' 카테고리의 다른 글

[2주차 TIL] KnockOn Bootcamp Apache  (3) 2024.12.16
[2주차 TIL] KnockOn Bootcamp Javascript  (1) 2024.12.16
[1주차 TIL] KnockOn Bootcamp HTML, CSS, Javascript란?  (2) 2024.12.08
[1주차 TIL] KnockOn Bootcamp 프록시  (0) 2024.12.07
[1주차 TIL] KnockOn Bootcamp 패킷  (1) 2024.12.07

티스토리툴바