====== HTML : 월드와이드웹의 핵심 마크업 언어 ====== HTML (HyperText Markup Language)은 월드 와이드 웹(World Wide Web)의 핵심 마크업 언어로, 웹 페이지의 구조와 콘텐츠를 정의하는 데 사용됩니다. 이 문서는 HTML의 기본 개념부터 고급 기능까지, 웹 개발의 필수 요소인 HTML에 대해 종합적으로 설명합니다. HTML은 웹 브라우저가 콘텐츠를 올바르게 해석하고 표시할 수 있도록 표준화된 방법을 제공하며, CSS(스타일) 및 JavaScript(상호작용)와 함께 웹의 3대 핵심 기술 중 하나입니다. ===== 1. HTML이란 무엇인가? ===== HTML은 웹 페이지의 뼈대를 구성하는 언어입니다. ''HyperText''는 문서 간의 연결(링크)을 의미하며, ''Markup Language''는 텍스트를 태그를 사용하여 구조화하고 의미를 부여하는 언어를 뜻합니다. HTML은 프로그래밍 언어가 아니며, 웹 브라우저가 텍스트, 이미지, 비디오, 링크 등 다양한 웹 콘텐츠를 어떻게 배치하고 보여줄지 지시하는 역할을 합니다. ---- ==== 1) HTML의 목적 ==== HTML의 주된 목적은 웹 문서의 구조를 정의하고, 브라우저가 해당 구조에 따라 콘텐츠를 렌더링하도록 지시하는 것입니다. 예를 들어, 어떤 텍스트가 제목인지, 어떤 것이 단락인지, 이미지가 어디에 위치해야 하는지 등을 HTML 태그를 통해 명시합니다. ---- ==== 2) HTML의 기능 ==== HTML은 다음과 같은 주요 기능을 제공합니다: * **콘텐츠 구조화**: 제목, 단락, 목록, 테이블 등 웹 페이지의 내용을 논리적으로 구성합니다. * **미디어 포함**: 이미지, 오디오, 비디오와 같은 멀티미디어 요소를 웹 페이지에 삽입합니다. * **하이퍼링크 생성**: 다른 웹 페이지나 문서 내 특정 위치로 이동할 수 있는 링크를 만듭니다. * **폼 요소 제공**: 사용자로부터 입력을 받을 수 있는 텍스트 필드, 버튼, 체크박스 등 폼 요소를 생성합니다. ===== 2. HTML의 핵심 개념 ===== HTML 문서는 여러 핵심 구성 요소로 이루어져 있으며, 이를 이해하는 것이 중요합니다. ---- ==== 1) 요소(Elements) ==== HTML 요소는 웹 페이지의 구성 요소를 나타냅니다. 대부분의 HTML 요소는 시작 태그, 내용, 그리고 종료 태그로 구성됩니다. * **시작 태그**: 요소의 시작을 알립니다. 예: ''

'' * **내용**: 요소가 포함하는 실제 텍스트나 다른 요소들입니다. 예: ''이것은 단락입니다.'' * **종료 태그**: 요소의 끝을 알립니다. 시작 태그와 비슷하지만 앞에 슬래시(''/'')가 붙습니다. 예: ''

'' 예시:

이것은 단락 요소입니다.

---- ==== 2) 태그(Tags) ==== 태그는 꺾쇠괄호(''%%<''>%%'') 안에 요소 이름을 넣어 표현합니다. 태그는 크게 두 가지 종류가 있습니다: * **쌍을 이루는 태그 (Paired Tags)**: 시작 태그와 종료 태그가 모두 존재합니다. 예: ''

'', '''' * **단일 태그 (Self-closing Tags)**: 내용이 없거나 종료 태그가 필요 없는 태그입니다. 예: '''', ''
'', ''

