이 카테고리는 국비지원 과정으로 [계룡건설] 빅데이터 기반 GreenTech SW개발자 과정에서 학습하는 내용을 정리하는 공간입니다.
🌐 HTML 필수 개념과 추가 정리
📌 HTML 속성 (Attributes)
- HTML 태그에는 속성을 통해 추가적인 정보를 제공할 수 있다.
- 속성은 시작 태그에만 사용하며, 속성명="속성값" 형태로 작성한다.
✅ 주요 HTML 속성
- id: 요소의 고유 식별자. 페이지 내에서 단 하나만 존재해야 한다.
- class: 요소의 그룹 식별자. 여러 요소에서 동일하게 사용할 수 있다.
- style: 인라인으로 CSS 스타일을 지정.
- title: 요소에 대한 추가 정보를 툴팁으로 제공.
- alt: 이미지가 표시되지 않을 때 대체 텍스트 제공. (접근성과 SEO에 매우 중요)
- href: 링크의 목적지 URL 지정.
- src: 이미지, 오디오, 비디오 등의 소스 파일 경로 지정.
- target: 링크 열기 방식 지정(_blank: 새 탭에서 열기).
- rel: 링크와 현재 문서의 관계를 지정.
🔗 HTML 엔티티 (Entities)
- HTML에서 특수 문자를 표시하기 위해 사용된다.
- <, >, &, " 등은 그대로 사용할 수 없기 때문에 엔티티 코드로 대체해야 한다.
✅ 자주 사용하는 HTML 엔티티
- < → < (less than)
- > → > (greater than)
- & → & (ampersand)
- " → " (double quote)
- ' → ' (single quote)
- → 공백 (non-breaking space)
🧑🎨 HTML 주석 (Comments)
- HTML 코드에서 브라우저에 출력되지 않는 설명을 추가할 때 사용한다.
✅ 구문: <!-- 주석 내용 --> - 여러 줄 주석이나 임시로 코드를 비활성화할 때 유용하다.
🏷️ HTML 문서에서의 경로 지정
- HTML에서 파일 경로를 지정할 때 절대 경로와 상대 경로를 이해하는 것이 중요하다.
✅ 상대 경로 (Relative Path)
- 현재 문서를 기준으로 파일 위치를 지정한다.
- ./images/pic.jpg → 현재 디렉토리의 images 폴더에 있는 파일
- ../images/pic.jpg → 상위 디렉토리에서 images 폴더에 있는 파일
✅ 절대 경로 (Absolute Path)
- 웹사이트의 루트를 기준으로 파일 경로를 지정한다.
- /images/pic.jpg → 웹사이트의 최상위 디렉토리에서 images 폴더에 있는 파일
🏗️ HTML 문서의 필수 메타 태그
- HTML 문서의 <head>에 반드시 포함해야 할 중요한 메타 태그들.
✅ 기본 메타 태그 예시
<meta charset="UTF-8"> <!-- 문서의 문자 인코딩 지정 (UTF-8 권장) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 반응형 웹 구현 -->
<meta name="description" content="웹 페이지의 요약 내용"> <!-- SEO에 중요 -->
<meta name="keywords" content="HTML, CSS, JavaScript"> <!-- 검색 엔진 키워드 -->
<meta name="author" content="작성자 이름">
🎯 HTML5에서 추가된 주요 태그
✅ 시멘틱 태그
- 웹페이지의 의미를 명확하게 나타내기 위해 HTML5에서 추가된 태그들이다.
- 검색 엔진 최적화(SEO)와 접근성 향상에 매우 중요하다.
<header> <!-- 페이지의 머리글 -->
<nav> <!-- 내비게이션 메뉴 -->
<section> <!-- 콘텐츠의 장(섹션) -->
<article> <!-- 독립적으로 의미를 가지는 콘텐츠 -->
<aside> <!-- 보조 콘텐츠 (사이드바) -->
<footer> <!-- 페이지의 바닥글 -->
✅ 폼 관련 태그 (HTML5 확장)
- HTML5에서는 사용자 입력을 보다 쉽고 효율적으로 받기 위해 새로운 입력 타입이 추가되었다.
<input type="email"> <!-- 이메일 형식 -->
<input type="url"> <!-- URL 형식 -->
<input type="tel"> <!-- 전화번호 형식 -->
<input type="date"> <!-- 날짜 선택 -->
<input type="color"> <!-- 색상 선택 -->
<input type="range"> <!-- 슬라이더 입력 -->
🎬 HTML 미디어 태그
✅ 오디오 삽입
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
브라우저가 오디오 태그를 지원하지 않습니다.
</audio>
✅ 비디오 삽입
<video controls width="600">
<source src="video.mp4" type="video/mp4">
브라우저가 비디오 태그를 지원하지 않습니다.
</video>
📲 HTML SEO 최적화 요소
✅ h1 ~ h6 태그 활용
- 검색 엔진이 페이지의 주요 내용을 파악하기 위해 사용한다.
- 한 페이지에 <h1> 태그는 한 번만 사용하는 것이 좋다.
✅ meta description
- 검색 엔진 결과에서 표시되는 페이지 요약.
<meta name="description" content="이 페이지는 HTML에 대한 기본 개념을 정리한 페이지입니다.">
✅ Open Graph 메타 태그 (SNS 공유 최적화)
<meta property="og:title" content="HTML 기초 정리">
<meta property="og:description" content="HTML의 주요 개념과 태그들을 깔끔하게 정리했습니다.">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">🧑💻 HTML 베스트 프랙티스
✅ HTML 코드 작성 규칙
- 들여쓰기를 사용해 HTML 구조를 명확하게 한다.
- 속성 값은 반드시 큰따옴표(")로 감싼다.
- 태그를 중첩할 때 닫는 태그를 빠뜨리지 않는다.
- CSS와 JavaScript는 외부 파일로 분리하여 HTML 문서를 깔끔하게 유지한다.
✅ HTML 유효성 검사
- HTML 코드의 오류를 확인하기 위해 W3C HTML Validator를 사용한다.
'국비지원교육 > [계룡건설] 빅데이터 기반 GreenTech SW개발자' 카테고리의 다른 글
| **[계룡건설] GreenTech SW개발자 - CSS 학습 노트 .1** (0) | 2025.02.17 |
|---|---|
| **[계룡건설] GreenTech SW개발자 - HTML 학습 노트 .3** (0) | 2025.02.17 |
| **[계룡건설] GreenTech SW개발자 - HTML 학습 노트 .1** (0) | 2025.02.16 |
| **[계룡건설] GreenTech SW개발자 - JAVA 학습 노트 .5** (0) | 2025.02.07 |
| **[계룡건설] GreenTech SW개발자 - JAVA 학습 노트 .4** (0) | 2025.02.04 |