KnockOn/2주차 TIL

[2주차 TIL] KnockOn Bootcamp - HTML

_눙이_ 2024. 12. 12. 23:03
반응형

HTML 기본 태그

 

💡 이번에 배울 내용은 다음과 같습니다.

1. HTML 문서의 구조
2. 기본적인 HTML 태그들
3. 각 태그의 용도와 사용법

HTML(HyperText Markup Language)은 웹 페이지를 만들기 위한 언어입니다. HTML 태그는 웹 페이지의 구조를 정의하고, 웹 브라우저에 어떻게 표시될지를 결정합니다.

 

HTML 문서의 기본 구조

HTML 문서는 DOCTYPE 선언으로 시작합니다.

이는 웹 브라우저에게 이 문서가 HTML5 문서임을 알려주는 역할을 합니다.

<!DOCTYPE html>
<html>

<head>
<title>웹 페이지 제목</title>
</head> 

<body> 
<h1>페이지 제목</h1>
<p>본문 내용이 여기에 들어갑니다.</p>
</body>

</html>
  • <!DOCTYPE html>: HTML5 문서를 선언합니다.
  • <html>: HTML 문서의 시작과 끝을 나타냅니다.
  • <head>: 메타 정보, 스타일, 스크립트를 정의합니다.
  • <body>: 실제 화면에 표시될 내용을 담습니다.

주요 HTML 태그들

기본 태그

  • <h1> ~ <h6>: 제목 태그. <h1>이 가장 크고 <h6>이 가장 작습니다.
  • <p>: 문단 태그로, 일반 텍스트를 작성할 때 사용합니다.
  • <a>: 하이퍼링크를 생성. href 속성으로 링크 주소를 지정합니다.
<a href="https://example.com">Example</a>
  • <img>: 이미지를 삽입. src 속성에 이미지 경로를 넣습니다.
<img src="image.jpg" alt="설명">

레이아웃 태그

  • <div>: 블록 요소로, 큰 구역을 나눌 때 사용합니다.
  • <span>: 인라인 요소로, 특정 텍스트를 스타일링할 때 유용합니다.

목록 태그

  • <ul>: 순서가 없는 목록.
  • <ol>: 순서가 있는 목록.
  • <li>: 목록 항목.
<ul> <li>첫 번째 항목</li> <li>두 번째 항목</li> </ul>

테이블 태그

  • <table>: 테이블을 생성.
  • <tr>: 행을 정의.
  • <td>: 데이터 셀.
  • <th>: 헤더 셀.
<table> <tr> <th>이름</th> <th>나이</th> </tr> <tr> <td>홍길동</td> <td>30</td> </tr> </table>

양식 태그

  • <form>: 사용자 입력을 받는 양식을 생성.
  • <input>: 다양한 입력 필드를 생성
<form> <input type="text" name="username" placeholder="이름 입력"> <button type="submit">제출</button> </form>

 

 

이것 외에도 정말 많은 태그들이 있습니다. 아래 링크에서 더 많은 태그들을 확인할 수 있습니다. HTML 태그

 

HTML elements reference - HTML: HyperText Markup Language | MDN

This page lists all the HTML elements, which are created using tags.

developer.mozilla.org

 

 

🔥 도전해봅시다.

아래의 사진을 참고하여, 사과와 바나나를 소개하는 패이지를 제작하여 봅시다.

두 개의 페이지는 서로 a태그를 이용하여 서로 연결되어 있습니다. 제출 버튼을 눌렀을 때의 동작은 구현하지 않아도 좋습니다
반응형