요소

HTML 요소는 태그, 속성, 내용으로 구성되며, 각 요소의 역할과 용도를 정확히 이해해야 효율적인 코딩이 가능하다.

 

HTML 요소의 기본 구조

HTML 요소는 다음과 같은 구조로 작성된다

<태그 속성="값">내용</태그>

 

• 시작 태그: <태그>로 표시되며 요소의 시작을 나타냄.
• 내용: 태그 사이에 들어가는 텍스트, 다른 태그, 또는 아무것도 없는 빈 내용.
• 종료 태그: </태그>로 표시되며 요소의 끝을 나타냄.
• 예제:

<p>Hello, world!</p>

 

 

빈 요소 (Self-closing Elements)

• 일부 태그는 닫는 태그 없이도 유효하며, 내용이 없는 요소.
• 예제:

<img src="image.jpg" alt="Example image" />
<input type="text" />

 

 

HTML 속성 (Attributes)

속성은 태그에 추가적인 정보를 제공하며 시작 태그 내에 작성된다.

속성의 기본 형식

<태그 속성1="값1" 속성2="값2">내용</태그>

 

• 속성 이름: 소문자 사용 권장.
• 속성 값: 큰따옴표로 묶어서 작성. (값이 없는 속성도 있음, 예: checked)

 

공통 속성

1. id: 문서 내에서 요소를 고유하게 식별

<div id="main"></div>

 

2. class: 요소를 그룹화하여 스타일 지정이나 스크립트에서 사용.

<p class="highlight">This is important text.</p>

3. style: 요소의 인라인 스타일 지정.

<h1 style="color: red;">Hello!</h1>

 

4. title: 마우스를 올렸을 때 나타나는 설명.

<a href="#" title="Go to homepage">Home</a>

 

 

HTML 요소의 종류

HTML 요소는 블록 레벨과 인라인 요소로 나뉜다.

블록 레벨 요소

• 화면에서 새로운 줄에 시작하며, 가로 공간을 모두 차지.
• 주로 레이아웃과 구조를 구성.
• 예제: <div>, <p>, <h1> ~ <h6>, <section>, <article>, <footer>, <header>.

<div>
  <h1>제목</h1>
  <p>본문 내용</p>
</div>

 

인라인 요소

 

• 텍스트와 같은 줄에 배치되며, 컨텐츠 크기만큼 공간을 차지.
• 주로 텍스트 스타일링이나 링크에 사용.
• 예제: <span>, <a>, <strong>, <em>.

<p>이 문장은 <strong>굵게</strong> 표시됩니다.</p>

 

 

 

중첩 요소 (Nesting Elements)

HTML 요소는 다른 요소 안에 중첩될 수 있다.

올바른 중첩

<div>
  <p>This is a paragraph with <strong>bold text</strong>.</p>
</div>

잘못된 중첩

<p>This is a <div>paragraph</div>.</p> <!-- 오류 발생 가능 -->

 

 

주요 HTML 요소

텍스트 관련 요소

• 제목: <h1> ~ <h6> (중요도 순으로 크기 감소).
• 문단: <p>.
• 줄바꿈: <br />.
• 강조: <strong>, <em>.

 

멀티미디어 관련 요소

• 이미지: <img src="이미지 경로" alt="대체 텍스트">.
• 비디오: <video src="비디오 경로" controls>대체 콘텐츠</video>.
• 오디오: <audio src="오디오 경로" controls>대체 콘텐츠</audio>.

 

링크 및 네비게이션

• 링크: <a href="URL">링크 텍스트</a>.
• 목록:
  • 순서 있는 목록: <ol> + <li>.
  • 순서 없는 목록: <ul> + <li>.

 

테이블 요소

• <table>, <tr>, <td>, <th> 등으로 구성.

 

폼 관련 요소

• 입력: <input> (type, name, value 속성 등으로 세부 설정).
• 버튼: <button> 또는 <input type="submit">.

 

 

HTML 요소의 작성 원칙

1. 올바른 중첩(Nesting): 태그는 올바르게 열고 닫아야 함.
2. 시맨틱 HTML 사용: 의미 있는 태그 사용으로 접근성과 SEO 개선.
3. 속성 값의 명확한 정의: 속성값은 항상 큰따옴표로 감싸기.