HTML (HyperText Markup Language)
HTML은 웹 페이지의 구조를 만드는 마크업 언어입니다. 요소(element)로 웹 컨텐츠를 브라우저가 어떻게 보여줄지 정의하며, 제목, 문단, 이미지, 링크 등 다양한 구성 요소를 포함합니다.
- 기본 문법: HTML은
<태그>내용</태그>형태로 사용하며,<p>,<a>,<img>,<table>등의 태그가 대표적입니다. - 크로스 브라우징: 다양한 브라우저에서도 동일한 구조를 유지하도록 설계됩니다.
HTML 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>문서 제목</title>
</head>
<body>
<h1>이것은 제목입니다</h1>
<p>이것은 문단입니다.</p>
</body>
</html>
HTML 개념 단어
- 태그(Tag)
HTML 문서의 기본 구성 요소로, 특정 컨텐츠의 역할이나 기능을 정의합니다. 태그는 열림 태그(<tag>)와 닫힘 태그(</tag>)로 구성되며, 열림 태그와 닫힘 태그 사이에 컨텐츠가 들어갑니다.- 예시:
<h1>제목</h1>,<p>문단</p>
- 예시:
- 요소(Element)
태그와 그 안에 포함된 컨텐츠를 통틀어 요소라 부릅니다. HTML 요소는 특정 의미와 기능을 부여하여 웹 페이지의 구조를 정의합니다.<h1>제목</h1>전체가 하나의 요소입니다.
- 속성(Attribute)
HTML 요소에 추가적인 정보를 제공하며, 속성은 항상 열림 태그 내에 작성됩니다. 속성에는 이름과 값이 있으며, 이름과 값은name="value"형태로 지정됩니다.- 예시:
<img src="image.jpg" alt="이미지 설명"> src는 이미지 파일의 경로,alt는 이미지 설명을 나타내는 속성입니다.
- 예시:
- 시맨틱 태그(Semantic Tag)
태그의 의미를 명확히 하여 웹 페이지 구조를 보다 이해하기 쉽게 만드는 태그입니다. 컴색 엔진 최적화(SEO)와 접근성 향상에 도움이 됩니다.- 예시:
<header>,<footer>,<article>,<section>
- 예시:
- DOCTYOE 선언
HTML5 문서임을 명시하는 선언문으로, 문서의 최상단에 위치하며 브라우저에게 HRML5 문서를 렌더링할 것을 알려줍니다.- 예시:
<DOCTYPE html>
- 예시:
- 주석(Comment)
HTML 코드 내에 메모를 작성하는 방법으로, 브라우저에 표시되지 않고 코드 설명에 주로 사용됩니다.- 예시:
<!-- 이것은 주석입니다 -->
- 예시:
- 블록 요소 (Block-level Element)
항상 새로운 줄에서 시작하며, 화면 전체 너비를 차지하는 요소입니다. 주요 레이아웃 구성에 사용됩니다.- 예시:
<div>,<p>,<h1>,<seciton>
- 예시:
- 인라인 요소 (Inline Element)
컨텐츠와 함께 줄을 차지하며, 블록 요소처럼 새로운 줄에서 시작하지 않는 요소입니다. 텍스트의 일부에 스타일이나 기능을 추가할 때 주로 사용합니다.- 예시:
<span>,<a>,<strong>,<img>
- 예시:
참고문서
- MDN 웹 문서 (Mozilla Developer Network)
- MDN HTML 문서 (한글) - Mozilla에서 제공하는 HTML 관련 종합 문서입니다. HTML의 기본 구조와 요소, 속성 등 HTML5의 모든 기능을 다루고 있으며 예제와 설명이 자세히 나와 있습니다. 한글로 제공되어 있어 이해하기 쉽습니다.
- HTML 공식 스펙 문서 (WHATWG)
- HTML Living Standard - HTML의 최신 표준 문서로, 웹 개발자라면 참고할 필요가 있는 자료입니다. 이 문서는 영어로 제공되지만 최신 HTML 표준을 이해하고 싶은 개발자에게 매우 유용합니다.
- 생활코딩
- 생활코딩 HTML 강의 - 생활코딩은 웹 개발을 처음 시작하는 사람들에게 매우 친숙한 교육 사이트입니다. HTML을 포함한 웹 개발의 기초 강의를 제공하며, 영상과 실습 예제, 추가 설명이 풍부하게 포함되어 있어 입문자에게 적합합니다
