Chap 02. 웹 개발 환경 구축
웹 개발 환경 구축
1. 웹 브라우저
- 수업시간에 실습을 위한 웹 브라우저는 크롬 브라우저를 사용한다.
- 주로
크롬 브라우저를 사용한다!!!
2. 웹 편집기
- 웹 편집기는
Visual Studio Code, 즉 VS Code를 사용한다!!
Visual Studio Code란?
- 무료 소프트웨어
- Windows, Mac, Linux 플랫폼에 구애받지 않음
- Python, Node.js도 작성 가능
Visual Studio Code 설치
- VS Code 설치는 공식 사이트에서 다운로드하면 된다.
VS Code에서 Live Server 다운로드
- HTML / CSS 코드를 작성한 뒤, 곧바로 크롬 페이지에 반영되기를 원한다면?!
→EXTENSIONS에서 Live Server를 검색해서 다운로드하면 된다.
3. 간단한 웹 문서 만들기
새 파일을 선택한 뒤, HTML 코드를 입력해보자!!
HTML 기본 템플릿 생성
-
VS Code에서
!를 누르면 밑에 첨부된 이미지처럼 HTML 기본 템플릿이 완성된다.-
!를 입력했을 때
-
Enter를 누르면 밑에 이미지처럼 기본 템플릿이 완성된다.
-
간단한 HTML 코드 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹 문서 만들기</title>
</head>
<body>
<h1>웹 개발 기초</h1>
<p>HTML</p>
<p>CSS</p>
<p>자바스크립트</p>
</body>
</html>- 'title 웹 문서 만들기 /title' 부분은 웹 페이지의 제목을 나타내는 부분이다.
- 'h1'는 제목을 나타내는 태그, 'p'는 하나의 문단을 표현할 때 사용하는 태그이다.
Hi