HTML은 웹문서를 만들 때 사용되는 마크업 언어이다. 우리는 어떻게 HTML을 이용해서 웹문서, 즉 웹페이지를 만들 수 있을까? 먼저, HTML로 웹 문서를 편집하기 위해서는 HTML 코드를 작성하기 위한 툴이 필요하다. 이러한 툴에는 여러가지가 있는데, 우리가 만든 웹 문서를 코드가 아니라 실제 실행되는 화면을 눈으로 보려면 웹 브라우저가 필요하다.
HTML 코드를 작성하기 위한 툴
텍스트 편집기는 말그대로 텍스트를 입력하고 저장하는데 사용하는 도구로, 메모장이나 워드패드 등이 있다. 이 도구를 사용할 경우 따로 개발 도구를 설치할 필요가 없다는 장점이 있지만, 오류가 발생하기 쉬우며 태그를 일일이 알아야 한다는 단점이 존재한다.
웹 편집기는 웹을 편집하는데 쓰이는 전용 편집기라고 생각하면 된다. 예를 들면, 노트패드나 비주얼 스튜디오 코드 등이 있다. 코드의 태그 나 색상 등을 색으로 구분지어 표시해주며 코드의 시인성을 향상 시키고 자동완성의 기능도 있어 편리하다.
통합 개발 환경은 웹을 개발 할 때 HTML뿐만 아니라 PHP나 node.js 등 필요한 개발환경을 모두 제공해주는 도구이다. 예시로는 비주얼 스튜디오가 있다. 장점은 필요한 개발환경을 모두 제공 받을 수 있다는 것이고, 단점은 설치가 생각보다 복잡하다는 점이다.
웹 기반 편집기는 온라인 디버거로, 웹상에서 코드를 쓰고 실행이 가능한 도구이다. 따로 설치가 필요없어 간편하다는 장점이 있다.
HTML 코드를 실행 하기 위한 브라우저
크롬은 구글에서 만든 웹브라우저로 가장 많이 사용되는 브라우저이다.
인터넷 익스플로러는 마이크로소프트에서 제작한 웹브라우저이다. ActiveX, 보안 취약성 등등 여러가지 문제로 더이상 업데이트가 진행되고 있지 않으나 관공서나 등등 국내에서는 사용되는 사이트가 많다.
엣지는 마이크로소프트에서 인터넷 익스플로러를 대체하기 위해서 제작한 웹브라우저이다.
이외에도 파이어폭스나 사파리나 등등 많은 웹브라우저가 존재한다.
개발 환경 만들기
코드를 작성하기 위한 도구로는 편의 기능 등의 확장설치가 간편한 비주얼 스튜디오 코드를 사용할 예정이며, 코드를 실행하기 위한 브라우저로는 크롬을 사용할 예정이다.
비주얼 스튜디오 코드가 설치가 되어있지 않으신 분은 아래 글을 따라 설치를 진행하면 될 것이다.
https://all4null.tistory.com/9
[Visual Studio Code]비주얼 스튜디오 코드 설치하기
빠르면서도 간편하다는 장점을 가진 비주얼 스튜디오 코드를 한번 설치해보도록 하겠다. 1. 먼저 비주얼스튜디오 공식 사이트인 아래 사이트로 접속해준다. https://code.visualstudio.com/ Visual Studio Cod
all4null.tistory.com
또한 크롬이 설치되어 있지 않은 경우 아래 사이트에서 간편하게 설치가 가능하다.
https://www.google.com/chrome/
설치가 끝났다면 이제 비주얼 스튜디오 코드를 실행해보자.
먼저, 설치 후 실행하면 다음과 같은 화면이 뜰 것이다.
여기서 Ctrl + N 을 눌러 새 파일을 만들어준다.
혹은, 아래와 같이 파일 -> 새 텍스트 파일을 눌러 만들어 준다
그럼 아래와 같은 화면이 뜰 것이다.
아래의 화면에 다음과 같은 코드를 입력 해보자.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>나의 첫 HTML 개발환경</title>
</head>
<body>
<h1>비주얼 스튜디오로 만든나의 첫 HTML 개발환경이다.</h1>
</body>
</html>
그리고, Ctrl + S 혹은, 파일-> 저장을 눌러 저장을 해준다.
저장을 할 때, 주의해야할 사항은 다음과같이 파일이름.html 으로 저장해줘야 한다는 점이다.
저장 후, F5 또는 실행(R) - > 디버깅 실행 을 누르고, 다음과 같은 창이 뜨면 Chrome을 선택 해준다.
다음과 같이 뜨면 성공이다.
이제 HTML을 위한 개발환경 세팅이 완료되었다. 다음 시간부터 본격적으로 HTML에 대해 알아보도록 하겠다.
만약에 따라하다 오류가 발생한다면 댓글로 알려주시면 최대한 도움 닿는데 까지 도와드리겠습니다!!
참조
고경희, Do it! HTML + CSS3 웹 표준의 정석, 이지스퍼블리싱, 2017
'나의 풀스택 개발일지' 카테고리의 다른 글
| [풀스택개발일지#4][HTML]텍스트 태그 (0) | 2022.11.25 |
|---|---|
| [풀스택개발일지#3]HTML의 기본 구조 (2) | 2022.11.23 |
| [풀스택개발일지#1][HTML]HTML이란? (0) | 2022.11.19 |
| [풀스택개발일지#0.5]풀스택을 위한 첫걸음_기본개념과 방향잡기 (0) | 2022.11.17 |
| [풀스택개발일지#0]풀스택은 어떻게 시작해야할까..? (0) | 2022.11.17 |
