본문 바로가기

STUDY/CODING

[GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 1

 

[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]을 클릭

 

Side Panel에 뜬 Preview Tab