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

2025. 2. 16. 23:21·국비지원교육/[계룡건설] 빅데이터 기반 GreenTech SW개발자
목차
  1. 1. 기본 HTML 구조
  2. 2. 텍스트 관련 태그
  3. 3. 구획 및 레이아웃 관련 태그
  4. 4. 리스트 관련 태그
  5. 5. 테이블 관련 태그
  6. 6. 하이퍼링크 관련 태그
  7. 7. 미디어 관련 태그
  8. 8. 메타데이터
  9. 9. 시멘틱 HTML
  10. 10. 폼 관련 태그
  11. 11. 기타 중요한 개념

이 카테고리는 국비지원 과정으로 [계룡건설] 빅데이터 기반 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> 등.

 

'국비지원교육 > [계룡건설] 빅데이터 기반 GreenTech SW개발자' 카테고리의 다른 글

**[계룡건설] GreenTech SW개발자 - CSS 학습 노트 .1**  (0) 2025.02.17
**[계룡건설] GreenTech SW개발자 - HTML 학습 노트 .3**  (0) 2025.02.17
**[계룡건설] GreenTech SW개발자 - HTML 학습 노트 .2**  (0) 2025.02.16
**[계룡건설] GreenTech SW개발자 - JAVA 학습 노트 .5**  (0) 2025.02.07
**[계룡건설] GreenTech SW개발자 - JAVA 학습 노트 .4**  (0) 2025.02.04
  1. 1. 기본 HTML 구조
  2. 2. 텍스트 관련 태그
  3. 3. 구획 및 레이아웃 관련 태그
  4. 4. 리스트 관련 태그
  5. 5. 테이블 관련 태그
  6. 6. 하이퍼링크 관련 태그
  7. 7. 미디어 관련 태그
  8. 8. 메타데이터
  9. 9. 시멘틱 HTML
  10. 10. 폼 관련 태그
  11. 11. 기타 중요한 개념
'국비지원교육/[계룡건설] 빅데이터 기반 GreenTech SW개발자' 카테고리의 다른 글
  • **[계룡건설] GreenTech SW개발자 - HTML 학습 노트 .3**
  • **[계룡건설] GreenTech SW개발자 - HTML 학습 노트 .2**
  • **[계룡건설] GreenTech SW개발자 - JAVA 학습 노트 .5**
  • **[계룡건설] GreenTech SW개발자 - JAVA 학습 노트 .4**
알뜰한대학생
알뜰한대학생
  • 알뜰한대학생
    ALT-LOG
    알뜰한대학생
  • 전체
    오늘
    어제
    • 분류 전체보기 (20)
      • TIL(Today I Learn) (0)
      • Coding Test (0)
        • programmers (0)
        • Baekjoon (0)
      • 국비지원교육 (14)
        • [계룡건설] 빅데이터 기반 GreenTech SW.. (13)
        • 관제시스템 GUI 구현을 통한 자바(JAVA)프로.. (1)
      • [혼공스]혼자 공부하는 자바 스크립트 (6)
        • 혼공학습단 숙제 (6)
      • 자격증 (0)
        • 정보처리기사 (0)
        • SQLD (0)
        • 빅데이터분석기사 (0)
        • 데이터분석준전문가 (0)
        • 웹디자인기능사 (0)
        • OCJP (0)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
알뜰한대학생
**[계룡건설] GreenTech SW개발자 - HTML 학습 노트 .1**
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.