웹 페이지의 뼈대를 만드는 HTML 기본 태그들을 알아보자!
집을 지을 때 뼈대가 중요하듯, 웹 페이지를 만들 때도 기본 구조를 잡는 것이 중요합니다. 🏠 HTML에서 <html>, <head>, <body> 태그는 웹 페이지의 뼈대를 이루는 가장 기본적인 태그들입니다. 이 태그들이 어떤 역할을 하는지 자세히 알아볼까요? 🤔
1. <!DOCTYPE html>: 웹 페이지의 유형을 선언합니다 📢
'<!DOCTYPE html>은 웹 페이지가 HTML5 문서임을 브라우저에게 알려주는 선언문입니다. 이 선언문은 HTML 문서의 맨 첫 줄에 위치해야 하며, 브라우저가 문서를 올바르게 해석하고 표시하는 데 도움을 줍니다.
'<!DOCTYPE html>
2. <html>: HTML 문서의 시작과 끝을 알립니다 🎬
'<html> 태그는 HTML 문서의 루트 요소입니다. 모든 HTML 요소는 '<html> 태그 안에 포함되어야 합니다.
'<!DOCTYPE html>
'<html>
'</html>
3. <head>: 웹 페이지에 대한 정보를 담습니다 ℹ️
'<head> 태그는 웹 페이지에 대한 메타 정보를 담고 있습니다. 이 정보는 브라우저에 표시되지 않지만, 웹 페이지의 제목, 문자 인코딩, 외부 스타일시트 연결 등에 사용됩니다.
'<!DOCTYPE html>
'<html>
'<head>
'<title>나의 첫 웹 페이지</title>
'<meta charset="UTF-8">
'</head>
'</html>
<title>: 웹 페이지의 제목을 지정합니다. 브라우저 탭에 표시됩니다.<meta charset="UTF-8">: 웹 페이지의 문자 인코딩을 UTF-8로 설정합니다. 한글을 포함한 다양한 문자를 표시할 수 있도록 합니다.
4. <body>: 웹 페이지의 내용을 담습니다 📄
<body> 태그는 웹 페이지에 표시되는 모든 내용을 담고 있습니다. 텍스트, 이미지, 링크, 멀티미디어 등 사용자가 보는 모든 콘텐츠는 <body> 태그 안에 작성됩니다.
<!DOCTYPE html>
<html>
<head>
<title>나의 첫 웹 페이지</title>
<meta charset="UTF-8">
</head>
<body>
<h1>환영합니다!</h1>
<p>저의 첫 웹 페이지입니다.</p>
</body>
</html>
실제 연습! 👨💻
위 코드를 복사하여 텍스트 편집기에 붙여넣고, .html 확장자로 저장해 보세요. (예: index.html)
그리고 웹 브라우저에서 해당 파일을 열어보세요. "환영합니다!"라는 제목과 "저의 첫 웹 페이지입니다."라는 단락이 표시될 것입니다.🎉
HTML 기본 태그들을 이해하고, 직접 웹 페이지를 만들어 보세요! 🚀
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
댓글 없음:
댓글 쓰기