HTML 요소(Elements)

HTML 요소(Element)는 웹페이지의 구성 요소로, HTML 내용과 의미를 설명하는 태그(Tag)로 구성되어 있습니다.

HTML 요소는 대부분 시작 태그와 종료 태그, 그리고 그 사이의 내용으로 구성됩니다.

복사
<시작태그>HTML 요소 내용</종료태그>

복사
<p>안녕하세요!</p>

1. <h1> ~ <h6>: 제목 요소

   h1부터 h6까지 수준별로 문서의 제목과 부제목을 나타냅니다. <h1>이 가장 중요한 제목이며, <h6>이 가장 낮은 수준의 제목입니다.

   제목을 나타내는 h 요소

   복사
   <h1>대제목</h1>
   <h2>소제목</h2>
   <h3>하위 제목</h3>

2. <p> ~ </p>: 문단 요소

   텍스트의 문단을 나타냅니다. 책에 텍스트로 기록된 문단과 같습니다.

   단락을 나타내는 p 요소

   복사
   <p>HTML 단락(Paragraph) 태그</p>

3. <a> ~ </a>: 링크 요소

   앵커(anchor)의 약자로, 다른 웹사이트나 동일 웹페이지 내 다른 섹션으로 이동하는 링크를 생성합니다.

   링크를 나타내는 a 요소

   복사
   <a href="https://www.example.com">방문하기</a>

4. <img />: 이미지 요소

   웹페이지에 이미지를 삽입합니다. img 태그는 종료 태그 없이 <img />로 사용합니다.

   이미지를 나타내는 img 요소

   복사
   <img src="이미지경로.jpg" alt="사진 설명" />

5. <ul>, <ol> <li>: 목록 요소

   <ul>은 순서가 없는 목록을, <ol>은 번호가 매겨지는 목록을 나타냅니다. <li>는 각 목록의 항목을 표시합니다.

복사
<ul>
  <li>사과</li>
  <li>당근</li>
  <li>바나나</li>
</ul>

복사
<ol>
  <li>오전에 할 일</li>
  <li>오후에 할 일</li>
  <li>자기 전에 할 일</li>
</ol>

HTML 요소들은 위계에 따라 부모(Parent)와 자식(Child) 관계를 갖습니다.

부모 요소는 다른 HTML 요소들을 포함하는 상위 요소입니다. 부모 HTML 요소에 포함된 하위 HTML 요소들을 '자식'이라고 합니다.

예시:

복사
<!-- 이 div는 부모 요소입니다. -->
<div>
  <!-- 이 p는 자식 요소입니다. -->
  <p>안녕하세요!</p>
</div>

위 예시에서 <div> 요소는 <p> 요소의 상위에 위치한 부모 요소입니다.

자식 요소는 부모 요소 내부에 위치한 요소를 의미합니다.

하나의 부모 요소는 여러 자식 요소를 가질 수 있으며, 그 자식 요소들도 자신의 자식 요소를 가질 수 있습니다.

예시:

복사
<ul>
  <!-- 이 ul는 부모 요소입니다. -->
  <li>사과</li>
  <!-- 이 li는 자식 요소입니다. -->
  <li>바나나</li>
  <!-- 이 li도 자식 요소입니다. -->
</ul>

위 예시에서 <li> 요소들은 <ul> 요소의 자식 요소입니다.

코드의 별표로 강조된 부분을 따라 입력해 보세요.