# 문서 구조 HTML 문서의 기본적인 뼈대를 이루는 문서 구조 태그에 대해 자세히 알아보겠습니다. 이 태그들은 웹 페이지의 내용을 논리적으로 구분하고, 브라우저에게 문서의 구조를 알려주는 중요한 역할을 합니다. ```html HTML 문서 구조 예시

제목입니다

이것은 단락입니다.

``` * ``: HTML 문서의 유형을 선언하는 부분으로, 항상 문서의 맨 처음에 위치해야 합니다. ## html HTML 문서 전체를 감싸는 최상위 태그입니다. 문서가 HTML 문서임을 선언하는 역할을 합니다. ```html ``` * lang 속성: `` 태그에 lang 속성을 추가하여 문서의 언어를 지정할 수 있습니다. (예: lang="ko") ## head 문서의 메타데이터를 포함하는 부분입니다. 문서의 제목, 스타일 시트 연결, 스크립트 연결 등이 이곳에 들어갑니다. 실제로 보이는 부분은 아니지만, 검색 엔진이나 브라우저에게 중요한 정보를 제공합니다. ```html HTML 문서 예시 ``` ## title `` 태그 안에 위치하며, 브라우저의 탭이나 검색 결과에 표시되는 문서의 제목을 설정합니다. ## meta 문서에 대한 추가적인 정보를 제공하는 태그입니다. 문서의 인코딩, 설명, 키워드 등을 설정할 수 있습니다. ```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 ``` ## base `` 태그는 HTML 문서 내에서 모든 상대적인 URL의 기본 경로를 설정하는 데 사용됩니다. 즉, `` 태그를 이용하면 문서 내의 모든 링크가 지정된 기본 경로를 기준으로 해석됩니다. HTML 문서 내에 `` 태그는 한 번만 사용해야 하며, 반드시 ` `태그 안에 위치해야 합니다. ```html ``` * href 속성: 기본 경로를 지정하는 필수 속성입니다. 절대 URL 또는 상대 URL을 사용할 수 있습니다. ## link `` 태그는 HTML 문서 내에서 현재 문서와 외부 리소스 간의 관계를 정의하는 데 사용됩니다. 즉, 외부 스타일 시트, 아이콘, RSS 피드 등 다양한 종류의 외부 파일을 연결하는 역할을 합니다. ```html ``` * rel 속성: 링크의 관계를 나타내는 필수 속성입니다. (예: stylesheet, icon, alternate 등) * href 속성: 연결할 리소스의 URL을 지정하는 필수 속성입니다. * type: 리소스의 MIME 타입을 지정합니다. * media: 특정 미디어에만 적용할 스타일 시트를 지정합니다. * sizes: 아이콘의 크기를 지정합니다. ## body 실제로 웹 페이지에 보이는 모든 내용이 들어가는 부분입니다. 텍스트, 이미지, 링크 등 웹 페이지의 모든 콘텐츠는 `` 태그 안에 위치합니다. ```html

제목입니다

이것은 단락입니다.

``` ## style HTML 문서의 스타일을 정의하는 데 사용되는 태그입니다. CSS(Cascading Style Sheets)를 직접 작성하여 웹 페이지의 디자인을 제어할 수 있습니다. ```html ``` `` 태그 안에 위치하는 것이 일반적입니다. `` 태그 안에 위치할 수도 있지만, `` 태그 안에 위치하는 것이 권장됩니다. ## script JavaScript 코드를 포함하여 웹 페이지에 동적인 기능을 추가하는 데 사용되는 태그입니다. 클릭 이벤트, 페이지 로딩 시 실행되는 기능 등 다양한 동작을 구현할 수 있습니다. ```html ``` `` 태그 안 또는 `` 태그 안에 위치할 수 있습니다. `` 태그 안에 위치하면 페이지 로딩 시 스크립트가 실행되고, `` 태그 안에 위치하면 페이지의 다른 콘텐츠가 모두 로드된 후에 스크립트가 실행됩니다. ## noscript 자바스크립트를 지원하지 않는 브라우저나 자바스크립트가 비활성화된 경우에 표시될 콘텐츠를 정의하는 태그입니다. ```html ``` `` 태그 안에 위치하는 것이 일반적입니다.