HTML(HyperText Markup Language)은 웹 페이지의 구조와 내용을 정의하는 마크업 언어입니다. HTML 요소와 속성은 웹 페이지를 구성하는 중요한 부분으로, 이를 잘 이해하면 보다 효율적이고 기능적인 웹 페이지를 만들 수 있습니다. 이번 블로그 포스트에서는 HTML 요소와 속성에 대해 자세히 알아보겠습니다.
HTML 요소(Element)
HTML 요소는 시작 태그와 종료 태그, 그리고 그 사이의 콘텐츠로 구성됩니다. 예를 들어, 단락을 나타내는 <p> 요소는 다음과 같은 구조를 가집니다:
<p>이것은 단락입니다.</p>
- <p>: 시작 태그
- 이것은 단락입니다.: 콘텐츠
- </p>: 종료 태그
HTML 요소의 종류
HTML 요소는 크게 블록 요소와 인라인 요소로 나눌 수 있습니다.
1. 블록 요소(Block Element)
블록 요소는 항상 새로운 줄에서 시작하며, 전체 너비를 차지합니다.
- 예: <div>, <h1>, <p>, <ul>, <table> 등
<div>
<h1>제목 1</h1>
<p>이것은 단락입니다.</p>
</div>
2. 인라인 요소(Inline Element)
인라인 요소는 줄 안에서 사용되며, 콘텐츠의 너비만큼만 차지합니다.
- 예: <a>, <img>, <span>, <strong>, <em> 등
<p>이것은 <a href="https://www.example.com">링크</a>와 <strong>강조된 텍스트</strong>를 포함한 단락입니다.</p>
HTML 속성(Attribute)
HTML 속성은 요소에 추가적인 정보를 제공하며, 시작 태그 안에 작성됩니다. 속성은 이름과 값의 쌍으로 이루어져 있습니다.
<a href="https://www.example.com" target="_blank">Example 사이트로 이동</a>
- href: 링크의 URL을 지정합니다.
- target: 링크를 클릭할 때 열리는 방식을 지정합니다. _blank는 새 탭에서 열리도록 합니다.
HTML의 주요 속성
1. href
<a> 요소에서 사용되며, 하이퍼링크의 목적지를 지정합니다.
<a href="https://www.example.com">Example 사이트로 이동</a>
2. src
<img>, <script>, <iframe> 요소에서 사용되며, 소스 파일의 URL을 지정합니다.
<img src="image.jpg" alt="설명 텍스트">
3. alt
<img> 요소에서 사용되며, 이미지가 표시되지 않을 때 대체 텍스트를 제공합니다.
<img src="image.jpg" alt="설명 텍스트">
4. title
요소에 마우스를 올렸을 때 표시되는 추가 정보를 제공합니다.
<p title="추가 정보">이것은 단락입니다.</p>
5. id
문서 내에서 요소를 고유하게 식별하는 속성입니다. CSS나 JavaScript에서 특정 요소를 선택할 때 사용됩니다.
<div id="header">헤더 영역</div>
6. class
여러 요소에 공통으로 적용할 수 있는 클래스를 지정합니다. CSS에서 스타일을 정의할 때 유용합니다.
<p class="text-bold">굵은 텍스트</p>
<p class="text-bold">또 다른 굵은 텍스트</p>
결론
HTML 요소와 속성은 웹 페이지를 구성하는 기본적인 단위입니다. 요소는 콘텐츠를 구조화하고, 속성은 요소에 추가적인 정보를 제공합니다. 이들을 잘 활용하면 보다 구조적이고 기능적인 웹 페이지를 만들 수 있습니다. HTML의 다양한 요소와 속성을 이해하고, 이를 통해 웹 개발의 기초를 다져보세요. 웹 개발의 세계가 더욱 흥미로워질 것입니다.