사이트를 만드는 html을 처음 공부할 때, 처음엔 무슨 내용인지 모르고 따라 쓰는 경우가 많은 HTML 기초 요소들에대해 설명 드리려합니다.
아래는 제시된 HTML 코드에서 등장하는 모든 요소(태그, 속성)들과
그 원래 단어(풀 네임) 및 역할에 대해 상세하게 설명한 내용입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" initial-scale="1.0" />
<link rel="stylesheet" href="***.css">
<script defer src="***.js"></script>
</head>
<body>
<본문내용입력>
</body>
</html>
1. <!DOCTYPE html>
선언하는 부분입니다.
현재 이 페이지가 어떤 HTML의 어떤 버전의 표준을 따라고 있는지 브라우저에게 알려주는 부분이라고 보시면 됩니다.
- 원래 단어: Document Type Declaration (도큐먼트 타입 선언)
- 역할: 브라우저에게 현재 문서가 HTML5 표준을 따르고 있음을 알려줍니다.
예전 HTML(HTML4, XHTML 등) 문서들과 구분하기 위해 사용하는 선언입니다.
이를 통해 브라우저가 HTML5 모드로 문서를 올바르게 해석하도록 돕습니다.
2. <html lang=”ko”>
언어를 선언하는 부분입니다.
우리가 매일 사용하는 구글과 같은 검색엔진에서도 이런 언어선언을 하고 있습니다.
- 원래 단어: HyperText Markup Language
- 역할: HTML 문서의 루트(root) 요소입니다. 페이지 전체의 HTML 코드를 감싸는 최상위 태그입니다.
- 속성
lang="ko":- lang는 “language”(언어)의 축약입니다.
- 현재 문서의 기본 언어가 한국어(ko)임을 명시해 줍니다.
- 검색 엔진이나 스크린 리더 등에서 이 정보를 활용합니다.
3. <head> … </head>
본문내용외 다른 사항 즉 제목, 외부참고파일 등을 알려야할 때 쓰는 부분이라고 보시면 됩니다.
- 원래 단어: Head Element
- 역할: 브라우저나 검색 엔진을 위해 문서의 메타데이터, 설정, 외부 연동 정보 등을 포함합니다.
문서의 제목(<title>), 스타일시트(<link>) 정보, 스크립트(<script>) 정보 등을 배치합니다.
사용자에게 직접 화면에 표시되는 영역은 아니지만, 웹 페이지 동작과 최적화에 매우 중요합니다.
4. <meta charset=”UTF-8″>
- 원래 단어: Metadata Element
- 역할: 문서에 대한 메타 정보를 제공하는 태그입니다.
charset="UTF-8"- charset은 “character set”(문자 인코딩 방식)의 축약입니다.
- UTF-8은 “UCS(Universal Character Set) Transformation Format – 8-bit”의 축약으로, 전 세계 대부분의 언어를 표현할 수 있는 유니코드 기반 문자 인코딩 방식입니다.
- 이를 통해 브라우저가 문서 안의 문자를 제대로 해석하고, 한글을 포함한 여러 국가의 문자가 올바르게 표시됩니다.
5. <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
컴퓨터가 아닌 다른기기에서 볼때 페이지의 초기 크기를 설정해 주는 것입니다.
width=device-width가 적용되더라도, 이미 PC 브라우저는 뷰포트(브라우저 창의 너비)와 문서의 너비를 동일하게 잡기 때문에
일반 데스크톱 환경에서는 크게 체감할 만한 변화가 없습니다. 스마트폰이나 탭 등에서 활용하기위해 작성된 문구입니다.
- 원래 단어: Metadata Element (뷰포트 관련 메타데이터)
- 역할:
- 모바일 기기나 작은 화면에서 페이지를 어떻게 표시할지를 지정합니다.
name="viewport"는 이 메타 태그가 브라우저의 뷰포트(Viewport)를 설정한다는 의미입니다.content="width=device-width, initial-scale=1.0":- width=device-width: 디바이스(스마트폰, 태블릿 등)의 실제 화면 너비를 기준으로 레이아웃을 표시합니다.
- initial-scale=1.0: 초기 확대/축소 비율을 1.0으로 설정합니다(즉, 브라우저가 기본 비율로 페이지를 표시).
브라우저가 웹 페이지를 처음 표시할 때, 배율(확대/축소)을 1.0(기본 100%)로 설정하라”는 의미이죠.
6. <link rel=”stylesheet” href=”***.css”>
CSS파일을 연결하는 링크입니다. CSS는 html 파일 즉 웹페이지를 꾸며주는 역할을 하는 파일이기 때문에 필수적으로 삽입이 되어야합니다.
- 원래 단어: Link Element
- 역할: 외부 리소스(주로 CSS 파일)와 HTML 문서를 연결할 때 사용합니다.
- 속성 분석:
rel="stylesheet"- rel는 “relationship”(관계)의 축약입니다.
- HTML 문서와 연결된 파일이 스타일시트임을 나타냅니다.
href="***.css"href는 HTML에서 하이퍼링크 참조(Hyperlink Reference)를 나타내는 속성입니다- 연결할 외부 CSS 파일의 경로를 지정합니다.
- CSS 파일을 연결할 때
href속성을 사용합니다.- (
<link rel="stylesheet" href="***.css">형태)
- (
src는 스크립트나 이미지 등에 사용됩니다.
7. <script defer src=”***.js”></script>
자바스크립트와 연결하는 문구입니다.
- 원래 단어: Script Element
- 역할: JavaScript 코드를 HTML 문서에 삽입하거나 외부 스크립트 파일을 불러올 때 사용합니다.
- 속성 분석:
defer- defer는 “연기하다, 지연시키다”라는 의미입니다.
- HTML 해석이 끝난 뒤에 스크립트를 실행하라는 뜻입니다.
- 즉, 문서 파싱이 끝나기 전에는 스크립트 실행을 지연시켜, 렌더링을 방해하지 않도록 합니다.
src="***.js"- src는 “source”의 축약입니다.
- 불러올 외부 JavaScript 파일의 경로를 지정합니다.
8. <body> … </body>
본격적인 본문의 내용이 들어가는 공간입니다.
우리가 웹페이지에서 보는 모든 내용이 들어가는 공간이죠.
- 원래 단어: Body Element
- 역할: 실제 사용자가 화면에서 확인하고 상호 작용할 수 있는 컨텐츠(텍스트, 이미지, 버튼 등)가 들어가는 영역입니다.
- 웹 브라우저에 표시되는 모든 요소들은
body태그 안에 들어가게 됩니다.
정리
<!DOCTYPE html>: HTML5 문서임을 알리는 선언.<html lang="ko">: 문서 최상위 요소이며,lang속성으로 문서의 기본 언어를 지정.<head>: 문서의 메타데이터나 설정, 스타일, 스크립트 등 표시되지 않는 정보를 담는 공간.<meta charset="UTF-8">: 문서 인코딩 방식을 UTF-8로 설정하여 다국어(한글 포함)를 정상 표시.<meta name="viewport" content="width=device-width, initial-scale=1.0">: 모바일 화면 최적화를 위한 뷰포트 설정.<link rel="stylesheet" href="alert.css">: 외부 CSS 파일(스타일시트) 연결(일반적으로href사용)<script defer src="alert.js"></script>: JavaScript 외부 파일 연결,defer로 문서 파싱 끝난 후 스크립트 실행.<body>: 실제 화면에 표시될 콘텐츠를 포함하는 영역.
이와 같이, 각 요소와 속성에는 명확한 원래 단어와 그 의미, 역할이 있습니다. 코드를 작성할 때는 이러한 속성과 태그들이 어떤 목적을 위해 존재하는지 이해하고 사용하시면, 더 읽기 좋고 유지보수하기 쉬운 HTML 문서를 만들 수 있습니다.
