[Day 1] Ⅰ. 웹 프로그래밍 시작하기
1. 개발환경 설정
- Visual Studio Code(이하 VS Code) 설치
- Git 설치
- GitHub 가입 및 로그인 New Repository 생성
- VS Code와 GitHub 저장소 연결
1. 터미널을 실행 (Windows-Git Bash/Mac,Linux-Terminal)
2. git config 명령으로 사용자 이름과 이메일 설정 (설정방법은 하기의 코드블럭 참고)
git config --global user.name "your name"
git config --global user.email "username@example.com"
your name에 GitHub user name, username@example.com에는 GitHub 가입 시 사용한 E-mail 주소 입력!
3. VS Code를 실행
4. [View]-[Command Palette]-'Git: Clone'-'Repository URL(위에서 만든 Repository의 URL)'
5. PC 내의 GitHub 저장소 저장 위치 지정-[Select Repository Location]
6. [Open Repository]
2. 웹 사이트 설계
- 계획 세우기: 웹 사이트의 주제, 정보의 구성, 웹 사이트 디자인
- 디자인 스케치: 페이퍼 스케치
- 웹 자원의 활용: 텍스트, 컬러(Color Picker의 Hex code값 이용), 이미지(저작권에 유의할 것), 폰트(Google Fonts)
3. 프로젝트 구성
- 폴더 및 파일명
1. 폴더 및 파일명은 공백 없는 소문자
2. 웹 서버는 대소문자를 구별함 (ex: images/MyImage.jpg ≠ images/myimage.jpg)
3. 단어 구분은 공백 대신 대시(-)로 구분 (ex: my-file.html)
- 프로젝트 구조
1. index.html: 홈페이지에서 제일 먼저 표시되는 웹페이지(Main Page)
2. 'images' folder: 이미지 파일들을 저장하는 폴더
3. 'styles' folder: CSS 파일들을 저장하는 폴더
4. 'scripts' folder: JavaScript 파일들을 저장하는 폴더
- 프로젝트 실습 <Hello, Web World 페이지 만들기>
1. VS Code 실행
2. New File 아이콘 클릭 후 'index.html' 생성
3. New Folder 아이콘 클릭 후 'images', 'styles', 'scripts' 폴더 생성
4. images 폴더에 Google image 검색으로 찾은 HTML5 이미지 드래그
5. 'index.html' 파일을 아래와 같이 수정 후 저장
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, Web World</title>
</head>
<body>
<h1>Hello, Web World</h1>
<img src="images/html5.png" alt="HTML5">
</body>
</html>
6. VS Code Side Bar에서 Extensions 아이콘을 클릭-'Preview on Web Server' 플러그인 설치
7. VS Code 재실행
8. 'index.html'파일의 소스 편집기에서 우클릭한 후-[Preview on side panel]을 클릭
'STUDY > CODING' 카테고리의 다른 글
[GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 6 (0) | 2019.08.25 |
---|---|
[GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 5 (0) | 2019.08.24 |
[GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 4 (0) | 2019.08.23 |
[GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 3 (0) | 2019.08.23 |
[GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 2 (0) | 2019.08.21 |