HTML
HTML(HyperText Markup Language)는 웹 페이지를 만들기 위한 기본적인 마크업 언어입니다.
이 언어를 사용하여 문서의 구조와 콘텐츠를 정의할 수 있습니다.
웹 문서를 구성하는 요소
HTML 문서는 여러 개의 요소(Element)들로 구성되며, 각 요소는 특정한 역할을 담당합니다.
대표적인 예로는 <body>, <h1>, <p> 등이 있으며, 이들은 각각 문서의 본문, 제목, 단락을 의미합니다.
<body> 요소와 <h1> 요소, 그리고 <p> 요소
HTML 문서는 여러 요소들이 계층적으로 구성되어 있습니다.
그 중 <body> 요소는 웹 브라우저에 실제로 표시되는 콘텐츠를 담는 영역입니다.
이 <body> 태그 안에는 다양한 자식 요소들이 들어갈 수 있습니다.
예시를 들어보자면,
이 코드에서 <body>는 부모 요소, 그 안의 <h1>과 <p>는 자식 요소입니다.
이처럼 HTML 요소는 서로 포함되면서 구조를 형성합니다.
여는 태그와 닫는 태그
HTML 요소는 일반적으로 여는 태그와 닫는 태그로 구성됩니다.
예를 들어 <h1>은 여는 태그이고, </h1>은 닫는 태그입니다.
이 둘 사이에는 텍스트 콘텐츠가 들어가거나, 또 다른 자식 요소가 포함될 수 있습니다.
따라서 HTML 문서는 여는 태그로 시작해서 닫는 태그로 끝나는 구조를 반복하며,
각 요소는 웹 페이지 내에서 고유한 역할을 하게 됩니다.
HTML 기본 구조 설명
다음은 HTML 문서의 기본적인 구성 요소들에 대한 설명입니다:
<!DOCTYPE html>: 이 문서가 HTML5로 작성되었음을 선언합니다.<html lang="en">: HTML 문서의 시작을 나타내며, 여기서lang속성은 문서의 언어를 지정합니다.<head>: 문서에 대한 메타 정보를 담고 있습니다. 예를 들면 문자 인코딩, 뷰포트 설정, 제목 등이 있습니다.<meta charset="UTF-8">: 문서의 문자 인코딩을 UTF-8로 설정합니다.<meta name="viewport" content="width=device-width, initial-scale=1.0">: 모바일 기기에서 적절한 뷰포트를 설정합니다.<title>: 문서의 제목을 정의합니다. 이 제목은 브라우저 탭에 표시됩니다.<body>: 실제 콘텐츠가 들어가는 부분으로, 텍스트, 이미지, 링크 등을 포함할 수 있습니다.<h1>,<p>등은 각각 제목과 단락을 나타내는 태그입니다.
HTML은 이러한 태그들을 사용하여 문서의 구조를 형성하며, 각 태그는 고유한 의미를 가지고 있습니다.
실습
- 설치해둔 VSCode에디터를 엽니다.
- CLI과제를 진행하며 만들어 두웠던 beginner-track 폴더 내부에 beginner.html 파일을 만듭니다.
<h1>요소를 사용해서 문서의 제목을 작성합니다. 제목은 ’오늘의 할 일‘<h1>요소를 만든 제목을 하이퍼링크로 변경합니다.
<h1><a href=“주소/”>제목</a></h1>- 순서가 없는 list를 4개 만들고 각 list를 아래 조건에 맞게 작성하세요.
<p>를 사용하면 일반 문단처럼 출력되고
<Li>를 사용하면 동그라미가 붙은 리스트 형태로 출력된다.
1.HTML 예습하기
2.MDN 사이트 접속하기
3.w3school 사이트 접속하기
4.실습 도전하기
안녕하세요.