국비지원교육/[계룡건설] 빅데이터 기반 GreenTech SW개발자

**[계룡건설] GreenTech SW개발자 - HTML 학습 노트 .1**

알뜰한대학생 2025. 2. 16. 23:21

이 카테고리는 국비지원 과정으로 [계룡건설] 빅데이터 기반 GreenTech SW개발자 과정에서 학습하는 내용을 정리하는 공간입니다.

 

1. 기본 HTML 구조

  • <!DOCTYPE html>: HTML5 문서임을 알리는 지시어. 태그가 아님.
  • <html>: HTML 문서의 루트 요소.
  • <head>: 문서의 메타 정보(제목, 문자셋, 스타일 등)를 담는 영역.
  • <body>: 웹 페이지의 실제 내용을 담는 본문 영역.
  • <title>: 브라우저의 제목 표시줄에 표시되는 웹 페이지의 제목을 설정.

2. 텍스트 관련 태그

  • <h1> ~ <h6>: 제목을 설정하는 태그, <h1>은 가장 큰 제목, <h6>는 가장 작은 제목.
  • <p>: 단락을 구분하는 태그, 본문 문단을 생성.
  • <strong>: 중요한 내용을 강조하는 태그(기본적으로 볼드체로 표시).
  • <em>: 강조된 내용을 표시하는 태그(기본적으로 이탤릭체로 표시).
  • <i>: 이탤릭체로 표시.
  • <b>: 볼드체로 표시.
  • <del>: 삭제된 텍스트를 표시.
  • <ins>: 삽입된 텍스트를 표시.
  • <mark>: 하이라이트된 텍스트를 표시.
  • <br>: 줄 바꿈을 생성하는 태그.

3. 구획 및 레이아웃 관련 태그

  • <div>: 블록 레벨의 구획을 생성하는 태그, 여러 요소들을 그룹화할 때 사용.
  • <span>: 인라인 요소로, 텍스트의 일부분에 스타일을 적용할 때 사용.

4. 리스트 관련 태그

  • <ul>: 순서 없는 리스트.
  • <ol>: 순서 있는 리스트.
  • <li>: 리스트 항목.
  • <dl>: 정의 리스트.
  • <dt>: 용어를 정의하는 태그.
  • <dd>: 용어의 정의를 제공하는 태그.

5. 테이블 관련 태그

  • <table>: 테이블을 생성하는 태그.
  • <caption>: 테이블의 제목을 설정.
  • <thead>: 테이블의 헤더 셀 그룹.
  • <tbody>: 테이블의 본문 셀 그룹.
  • <tfoot>: 테이블의 푸터 셀 그룹.
  • <tr>: 테이블의 행을 정의.
  • <th>: 테이블의 제목 셀.
  • <td>: 테이블의 데이터 셀.

6. 하이퍼링크 관련 태그

  • <a>: 하이퍼링크를 생성하는 태그. href 속성에 연결할 URL을 지정.
  • <iframe>: 다른 HTML 페이지를 현재 페이지 내에서 내장된 창으로 표시.

7. 미디어 관련 태그

  • <audio>: 오디오 파일을 삽입할 때 사용.
  • <video>: 비디오 파일을 삽입할 때 사용.
  • <source>: 오디오나 비디오 파일의 여러 포맷을 지정.
  • <embed>: 외부 플러그인이나 비규격 미디어 형식을 삽입할 때 사용.

8. 메타데이터

  • <meta>: 문서에 대한 메타 데이터를 제공. 문자 인코딩, 저자 정보 등을 포함.
  • <img>: 이미지 파일을 삽입하는 태그. src 속성에 이미지 파일의 경로를 설정.

9. 시멘틱 HTML

  • <header>: 페이지의 머리말(상단) 부분.
  • <section>: 페이지의 섹션을 나누는 태그.
  • <article>: 독립적이고 의미 있는 콘텐츠를 포함하는 태그.
  • <footer>: 페이지의 바닥글(하단) 부분.
  • <aside>: 페이지의 부수적인 콘텐츠를 포함하는 태그(광고 등).
  • <nav>: 네비게이션 링크들을 그룹화하는 태그.

10. 폼 관련 태그

  • <form>: 사용자 입력을 받는 폼을 정의.
  • <input>: 다양한 입력 필드를 정의하는 태그.
  • <textarea>: 여러 줄의 텍스트 입력을 받는 필드를 정의.
  • <select>: 드롭다운 목록을 만들 때 사용.
  • <button>: 클릭 가능한 버튼을 생성.

11. 기타 중요한 개념

  • 속성: HTML 태그에 부가적인 정보를 제공하는 부분. 예: href, src, alt, class, id 등.
  • 시멘틱 구조: 검색 엔진 최적화(SEO)나 접근성 개선을 위해 의미를 담은 태그를 사용하는 방식. 예: <header>, <footer>, <section> 등.