2025-01-24T01:44:03

2025-01-24 01:44:03 +09:00
parent 297ea8abaf
commit 3d30ee3192
68 changed files with 1128 additions and 1079 deletions
--- a/doc/html5/01_문서_구조.md
+++ b/doc/html5/01_문서_구조.md
@@ -0,0 +1,144 @@
+# 문서 구조
+HTML 문서의 기본적인 뼈대를 이루는 문서 구조 태그에 대해 자세히 알아보겠습니다. 이 태그들은 웹 페이지의 내용을 논리적으로 구분하고, 브라우저에게 문서의 구조를 알려주는 중요한 역할을 합니다.
+
+```html
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <title>HTML 문서 구조 예시</title>
+</head>
+<body>
+  <h1>제목입니다</h1>
+  <p>이것은 단락입니다.</p>
+</body>
+</html>
+```
+
+* `<!DOCTYPE html>`: HTML 문서의 유형을 선언하는 부분으로, 항상 문서의 맨 처음에 위치해야 합니다.
+
+
+## html
+HTML 문서 전체를 감싸는 최상위 태그입니다. 문서가 HTML 문서임을 선언하는 역할을 합니다.
+```html
+<html>
+</html>
+```
+* lang 속성: `<html>` 태그에 lang 속성을 추가하여 문서의 언어를 지정할 수 있습니다. (예: lang="ko")
+
+## head
+문서의 메타데이터를 포함하는 부분입니다. 문서의 제목, 스타일 시트 연결, 스크립트 연결 등이 이곳에 들어갑니다. 실제로 보이는 부분은 아니지만, 검색 엔진이나 브라우저에게 중요한 정보를 제공합니다.
+```html
+<head>
+  <title>HTML 문서 예시</title>
+  <meta charset="UTF-8">
+</head>
+```
+
+## title
+`<head>` 태그 안에 위치하며, 브라우저의 탭이나 검색 결과에 표시되는 문서의 제목을 설정합니다.
+
+## meta
+문서에 대한 추가적인 정보를 제공하는 태그입니다. 문서의 인코딩, 설명, 키워드 등을 설정할 수 있습니다.
+```html
+<meta charset="UTF-8"> <meta name="description" content="이 문서는 HTML 문서 구조에 대한 설명입니다.">
+```
+* charset: 문서의 문자 인코딩을 지정합니다. (예: UTF-8)
+* name: 추가적인 정보를 제공하기 위한 이름을 지정합니다.
+* content: name 속성에 해당하는 정보의 내용을 지정합니다.
+    - http-equiv: HTTP 헤더와 동일한 의미를 가지는 메타 태그를 정의합니다.
+    - X-UA-Compatible: IE 호환 모드 설정
+* refresh: 페이지 자동 새로 고침
+* expires: 캐시 유효 기간 설정
+* viewport: 모바일 기기에서 웹 페이지가 표시되는 방식을 제어합니다.
+    - width: viewport의 너비를 설정
+    - initial-scale: 초기 확대 비율 설정
+    - user-scalable: 사용자가 페이지를 확대/축소할 수 있는지 여부 설정
+* robots: 검색 엔진 크롤러에게 웹 페이지를 어떻게 처리할지 지시합니다. (index, noindex, follow, nofollow 등)
+* author: 문서의 저자를 지정합니다.
+* copyright: 저작권 정보를 지정합니다.
+* date: 문서의 생성 또는 수정 날짜를 지정합니다.
+
+```html
+<!-- 검색 엔진 최적화 (SEO) -->
+<meta name="description" content="웹 페이지에 대한 간략한 설명">
+<meta name="keywords" content="웹 페이지와 관련된 키워드">
+<!-- 소셜 미디어 공유 -->
+<meta property="og:title" content="페이스북 공유 시 표시되는 제목">
+<meta property="og:description" content="페이스북 공유 시 표시되는 설명">
+<meta property="og:image" content="페이스북 공유 시 표시되는 이미지 URL">
+<!-- 모바일 웹 -->
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<!-- 호환성 -->
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+```
+
+## base
+`<base>` 태그는 HTML 문서 내에서 모든 상대적인 URL의 기본 경로를 설정하는 데 사용됩니다. 즉, `<base>` 태그를 이용하면 문서 내의 모든 링크가 지정된 기본 경로를 기준으로 해석됩니다.
+HTML 문서 내에 `<base>` 태그는 한 번만 사용해야 하며, 반드시 `<head> `태그 안에 위치해야 합니다.
+```html
+<base href="https://example.com/images/" />
+```
+* href 속성: 기본 경로를 지정하는 필수 속성입니다. 절대 URL 또는 상대 URL을 사용할 수 있습니다.
+
+## link
+`<link>` 태그는 HTML 문서 내에서 현재 문서와 외부 리소스 간의 관계를 정의하는 데 사용됩니다. 즉, 외부 스타일 시트, 아이콘, RSS 피드 등 다양한 종류의 외부 파일을 연결하는 역할을 합니다.
+```html
+<!-- CSS 파일 연결 -->
+<link rel="stylesheet" href="styles.css">
+<!-- favicon 연결 -->
+<link rel="icon" href="favicon.ico">
+<!-- RSS 피드 연결 -->
+<link rel="alternate" type="application/rss+xml" title="RSS 피드" href="feed.xml">
+```
+* rel 속성: 링크의 관계를 나타내는 필수 속성입니다. (예: stylesheet, icon, alternate 등)
+* href 속성: 연결할 리소스의 URL을 지정하는 필수 속성입니다.
+* type: 리소스의 MIME 타입을 지정합니다.
+* media: 특정 미디어에만 적용할 스타일 시트를 지정합니다.
+* sizes: 아이콘의 크기를 지정합니다.
+
+## body
+실제로 웹 페이지에 보이는 모든 내용이 들어가는 부분입니다. 텍스트, 이미지, 링크 등 웹 페이지의 모든 콘텐츠는 `<body>` 태그 안에 위치합니다.
+```html
+<body>
+  <h1>제목입니다</h1>
+  <p>이것은 단락입니다.</p>
+</body>
+```
+
+## style
+HTML 문서의 스타일을 정의하는 데 사용되는 태그입니다. CSS(Cascading Style Sheets)를 직접 작성하여 웹 페이지의 디자인을 제어할 수 있습니다.
+```html
+<style>
+  /* CSS 스타일 정의 */
+  body {
+    background-color: lightblue;
+  }
+  h1 {
+    color: navy;
+  }
+</style>
+```
+`<head>` 태그 안에 위치하는 것이 일반적입니다.
+`<body>` 태그 안에 위치할 수도 있지만, `<head>` 태그 안에 위치하는 것이 권장됩니다.
+
+## script
+JavaScript 코드를 포함하여 웹 페이지에 동적인 기능을 추가하는 데 사용되는 태그입니다. 클릭 이벤트, 페이지 로딩 시 실행되는 기능 등 다양한 동작을 구현할 수 있습니다.
+```html
+<script>
+  // JavaScript 코드
+  alert("Hello, world!");
+</script>
+```
+`<head>` 태그 안 또는 `<body>` 태그 안에 위치할 수 있습니다.
+`<head>` 태그 안에 위치하면 페이지 로딩 시 스크립트가 실행되고, `<body>` 태그 안에 위치하면 페이지의 다른 콘텐츠가 모두 로드된 후에 스크립트가 실행됩니다.
+
+
+## noscript
+자바스크립트를 지원하지 않는 브라우저나 자바스크립트가 비활성화된 경우에 표시될 콘텐츠를 정의하는 태그입니다.
+```html
+<noscript>
+  자바스크립트가 지원되지 않습니다.
+</noscript>
+```
+`<body>` 태그 안에 위치하는 것이 일반적입니다.