HTML 의 세계에 오신 것을 환영합니다! 인터넷에서 볼 수 있는 모든 웹 페이지는 기본적인 구조 위에 구축됩니다. 이 구조를 이해하는 것이 웹 개발의 첫 번째이자 가장 중요한 단계입니다.
이 실습에서는 HTML 문서의 기본 골격을 만드는 방법을 배우게 됩니다. 모든 HTML 페이지에 반드시 있어야 하는 필수 구성 요소를 다룰 것입니다.
<!DOCTYPE html> 선언<html> 요소<head> 요소<body> 요소이 실습이 끝나면 처음부터 완전하고 유효하며 간단한 HTML 페이지를 만들 수 있게 될 것입니다.
이 단계에서는 HTML 문서의 가장 첫 번째 부분인 DOCTYPE 선언을 추가합니다. 이 선언은 웹 브라우저에게 해당 페이지가 HTML5 로 작성되었음을 알려줍니다. 이는 표준적인 관행이며 브라우저가 페이지를 올바르게 렌더링하도록 보장합니다.
먼저 WebIDE 왼쪽의 파일 탐색기에서 index.html 파일을 찾습니다. 해당 파일을 클릭하여 편집기에서 엽니다.
현재 파일은 비어 있습니다. index.html 파일의 가장 상단에 다음 코드 줄을 추가합니다.
<!DOCTYPE html>
이제 index.html 파일은 다음과 같이 보일 것입니다.
<!DOCTYPE html>이 한 줄은 모든 현대 웹 페이지의 시작점입니다.
이 단계에서는 <html> 요소를 추가합니다. 이 요소는 페이지의 다른 모든 HTML 요소 ( <!DOCTYPE> 선언 제외) 에 대한 루트 컨테이너입니다.
또한 여는 <html> 태그 안에 lang 속성을 포함하는 것이 좋습니다. 이 속성은 문서 콘텐츠의 언어를 지정하며, 검색 엔진과 스크린 리더에 도움이 됩니다. 영어의 경우 lang="en"을 사용합니다.
index.html 파일에서 <!DOCTYPE html> 선언 바로 뒤에 <html> 및 </html> 태그를 추가합니다.
<!DOCTYPE html>
<html lang="en"></html>웹페이지의 다른 모든 요소는 이 두 태그 사이에 들어갑니다.
이 단계에서는 <head> 요소를 추가합니다. <head> 섹션에는 문서의 제목, 문자 세트, 스타일, 스크립트와 같은 HTML 문서에 대한 메타데이터가 포함됩니다. 이 정보는 웹 페이지 자체에 표시되지 않지만 브라우저에서 사용됩니다.
초보자에게 가장 중요한 메타데이터는 <title> 태그입니다. <title> 태그 안의 텍스트는 브라우저 탭이나 창의 제목 표시줄에 나타나는 내용입니다.
<html> 요소 안에 <head> 섹션을 추가합니다. <head> 섹션 안에 "My First Web Page"라는 텍스트를 가진 <title> 태그를 추가합니다.
index.html 파일을 다음과 같이 업데이트합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First Web Page</title>
</head>
</html>이 단계에서는 <body> 요소를 추가합니다. 이곳에는 제목, 단락, 이미지, 링크 등 웹 페이지의 모든 시각적 콘텐츠가 들어갑니다. <body> 요소는 <head> 요소 뒤에, 하지만 여전히 <html> 요소 안에 배치되어야 합니다.
브라우저에서 보이도록 페이지에 메인 제목을 추가해 보겠습니다. "Heading 1"을 의미하는 <h1> 태그를 사용하겠습니다.
index.html 파일에 <body> 섹션을 추가합니다. <body> 안에 "Hello, World!"라는 텍스트를 가진 <h1> 요소를 추가합니다.
이제 완성된 index.html 파일은 다음과 같이 보일 것입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>이것은 완전하고 유효한 HTML 문서 구조입니다.
이 단계에서는 방금 만든 웹 페이지를 볼 것입니다. WebIDE 는 변경 사항을 자동으로 저장하므로 파일을 수동으로 저장할 필요가 없습니다.
간단한 웹 서버가 이미 백그라운드에서 실행 중입니다. 페이지를 보려면 LabEx 인터페이스에서 올바른 탭을 열기만 하면 됩니다.
화면 왼쪽 상단, "Terminal" 탭 옆에 있는 Web 8080 탭을 클릭합니다.
Web 8080 탭으로 전환하면 웹 페이지가 표시됩니다. 다음과 같이 표시될 것입니다.
이것이 보이지 않으면 이전 단계로 돌아가서 index.html 코드가 예제와 정확히 일치하는지 확인하십시오.
축하합니다! 첫 번째 유효한 HTML 문서를 성공적으로 만들었습니다. 모든 웹 페이지의 골격을 이루는 기본적인 구성 요소를 배웠습니다.
이 실습에서는 다음을 배웠습니다.
<!DOCTYPE html>: 문서를 HTML5 로 정의하는 선언입니다.<html>: 페이지의 모든 콘텐츠를 감싸는 루트 요소입니다.<head>: 페이지 자체에는 보이지 않는 페이지 제목과 같은 메타데이터를 담는 컨테이너입니다.<title>: 브라우저 탭의 제목을 설정하는 태그입니다.<body>: 제목 및 단락과 같은 모든 시각적 콘텐츠를 담는 컨테이너입니다.이 기본 구조는 향후 모든 웹 프로젝트를 구축할 기반이 됩니다.