'' ---- ==== 3) 속성(Attributes) ==== 속성은 HTML 요소에 추가 정보를 제공합니다. 속성은 항상 시작 태그 안에 ''이름="값"'' 형식으로 정의됩니다. * ''href'': 앵커(링크) 태그('''')에서 링크의 목적지 URL을 지정합니다. * ''src'': 이미지 태그('''')에서 이미지 파일의 경로를 지정합니다. * ''alt'': 이미지 태그('''')에서 이미지를 표시할 수 없을 때 대체 텍스트를 제공하여 접근성을 높입니다. * ''class'' / ''id'': 요소를 식별하거나 CSS 스타일을 적용하는 데 사용됩니다. 예시: DokuWiki 공식 웹사이트 예시 이미지

===== 3. HTML 문서의 기본 구조 ===== 모든 HTML 문서는 웹 브라우저가 올바르게 해석할 수 있도록 특정 구조를 따릅니다. ---- ==== 1) DOCTYPE 선언 ==== HTML 문서의 가장 첫 줄에는 항상 '''' 선언이 있어야 합니다. 이는 브라우저에게 문서가 HTML5 표준을 따르는 HTML 문서임을 알려주는 역할을 합니다. ---- ==== 2) HTML 루트 요소 ==== '''' 태그는 HTML 문서의 모든 내용을 포함하는 최상위(루트) 요소입니다. ''lang'' 속성을 사용하여 문서의 기본 언어를 지정하는 것이 권장됩니다 (예: ''''). ---- ==== 3) HEAD 섹션 ==== '''' 태그는 웹 페이지에 대한 메타데이터(데이터에 대한 데이터)를 포함합니다. 이 섹션의 내용은 웹 브라우저에 직접 표시되지 않지만, 문서의 설정, 제목, 스타일 시트 링크, 스크립트 등을 정의합니다. * '''': 브라우저 탭이나 창에 표시될 문서의 제목을 정의합니다. * ''<meta>'': 문서의 메타데이터를 정의합니다 (예: 문자 인코딩, 뷰포트 설정, 검색 엔진 키워드). * ''<link>'': 외부 스타일 시트(CSS) 파일을 연결합니다. * ''<script>'': JavaScript 코드를 포함하거나 외부 JavaScript 파일을 연결합니다. ---- ==== 4) BODY 섹션 ==== ''<body>'' 태그는 웹 페이지에 실제로 표시될 모든 콘텐츠를 포함합니다. 제목, 단락, 이미지, 링크, 목록, 테이블 등 사용자가 볼 수 있는 모든 요소는 이 ''<body>'' 태그 안에 위치해야 합니다. 예시: <file> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>나의 첫 DokuWiki HTML 문서

환영합니다!

이것은 DokuWiki에서 작성된 HTML 문서의 예시입니다.

===== 4. 자주 사용되는 HTML 태그 ===== HTML은 웹 콘텐츠를 구조화하기 위한 다양한 태그를 제공합니다. 다음은 가장 일반적으로 사용되는 몇 가지 태그입니다. ---- ==== 1) 텍스트 관련 태그 ==== * **제목 태그**: ''

''부터 ''

''까지 있으며, ''

''이 가장 중요하고 ''

''이 가장 덜 중요합니다.
가장 큰 제목

중간 크기 제목

가장 작은 제목
* 단락 태그: ''
'' 태그는 텍스트 단락을 정의합니다.
이것은 일반적인 텍스트 단락입니다.
* 텍스트 서식 태그: * '''': 중요한 텍스트를 나타내며, 일반적으로 굵게 표시됩니다. * '''': 강조된 텍스트를 나타내며, 일반적으로 //기울임꼴//로 표시됩니다. * ''
'': 강제 줄 바꿈을 삽입합니다. * ''
'': 주제별 구분을 나타내는 수평선을 그립니다. ---- ==== 2) 링크와 이미지 ==== * 링크 태그: '''' (''anchor'') 태그는 다른 웹 페이지나 문서 내 섹션으로 이동하는 하이퍼링크를 만듭니다. ''href'' 속성으로 목적지를 지정합니다. Google로 이동 문서 내 섹션 2로 이동 * 이미지 태그: '''' 태그는 웹 페이지에 이미지를 삽입합니다. ''src'' 속성으로 이미지 파일의 경로를 지정하고, ''alt'' 속성으로 대체 텍스트를 제공합니다. ---- ==== 3) 목록 ==== * 순서 없는 목록 (Unordered List): ''
'' 태그로 정의하며, 각 항목은 ''
'' (list item) 태그로 표시됩니다. 일반적으로 글머리 기호로 표시됩니다.

항목 1

항목 2

항목 3

* 순서 있는 목록 (Ordered List): ''
'' 태그로 정의하며, 각 항목은 ''
'' 태그로 표시됩니다. 일반적으로 숫자나 알파벳으로 순서가 매겨집니다.

첫 번째 항목

두 번째 항목

세 번째 항목

---- ==== 4) 테이블 ==== '''' 태그는 행과 열로 데이터를 정리하여 표시합니다. * '''': 테이블의 헤더 부분을 정의합니다. * '''': 테이블의 본문 내용을 정의합니다. * '''': 테이블 행(table row)을 정의합니다. * ''
'': 테이블 헤더 셀(table header)을 정의합니다. * '' '': 테이블 데이터 셀(table data)을 정의합니다. 예시:

이름 나이 직업

김철수 30 개발자

이영희 25 디자이너

