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

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

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

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

 

🌐 HTML 필수 개념과 추가 정리

📌 HTML 속성 (Attributes)

  • HTML 태그에는 속성을 통해 추가적인 정보를 제공할 수 있다.
  • 속성은 시작 태그에만 사용하며, 속성명="속성값" 형태로 작성한다.

✅ 주요 HTML 속성

  • id: 요소의 고유 식별자. 페이지 내에서 단 하나만 존재해야 한다.
  • class: 요소의 그룹 식별자. 여러 요소에서 동일하게 사용할 수 있다.
  • style: 인라인으로 CSS 스타일을 지정.
  • title: 요소에 대한 추가 정보를 툴팁으로 제공.
  • alt: 이미지가 표시되지 않을 때 대체 텍스트 제공. (접근성과 SEO에 매우 중요)
  • href: 링크의 목적지 URL 지정.
  • src: 이미지, 오디오, 비디오 등의 소스 파일 경로 지정.
  • target: 링크 열기 방식 지정(_blank: 새 탭에서 열기).
  • rel: 링크와 현재 문서의 관계를 지정.

🔗 HTML 엔티티 (Entities)

  • HTML에서 특수 문자를 표시하기 위해 사용된다.
  • <, >, &, " 등은 그대로 사용할 수 없기 때문에 엔티티 코드로 대체해야 한다.

✅ 자주 사용하는 HTML 엔티티

  • &lt; → < (less than)
  • &gt; → > (greater than)
  • &amp; → & (ampersand)
  • &quot; → " (double quote)
  • &apos; → ' (single quote)
  • &nbsp; → 공백 (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 유효성 검사