HTML - 잠깐, 작성한 코드를 직접 보는 방법

컴퓨터/HTML&CSS

728x90
반응형

※ 주의 !

이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다. 

문제가 있다면 말씀 부탁 드리겠습니다


안녕하세요 Gon입니다.

 

tag들을 설명하다보니 급 추가 설명이 필요할 것 같아 글을 쓰게 됩니다.

 

이 글에서는 웹페이지를 만들기위해서 어떤 곳에 코드를 쓰며, 어떻게 볼 것인가에 대하여 알아보도록 하겠습니다.

 

HTML 코드는 어디에 적어야 되는가 ?

사실 웹페이지를 만들기위해 정말 수 많은 도움을 주는 프로그램이 존재합니다.

 

구글에 Html editor rank 라고 검색하면 다음과 같은 결과를 얻을 수 있습니다.

 

검색결과처럼 많은 편집기들이 존재하며, 그 중 마음에 맞는 것 하나를 사용하시면 됩니다. 편집기를 설치하기 싫다 하시면 대부분이 사용하는 윈도우 운영체제의 메모장을 이용하셔도 무방합니다.

어떤 편집기든 HTML에서 원하는 문법에 맞춰 작성하고 확장자명을 .html로 만들어 주시면 됩니다.

 

다만, 편리하게 사용하라고 만든 편집기를 저 같은 초보들은 사용하는 것이 좋을 것 같습니다. 

 

저같은 경우에는 Rank 1위를 차지한 Atom 편집기를 이용하고 있습니다.

 

 

작성한 코드를 구현 시켜 봅시다.

자, 어떤 편집기를 사용하셨든 저를 포함한 여러분들은 이제 html 코드를 작성하고 완성하였을 것 입니다. 이 html 코드는 내가 만들 웹페이지를 구성하는 내용들이 적혀있지만 사용자에게 보여 줄 내용과는 차이가 있을 것 입니다.

그럼 이제, 사용자가 보는 것과 동일하게 구현을 해 봅시다.

 

방법은 아주 간단합니다.

 

  • 웹브라우저를 실행 시킨다 (인터넷익스플로러,크롬,Edge 등등)

  • 웹브라우저가 활성화 된 상태에서 Ctrl + O 를 누른다 (대부분 동작 할 것입니다)

  • 내가 만든 html 코드를 찾아 실행 시킨다.

그럼 하단의 코드를 한번 실행 시켜 보겠습니다.

 

<!doctype html>
<html>
  <head>
    <title>Gon의 블로그입니다</title>
  </head>
  <body>
  	Gon의 블로그입니다.
    사용자가 볼때는 이렇게 보입니다.
  </body>
</html>
​

 

 

1. 웹브라우저 실행

2. Ctrl + O (파일열기) 실행 후 만든 html 파일 열기 

3. 실제 만든 웹페이지 감상하기

이번 글에서는 실제 작성한 html 코드를 웹브라우저를 통하여 보는 방법에 대하여 알아봤습니다.

 

보시는 것처럼 html코드와 웹브라우저를 통하여 보는 내용은 상당한 차이가 있습니다.

 

이제 부터는 다시 tag들을 배워가며 웹페이지를 만드는 기술들을 향상 시켜 보도록 합시다.

 

감사합니다.

 

Gon

728x90
반응형

'컴퓨터 > HTML&CSS' 카테고리의 다른 글

HTML - div tag  (0) 2020.11.30
HTML-meta tag  (0) 2020.11.27
HTML-title  (0) 2020.11.25
HTML - Tag Rank  (0) 2020.11.24
HTML-구조를 지정해주는 tag head body  (0) 2020.11.23

Commnet

G91개발일지

Gon91(지구일)

91년생 공학엔지니어의 개발일지

TODAY :

YESTER DAY :

TOTAL :