위 HTML 코드는 DokuWiki에서 다음과 같이 렌더링될 수 있습니다: ^ 이름 ^ 나이 ^ 직업 ^ | 김철수 | 30 | 개발자 | | 이영희 | 25 | 디자이너 | ---- ==== 5) 폼 ==== ''
'' 태그는 사용자 입력을 위한 폼을 생성하는 데 사용됩니다. * '''': 다양한 유형의 입력 필드(텍스트, 비밀번호, 버튼, 체크박스 등)를 만듭니다. ''type'' 속성으로 종류를 지정합니다. * '''': 여러 줄의 텍스트 입력을 위한 영역을 만듭니다. * ''<button>'': 클릭 가능한 버튼을 만듭니다. * ''<label>'': 폼 컨트롤에 대한 설명을 제공합니다. 예시: <file> <form action="/submit-form" method="post"> <label for="username">사용자 이름:</label><br> <input type="text" id="username" name="username"><br><br> <label for="password">비밀번호:</label><br> <input type="password" id="password" name="password"><br><br> <input type="submit" value="제출"> </form> </file> ===== 5. HTML과 CSS, JavaScript의 관계 ===== 현대 웹 개발에서 HTML은 단독으로 사용되지 않고, CSS와 JavaScript와 긴밀하게 협력하여 기능적인 웹 페이지를 만듭니다. * HTML (구조): 웹 페이지의 내용과 논리적인 구조를 정의합니다. "무엇이 있는가?"를 담당합니다. * CSS (스타일): HTML 요소의 시각적인 표현(색상, 글꼴, 레이아웃 등)을 담당합니다. "어떻게 보이는가?"를 담당합니다. * JavaScript (동작): 웹 페이지에 동적인 기능과 상호작용을 추가합니다. "무엇을 하는가?"를 담당합니다. 세 가지 기술은 웹을 구성하는 핵심 기둥이며, 각각의 역할을 명확히 구분하여 웹 페이지를 개발하는 것이 효율적입니다. ===== 6. HTML의 장점 ===== HTML은 웹 개발에서 보편적으로 사용되는 만큼 여러 가지 강력한 장점을 가지고 있습니다. ---- ==== 1) 보편성 및 표준화 ==== HTML은 전 세계적으로 웹 문서의 표준으로 인정받고 있으며, 모든 웹 브라우저가 HTML을 이해하고 렌더링할 수 있습니다. 이는 웹 콘텐츠가 어떤 기기나 브라우저에서든 일관되게 표시될 수 있도록 보장합니다. ---- ==== 2) 검색 엔진 최적화 (SEO) ==== HTML은 검색 엔진이 웹 페이지의 내용을 이해하고 색인화하는 데 중요한 역할을 합니다. 의미론적인 HTML 태그(예: ''<header>'', ''<article>'', ''<footer>'')를 사용하면 검색 엔진이 콘텐츠의 중요성을 더 잘 파악하여 검색 순위를 높이는 데 도움이 됩니다. ---- ==== 3) 접근성 (Accessibility) ==== 올바르게 구조화된 HTML은 스크린 리더와 같은 보조 기술이 웹 페이지의 내용을 해석하고 시각 장애인이나 다른 장애를 가진 사용자에게 정보를 전달하는 데 필수적입니다. ''alt'' 속성, ''label'' 태그 등은 웹 접근성을 향상시키는 데 기여합니다. ===== 7. HTML의 발전 (HTML5) ===== HTML은 지속적으로 발전해 왔으며, 2014년에 공식적으로 권고된 HTML5는 웹 개발에 혁신적인 변화를 가져왔습니다. ---- ==== 1) 새로운 의미론적 태그 ==== HTML5는 웹 페이지의 구조를 더 명확하게 정의할 수 있는 새로운 의미론적 태그를 도입했습니다. * ''<header>'': 문서나 섹션의 머리글을 정의합니다. * ''<nav>'': 탐색 링크를 포함하는 섹션을 정의합니다. * ''<article>'': 독립적이고 자체 포함된 콘텐츠를 정의합니다. * ''<section>'': 문서의 독립적인 섹션을 정의합니다. * ''<aside>'': 문서의 주 콘텐츠와 간접적으로 관련된 콘텐츠를 정의합니다. * ''<footer>'': 문서나 섹션의 바닥글을 정의합니다. ---- ==== 2) 멀티미디어 지원 강화 ==== 이전에는 플러그인(예: Flash)이 필요했던 멀티미디어 콘텐츠를 HTML5는 네이티브로 지원합니다. * ''<audio>'': 오디오 콘텐츠를 삽입합니다. * ''<video>'': 비디오 콘텐츠를 삽입합니다. ---- ==== 3) 새로운 API 및 기능 ==== HTML5는 웹 애플리케이션 개발을 위한 다양한 새로운 API(Application Programming Interface)를 제공합니다. * Canvas API: JavaScript를 사용하여 2D 그래픽을 그릴 수 있습니다. * Geolocation API: 사용자의 지리적 위치 정보를 얻을 수 있습니다. * Web Storage API: 브라우저에 데이터를 로컬로 저장할 수 있습니다 (로컬 스토리지, 세션 스토리지). * Drag and Drop API: HTML 요소를 드래그 앤 드롭할 수 있는 기능을 제공합니다. === 결론 === HTML은 웹의 근간을 이루는 마크업 언어로, 웹 페이지의 구조와 콘텐츠를 정의하는 데 필수적인 역할을 합니다. 간단한 텍스트부터 복잡한 웹 애플리케이션에 이르기까지, 모든 웹 콘텐츠는 HTML을 기반으로 구축됩니다. CSS와 JavaScript와 함께 HTML은 현대 웹의 상호작용적이고 시각적으로 풍부한 경험을 가능하게 하는 핵심 기술입니다. 지속적인 발전(HTML5 및 이후 버전들)을 통해 HTML은 더욱 강력하고 유연한 웹 개발 환경을 제공하며, 앞으로도 웹의 미래를 이끌어 나갈 것입니다.