본문으로 건너뛰기

HTML 요소(Elements)

HTML 요소(Elements)

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


기본 구조

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

HTML 요소 기본 구조
<시작태그>HTML 요소 내용</종료태그>

요소 사용 예시

단락을 나타내는 p 요소
<p>안녕하세요!</p>

주요 HTML 요소

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

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

    제목을 나타내는 h 요소
    <h1>대제목</h1>
    <h2>소제목</h2>
    <h3>하위 제목</h3>

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

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

    단락을 나타내는 p 요소
    <p>HTML 단락(Paragraph) 태그</p>

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

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

    링크를 나타내는 a 요소
    <a href="https://www.example.com">방문하기</a>

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

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

    이미지를 나타내는 img 요소
    <img src="이미지경로.jpg" alt="사진 설명" />

  1. <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) 관계를 갖습니다.


부모 요소 (Parent Element)

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

예시:

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

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


자식 요소 (Child Element)

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

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

예시:

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

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


실습

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