반응형
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태그를 이용하여 서로 연결되어 있습니다. 제출 버튼을 눌렀을 때의 동작은 구현하지 않아도 좋습니다
반응형
'KnockOn > 2주차 TIL' 카테고리의 다른 글
| [2주차 TIL] KnockOn Bootcamp - PHP (1) | 2024.12.14 |
|---|---|
| [2주차 TIL] KnockOn Bootcamp - Mysql (0) | 2024.12.13 |
| [2주차 TIL] KnockOn Bootcamp - Apache (1) | 2024.12.13 |
| [2주차 TIL] KnockOn Bootcamp - Javascript (0) | 2024.12.12 |
