WEB-HTML-간단한 웹 문서 만들기
웹 첫 시작 간단한 웹 문서를 만들기
간단한 웹 문서 만들기
1. 새 파일 선택하기
다음 그림과 같이 첫 번째 아이콘을 선택하여 index.html의 이름을 가진 새 파일을 만든다.
index.html 파일은 브라우저가 우선적으로 해당 파일을 연다.
2. HTML 코드를 입력하기
! + tab 키를 통해 다음과 같이 코드가 자동완성 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>Hello world!!</div>
</body>
</html>
여기서 구조를 잘 살펴보면 <head>
태그 부분은 문서의 “정보” 를 나타내는 범위로 제목, 설명, 위치 스타일 등 눈에 보이지 않는 정보를 나타낸다. <body>
태그 부분은 문서의 “구조” 를 나타내는 범위로 눈에 보이는 정보를 나타낸다.
<head>
태그 안 <title>
태그는 HTML 문서의 제목 을 정의한다. (웹 브라우저 탭에 표시되는 부분)
<title>Document</title>
<body>
태그 안에 <div>
태그의 Hello World!! 를 작성하였는데 이 부분이 화면에 출력되는 부분이다.
<div>Hello world!!</div>
출처
- (고경희, ⌜Do it! HTML+CSS+자바스크립트 웹 표준의 정석⌟, 이지스퍼블리싱, 2021)을 학습하고 개인 학습용으로 정리한 내용입니다.