<html>
<head> <!--페이지에 대한 기본적인 정보-->
<!-- 이건 주석이다-->
<meta charset= "utf-8"/> <!--문자 코드체계,utf-8 : 한글-->
<title>나의 첫 번째 타이틀</title>
</head>
<body> <!--실제적인 내용(화면에 표시하고 싶은 내용)-->
hello world
bye!
</body>
</html>html의 기초에 대해 알아보겠다.
1.1 <html></html>
<html>로 시작하고 </html>로 닫는다.
*vscode를 이용해서 실습을 진행하는 경우, html → tab 키 누르면 자동으로 <html></html> 생성해준다.
(html로 예시를 든 것뿐, head, body 등에도 적용된다)
(기본적인 설명은 코드블럭 안에 들어가 있으므로 생략 )
1.2 Open with live server
html 파일을 만들었다면, 실제로 내가 구현한 소스들이 동작되는지 보고싶을 것이다.
(vscode를 기준으로 설명하겠다)
확장에 들어가서 live server라고 검색해보자.
이게 제일 먼저 뜰 것이다. 설치해준다.
설치를 마친 뒤, 다시 탐색기로 돌아가보자. 그리고 html파일을 우클릭하자. 그러면 제일 먼저 Open with live server가 뜬다. 그러면 만들었던 파일이 크롬, edge 등에서 나타난다.
1.3 브라우저 정보 뜯어보기
나의 첫 번째 타이틀이나 hello world bye! 에 대한 설명은 더 안 해도 직관적으로 이해할 수 있을 것이다.
그런데
http://127.0.0.1:5500/HTML_CSS/1_Hello_world/hello.html
이건 뭘 나타내는 걸까?
하나하나 나누어서 알아보자.
127.0.0.1:5500
이건 IP주소이다. vscode에서 돌리는 웹 서버의 주소가 127.0.0.1이다. 이것은 자기 자신을 말한다.
5500은 포트를 말한다.
HTML_CSS/1_Hello_world/hello.html
탐색기에 나타나 있는 그대로 표현됐다. HTML_CSS폴더 안의 1_Hello_World폴더의 hello.html파일을 의미한다.
이로써 Hello_World를 실행해보면서 아주 기초적인 html을 배웠다.
'WEB > HTML & CSS' 카테고리의 다른 글
| 3_HTML 화면 구성 (2) (0) | 2021.09.07 |
|---|---|
| 3_HTML 화면 구성 (1) (0) | 2021.09.07 |
| 2_HTML 기초 (0) | 2021.09.07 |