1. 웹 브라우저와 웹 편집기
Def) 웹 브라우저: 웹 사이트를 방문할 때 사용하거나 웹 개발자가 웹 편집기로 작성한 문서를 화면에 나타내는 프로그램을 말한다.
- 크롬, 엣지, 파이어 폭스
Def) 웹 편집기(Web Editor): 웹 문서를 만들 HTMP 태그를 비롯하여 CSS나 자바스크립트 소스를 입력하는 프로그램
- 메고장이나 전문 편집기처럼 텍스트를 입력할 수 있는 프로그램이면 모두 편집기로 사용가능하다.
- 윈도우 용 웹 편집기: Notepad+++, 에디트 플러스
- macOS용 편집기: Textmate, Coda
- visual studio는 모두 사용가능하다.
- 웹 기반 편집기: Codepen, JSFiddle, ....
2. 웹 개발 환경 설정하기
- visual studio 다운로드 받는다.
- 한글 언어 팩을 찾고 설치한다.
-아래와 같이 HTML코드를 입력하고 "WEB.html" 로 저장한다.
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>웹 개발 입문</title>
</head>
<body>
<h1>웹 개발 기초</h1>
<p>HTML</p>
<p>CSS</p>
<p>자바스크립트</p>
</body>
</html>
- 저장된 WEB.html파일을 실행한다.
Note) 실행 결과
- 위와 같은 간단한 웹 문서를 만들 수 있다.
- 웹 편집기 에서 웹 문서를 작성하고 웹 브라우저를 통해 결과를 확인할 수 있다.
'FrontEnd' 카테고리의 다른 글
| Chapter 06. CSS의 기본 (0) | 2022.04.20 |
|---|---|
| Chapter 05. 입력양식 작성하기 (0) | 2022.04.19 |
| Chapter 04. 웹 문서에 다양한 내용 입력하기 (0) | 2022.04.18 |
| Chapter 03. HTML기본 문서 만들기 (0) | 2022.04.18 |
| Chapter 01. 웹 개발 시작하기 (0) | 2022.04.17 |