반응형
HTML 요소와 속성이란 무엇일까요?
HTML 문서를 구성하는 가장 기본적인 단위를 **요소(element)**라고 합니다. 요소는 특정한 의미나 기능을 나타내며, <와 > 기호로 둘러싸인 태그 쌍으로 표현됩니다. 예를 들어, <p> 태그는 단락을 나타내고, <h1> 태그는 가장 큰 제목을 나타냅니다.
**속성(attribute)**은 요소에 대한 추가적인 정보를 제공하는 역할을 합니다. 속성은 요소의 시작 태그 안에 name="value" 형식으로 작성됩니다. 예를 들어, <img> 태그의 src 속성은 이미지 파일의 경로를 나타내고, alt 속성은 이미지에 대한 설명을 제공합니다.
HTML 요소의 종류와 예시
HTML에는 다양한 종류의 요소가 있습니다. 몇 가지 주요 요소와 예시를 살펴볼까요?
- 문서 구조 요소:
- <html>: HTML 문서의 전체를 감싸는 최상위 요소
- <head>: 문서에 대한 메타 정보를 담는 요소
- <body>: 실제로 보이는 콘텐츠를 담는 요소
- 문단과 제목 요소:
- <p>: 단락을 나타내는 요소
- <h1>, <h2>, <h3>, ...: 제목을 나타내는 요소 (숫자가 클수록 제목의 크기가 작아짐)
- 목록 요소:
- <ul>: 불leted list (원형 목록)
- <ol>: numbered list (번호 목록)
- <li>: 목록 항목
- 링크 요소:
- <a>: 다른 페이지로 이동하는 링크
- 이미지 요소:
- <img>: 이미지를 삽입하는 요소
- 표 요소:
- <table>, <tr>, <td>: 표를 만들기 위한 요소
- 폼 요소:
- <form>: 사용자 입력을 받는 폼
- <input>: 다양한 종류의 입력 필드 (텍스트, 비밀번호, 라디오 버튼 등)
- <button>: 버튼
- 섹션 요소:
- <header>, <nav>, <section>, <article>, <footer>: 문서의 구조를 의미적으로 나타내는 요소
HTML 속성의 예시
- <img>` 태그의 속성:
- src: 이미지 파일의 경로
- alt: 이미지에 대한 설명 (이미지가 로드되지 않을 때 표시)
- width, height: 이미지의 너비와 높이
- <a>` 태그의 속성:
- href: 링크의 목적지 URL
- target: 링크를 새 창에서 열지 여부를 지정
- <input>` 태그의 속성:
- type: 입력 필드의 종류 (text, password, radio 등)
- name: 서버로 전송할 때 사용되는 이름
- value: 초기값
HTML 요소와 속성을 활용한 예시
<!DOCTYPE html>
<html>
<head>
<title>HTML 요소와 속성 예시</title>
</head>
<body>
<h1>제목</h1>
<p>안녕하세요, HTML 세계에 오신 것을 환영합니다!</p>
<img src="cat.jpg" alt="귀여운 고양이 사진" width="200">
<ul>
<li>HTML 배우기</li>
<li>CSS 배우기</li>
<li>JavaScript 배우기</li>
</ul>
<a href="https://www.example.com" target="_blank">예시 웹사이트</a>
</body>
</html>
왜 HTML 요소와 속성을 알아야 할까요?
HTML 요소와 속성을 이해하면 웹 페이지를 구성하고 원하는 모습으로 디자인할 수 있습니다. 또한, 다른 웹 개발 언어인 CSS와 JavaScript와 함께 사용하여 더욱 동적인 웹 페이지를 만들 수 있습니다.
반응형
'HTML&CSS' 카테고리의 다른 글
| [CSS] 1. CSS 소개 (0) | 2024.09.13 |
|---|---|
| #6 HTML 태그 (0) | 2024.08.25 |
| #5 HTML 시맨틱 태그 (0) | 2024.08.25 |
| #4 HTML5의 새로운 기능 (1) | 2024.08.25 |
| #2 HTML 문서의 구조 (0) | 2024.08.25 |
| #1 HTML 이란 (0) | 2024.08.24 |
| ul li 가운데 정렬 (0) | 2016.05.24 |
| audio 태그 다음곡 연속재생 (2) | 2016.05.11 |