반응형
Visual Studio Code 편집 중인 HTML 문서의 기본 골격
이 문서에는 간단한 HTML 마크업이 있으며, 기본적인 웹 페이지 구조를 가지고 있습니다.
HTML 문서 구성
<!DOCTYPE html>: 문서 유형 선언으로, 이 HTML 문서가 HTML5 버전임을 나타냅니다.<html lang="ko">: HTML 문서의 시작을 나타내며,lang속성으로 페이지의 주 언어가 한국어임을 선언합니다.<head>: 웹 페이지의 메타데이터를 포함하는 부분으로, 여기에는 문자 인코딩, 뷰포트 설정, 웹 페이지 제목 등이 포함됩니다.<meta charset="UTF-8">: 문자 인코딩을 UTF-8로 설정합니다.<meta http-equiv="X-UA-Compatible" content="IE=edge">: 호환성을 위해 지정되며, IE 브라우저가 최신 모드로 문서를 렌더링 하도록 지시합니다.<meta name="viewport" content="width=device-width, initial-scale=1.0">: 반응형 웹 디자인을 위한 뷰포트 설정입니다.<title>My First Web Page!</title>: 웹 페이지의 제목을 지정합니다.
<body>: 웹 페이지의 내용을 포함하는 부분입니다.<!-- 웹 페이지에 표시될 내용 -->: 주석으로, 페이지에는 표시되지 않지만 개발자가 코드에 대한 메모를 남길 수 있습니다.<p style="...">나의 첫 번째 웹 페이지</p>: 문단(<p>) 요소를 생성하고,style속성을 사용하여 인라인 CSS 스타일을 적용합니다. 여기에는 텍스트의 왼쪽 테두리와 아래쪽 테두리에 대한 스타일이 지정되어 있으며, 텍스트는 굵게(bold) 표시되고, 어느 정도의 패딩이 적용됩니다.
이 문서는 HTML 기초 학습을 위한 예시 문서입니다. '나의 첫 번째 웹 페이지'라는 문구를 스타일링하여 표시하고 있습니다. 인라인 스타일에 의해 테두리에 장식을 보탰습니다.
반응형
'온라인 멘토와 함께하는 공부 > HTML' 카테고리의 다른 글
| [HTML] Chrome의 '페이지 소스 보기'와 '검사'의 차이 (26) | 2024.02.17 |
|---|---|
| [HTML] 제목이나 주제를 나타내는, Hn 태그 (22) | 2024.02.15 |
| [VSCode] Visual Studio Code (26) | 2024.02.14 |
| [SVG] 원 그리기 (70) | 2024.01.28 |
| [CSS] font-style 속성에서 italic과 oblique (58) | 2024.01.20 |
