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)을 학습하고 개인 학습용으로 정리한 내용입니다.

© 2021. All rights reserved.

Powered by __YJ__