앞서 GitHub에 새 레파지토리(repository)를 만들고 소스를 올렸다.
그리고 GitHub Pages를 이용해 웹사이트도 만들었다.
비록 index.html 파일 하나에 글자만 써서 올렸지만 시작이 반이다.
로컬에 파일을 만들고 레파지토리에 등록하고 웹호스팅해서 웹사이트까지 큰 뼈대는 완성했다.
이제 홈페이지/블로그에 필요한 css와 js 파일을 간단하게 만들고 웹사이트에 반영해 보자.
CSS 파일
CSS는 Cascading Style Sheets의 약자다.
웹페이지를 이쁘게 꾸미기 위해 필요하다.
방법을 먼저 정리해 보자. (To-Do List)
- css 파일을 저장할 폴더를 만든다.
- css 파일을 생성한다.
- css 파일에 index.html 파일 내 글자에 적용할 기능을 넣는다.
- 저장 후 로컬에서 확인한다.
- 문제가 없다면 GitHub에 add, commit, push 한다.
- 웹사이트를 열어 잘 반영되었는지 확인한다.
CSS 새 파일을 만들어보자.
VSCode(Visual Studio Code)를 열고 왼쪽 탐색기에 마우스 우클릭을 했다.
먼저 새 폴더를 만들고 이름은 css로 했다.
css폴더로 이동했다.
다시 탐색기에 우클릭을 하고 새 파일을 생성했다.
파일명에 main.css로 하고 저장했다.
css 파일 앞에 # 표기가 보인다.
이제 css 파일에 index.html에 있는 텍스트를 꾸며보자.
글자 크기도 조정하고 색상도 넣고 줄도 그어보자.
div 태그 내 글자에 대한 효과를 코딩했다.
font-size(글자크기)는 20px(픽셀)로 정했다.
color(글자색)은 coral로 정했다.
글자에 밑줄을 넣기 위해 text-decoration에 underline을 추가했다.
이제 저장하고 github에 올려보자.
CSS 파일 GitHub에 올리기.
VSCode에서 터미널을 실행했다.
VSCode 아랫부분에 터미널이 실행된다.
이제 Git 명령어로 css 파일을 GitHub의 aistep 레파지토리에 올리자.
git 명령어를 사용해서 css 폴더와 css 파일을 올렸다.
git add . 으로 추가, 변경된 파일을 추가했다.
git commit -m 으로 추가, 변경된 파일 버전을 올렸다.
git push -u origin mater로 GitHub 레파지토리에 반영했다.
오류 없이 잘 실행되었다.
GitHub에서 소스 및 웹사이트 확인하기.
이제 GitHub에 가서 css 폴더와 css 파일이 잘 올라왔는지 보자.
css 폴더가 새로 생성되었다.
css 폴더를 더블클릭해서 css 파일도 확인해 보자.
git으로 올린대로 잘 반영되어 있다.
이제 글자가 잘 꾸며지는지 확인해 보자.
그런데 글자에 반영이 안 되고 있다.
뭐가 문제일까?
다시 코드를 봤다.
<head>에 css 연결하는 부분도 없다.
css에서 div 태그를 사용한 부분에 적용하라고 만들었다.
하지만, html 파일을 보면 <div> 태그를 사용하지 않았다.
그래서 html에 css 연결도 하고 <div> 태그도 추가했다.
VSCode에서 미리 보기.
오류로 수정해서 git으로 올리는 과정을 자주 하기엔 시간이 많이 걸릴 수 있다.
그래서 VSCode(로컬)에서 먼저 확인하고 올리면 효율적이라 생각했다.
그래서 VSCode에서 Preview 확장 프로그램을 설치했다.
Ctrl + k, 잠시 기다렸다가 v만 누르면 미리 보기 창이 실행된다.
이제 저장하면 바로 결과를 확인할 수 있다.
<head>에 link 태그로 css를 연결했다.
아래 6번 라인이다.
그리고 빠트린 <div>를 넣고 저장했다.
오른쪽 미리 보기에 잘 변경된 결과를 봤다.
이제 다시 git으로 소스를 올리고 웹에서 확인해야겠다.
GitHub에 css 업로드 최종 확인.
VSCode에서 터미널을 사용하면서 기존 명령어를 다시 칠 필요가 없다.
방향키 위아래를 누르면 기존 명령어가 나온다.
commit에서 스크립트만 "css 오류 수정"으로 바꿨다.
버전 관리 때문이다.
방향키로 편하게 불러와 엔터 치면서 처리했다.
반영이 안 되었다
사실 몇 번 반영을 해도 잘 안되었다.
이럴 경우 수동으로 빌드해서 배포할 수 있다.
상단 메뉴 Settings 클릭 후 왼쪽 아래 Pages를 클릭하면 위 화면이 나온다.
빨간 화살표 deployed를 클릭한다.
다음 화면이 나온다.
우측 상단(빨간 화살표)의 Re-run all jobs 버튼을 클릭했다.
다시 빌드와 배포가 되었다.
브라우저에 가면 아직 그대로다.
새로고침을 하니 제대로 반영이 되었다.
이렇게 실수를 한다니깐~
JS 파일
JS(Javascript, 자바스크립트) 파일도 CSS와 같은 과정이다.
우선 VSCode 탐색기에서 마우스 우측 클릭으로 새 폴더 선택 후 "js" 폴더를 만든다.
그리고 새 파일도 만든다.
파일명은 "main.js"로 정했다.
이번엔 실수하지 말고 연결도 잘 걸고 소스 반영도 해보자.
먼저 index.html에 코딩을 했다.
index.html 7번 라인을 보면 CSS와 다르게 <script> 태그를 사용했다.
main.js에 myClick() 함수를 추가했다.
alert 기능을 넣었다.
index.html 12번 라인을 보면 <span> 태그로 감쌌다.
그리고 onclick 이벤트에 main.js에서 만든 함수 myClick()를 src를 사용해서 연결했다.
그리고 미리 보기에서 테스트했는데 이상하다.
클릭을 하니 alert이 안 뜨고 파란색 글씨 영어로 안된다고 한다.
그래서 브라우저(크롬)를 열고 탐색기에서 index.html 파일을 끌어다 놨다.
js파일에서 함수를 잘 호출한다.
이제 반영하자.
js 폴더 및 main.js 파일 올리기
git 명령어를 사용해서 반영하자.
터미널로 다시 가서 방향키를 사용해 git 명령어를 불러오고 실행했다.
물론 commit 메시지는 "js 추가"로 수정했다.
GitHub에 반영했다.
잘 되었는지 확인해 보자.
코드를 보니 JS가 잘 반영되었다.
이제 웹사이트에 빌드 및 배포가 잘 되었는지 확인해 보자.
웹사이트에 접속해서 새로고침 후 실행했다.
텍스트를 클릭하니 alert이 잘 실행되었다.
마무리
사이트를 꾸미는 CSS와 기능을 넣을 수 있는 JS 구성을 만들었다.
CSS와 JS에 대한 코딩은 해당 폴더 내에 새로 만들거나 추가하면 된다.
다음엔 이미지도 넣고 index.html도 구성해 볼 계획이다.
이제 다음 단계로 진행한다.
문의는 댓글로 주세요~
'Software > Git&Github' 카테고리의 다른 글
| GitHub Pages로 개인 블로그 만들기, 소스 관리와 무료 웹 호스팅 설정해 보기 (깃허브 페이지) (0) | 2025.11.25 |
|---|---|
| [Git]Git Bash 간단 명령어 정리. (init, config, status, add, commit) (0) | 2024.01.14 |
