Search

반응형

'Software'에 해당되는 글 197건

  1. 2026.01.19 GitHub Pages에서 블로그 만들기. Html로 레이아웃 만들어 보기. header, content, footer
  2. 2025.12.04 GitHub Pages, CSS와 JS 파일 올려보기, 개인 블로그 만들기

GitHub Pages에서 블로그 만들기. Html로 레이아웃 만들어 보기. header, content, footer

Software/Git&Github 2026. 1. 19. 19:31 Posted by friendly
반응형

 

 

깃허브(github)에 html, css 그리고 js파일까지 올려봤다.

프론트엔드(frontend) 기본 환경은 끝났다고 볼 수 있다.

물론 자기만의 도메인을 구매해서 연결하는 방법도 있다.

백엔드(backend)를 개발해야 할 수 있다.

데이터베이스(DB)를 사용하지 않고 파일로 블로그를 구성할 계획이다.

시작하기.

이제 첫 페이지를 만들어 보자.

기본적으로 웹사이트를 보면 왼쪽 상단엔 로고가 있다.

예쁜 배경 이미지나 색을 헤데(header) 부분에 넣고 대메뉴를 구성되어 있다.

화면 왼쪽엔 대메뉴에 따른 세부 메뉴가 나타난다.

또는 헤드 부분 대메뉴를 선택하면 팝업식으로 세부 메뉴가 나오는 구성도 있다.

본문(content)은 세부 메뉴에 대한 내용이 나타난다.

본문 상단에는 현재 어느 메뉴인지 내비게이터가 보인다.

하단은 푸터(footer)라 하고 제작 정보나 연락할 이메일 등이 있다.

 

레이아웃 구성

간단하게 어떤 구성으로 첫 화면을 꾸밀지 레이아웃을 정했다.

홈페이지 처음 만들 때 필요한 정보를 담은 홈페이지로 정했다.

레이아웃

간단하게 어떤 메뉴로 만들지 간략하게 텍스트로 넣었다.

그리고 하나씩 만들어 갈 계획이다.

물론 중간에 메뉴가 수정될 수도 있다.

 

텍스트로 구성

엉성해 보이지만 당연하다.

그냥 생각한 메뉴를 텍스트로 적었을 뿐이다.

이제 하나씩 꾸며가보자.

Header 영역 만들기.

영역 만들기 전 디렉터리를 좀 더 구성했다.

개발 환경

기존에 css와 js 디렉터리는 있었다.

추가로 추가할 화면 html을 담을 html 디렉터리를 추가했다.

각 화면마다 필요한 이미지를 담을 images 디렉터리도 추가했다.

 

header 부분

먼저 header 부분 태그를 코딩했다.

body태그 전체는 12라인에서 div로 감쌌다. 

14~18라인에서는 왼쪽 로고와 오른쪽 사이트 맵을 구성 했다.

19~29라인은 header에서 gnb인 주 메뉴를 보여주는 부분이다.

gnb는 Global Navigation Bar의 약자다.

익혀두면 실전에서 커뮤니케이션에 도움이 된다.

git 명령어

깃허브(GitHub)에 디플로에 해서 화면을 확인했다.

 

header

아직 꾸밈(CSS)과 기능(JavaScript)을 적용 안 해서 보기가 안 좋다.

괜찮다.

CSS 적용하면 더 멋지게 될 것이다.

Container 영역 만들기.

이제 가운데 부분을 만들어보자.

container

해당 부분을 32~54라인까지 container 의미인 div로 묶었다.

33라인은 class=snb라고 명칭 했다.

snb는 Sub Navigation Bar의 약자로 사이드 메뉴 또는 gnb의 하위 메뉴를 의미한다.

lnb(Local Navigation Bar)와 비슷하다.

기획 회의 때 GNB, LNB, SNB 등 용어가 나오면 메뉴 관련이라고 이해하자.

40라인부터는 메인 화면 부분이다.

실제 쓰고 싶은 내용을 기록하고 필요하면 이미지를 넣어도 된다.

41라인을 보면 location이 나오는데 현재 어느 위치에 있는지 메뉴 경로를 표현한다.

이제 화면에 어떻게 나오는지 보자.

container

아직 CSS 적용이 안 돼서 왼쪽 메뉴가 상단에 나온다.

엉성하지만 현재 메뉴 위치도 잘 나온다.

이미지도 잘 불러와졌다.

이제 마지막 단계가 남았다.

Footer 영역 만들기.

마지막 하단에 Footer를 만들 차례다.

Footer에는 보통 copyright 등 저작권 표시, 연락처, SNS 등을 넣는다.

footer code

사실 특이한 건 없다.

우선 copyright만 살짝 적어줬다.

footer

 

마무리

이렇게 heder, content, footer를 만들어 봤다.

CSS를 적용하지 않아 멋지게 꾸며지진 않았다.

하지만 처음부터 완벽하게 하려다 보면 지친다.

한 단계식 완성도를 높여 가는 것이 더 효율적이다.

모든 코딩이 그러하듯~

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'Software > Git&Github' 카테고리의 다른 글

GitHub Pages, CSS와 JS 파일 올려보기, 개인 블로그 만들기  (0) 2025.12.04
GitHub Pages로 개인 블로그 만들기, 소스 관리와 무료 웹 호스팅 설정해 보기 (깃허브 페이지)  (0) 2025.11.25
[Git]Git Bash 간단 명령어 정리. (init, config, status, add, commit)  (0) 2024.01.14

GitHub Pages, CSS와 JS 파일 올려보기, 개인 블로그 만들기

Software/Git&Github 2025. 12. 4. 20:49 Posted by friendly
반응형

GitHub Pages, css, js

 

앞서 GitHub에 새 레파지토리(repository)를 만들고 소스를 올렸다.

그리고 GitHub Pages를 이용해 웹사이트도 만들었다.

비록 index.html 파일 하나에 글자만 써서 올렸지만 시작이 반이다.

로컬에 파일을 만들고 레파지토리에 등록하고 웹호스팅해서 웹사이트까지 큰 뼈대는 완성했다.

이제 홈페이지/블로그에 필요한 css와 js 파일을 간단하게 만들고 웹사이트에 반영해 보자.

CSS 파일 

CSS는 Cascading Style Sheets의 약자다.

웹페이지를 이쁘게 꾸미기 위해 필요하다.

 

방법을 먼저 정리해 보자. (To-Do List)

  1. css 파일을 저장할 폴더를 만든다.
  2. css 파일을 생성한다.
  3. css 파일에 index.html 파일 내 글자에 적용할 기능을 넣는다.
  4. 저장 후 로컬에서 확인한다.
  5. 문제가 없다면 GitHub에 add, commit, push 한다.
  6. 웹사이트를 열어 잘 반영되었는지 확인한다.

 

새 파일 css

 

CSS 새 파일을 만들어보자.

VSCode(Visual Studio Code)를 열고 왼쪽 탐색기에 마우스 우클릭을 했다.

먼저 새 폴더를 만들고 이름은 css로 했다.

 

css 폴더

 

css폴더로 이동했다.

다시 탐색기에 우클릭을 하고 새 파일을 생성했다.

파일명에 main.css로 하고 저장했다.

 

main.css 생성

 

css 파일 앞에 # 표기가 보인다.

이제 css 파일에 index.html에 있는 텍스트를 꾸며보자.

글자 크기도 조정하고 색상도 넣고 줄도 그어보자.

 

글자 꾸미기

div 태그 내 글자에 대한 효과를 코딩했다.

font-size(글자크기)는 20px(픽셀)로 정했다.

color(글자색)은 coral로 정했다. 

글자에 밑줄을 넣기 위해 text-decoration에 underline을 추가했다.

이제 저장하고 github에 올려보자.

CSS 파일 GitHub에 올리기.

VSCode에서 터미널을 실행했다.

 

VSCode 보기 > 터미널

 

VSCode 아랫부분에 터미널이 실행된다.

 

VSCode 터미널

 

이제 Git 명령어로 css 파일을 GitHub의 aistep 레파지토리에 올리자.

git으로 css 파일 올리기

 

git 명령어를 사용해서 css 폴더와 css 파일을 올렸다.

git add . 으로 추가, 변경된 파일을 추가했다.

git commit -m 으로 추가, 변경된 파일 버전을 올렸다.

git push -u origin mater로 GitHub 레파지토리에 반영했다.

오류 없이 잘 실행되었다.

GitHub에서 소스 및 웹사이트 확인하기.

이제 GitHub에 가서 css 폴더와 css 파일이 잘 올라왔는지 보자.

 

github code 화면

 

css 폴더가 새로 생성되었다.

css 폴더를 더블클릭해서 css 파일도 확인해 보자.

 

main.css 파일

 

git으로 올린대로 잘 반영되어 있다.

이제 글자가 잘 꾸며지는지 확인해 보자.

 

main.css 반영 안됨

 

그런데 글자에 반영이 안 되고 있다.

뭐가 문제일까?

다시 코드를 봤다.

 

오류 확인

 

<head>에 css 연결하는 부분도 없다.

css에서 div 태그를 사용한 부분에 적용하라고 만들었다.

하지만, html 파일을 보면 <div> 태그를 사용하지 않았다.

그래서 html에 css 연결도 하고 <div> 태그도 추가했다.

VSCode에서 미리 보기.

오류로 수정해서 git으로 올리는 과정을 자주 하기엔 시간이 많이 걸릴 수 있다.

그래서 VSCode(로컬)에서 먼저 확인하고 올리면 효율적이라 생각했다.

그래서 VSCode에서 Preview 확장 프로그램을 설치했다.

 

Preview

 

Ctrl + k, 잠시 기다렸다가 v만 누르면 미리 보기 창이 실행된다.

이제 저장하면 바로 결과를 확인할 수 있다.

<head>에 link 태그로 css를 연결했다.

아래 6번 라인이다.

그리고 빠트린 <div>를 넣고 저장했다.

 

오류 수정

 

오른쪽 미리 보기에 잘 변경된 결과를 봤다.

이제 다시 git으로 소스를 올리고 웹에서 확인해야겠다.

 

GitHub에 css 업로드 최종 확인.

VSCode에서 터미널을 사용하면서 기존 명령어를 다시 칠 필요가 없다.

방향키 위아래를 누르면 기존 명령어가 나온다.

 

git 명령어

 

commit에서 스크립트만 "css 오류 수정"으로 바꿨다.

버전 관리 때문이다.

방향키로 편하게 불러와 엔터 치면서 처리했다.

 

오류 수정 완료

 

 

반영이 안 되었다

사실 몇 번 반영을 해도 잘 안되었다.

이럴 경우 수동으로 빌드해서 배포할 수 있다.

 

GitHub Pages

 

상단 메뉴 Settings 클릭 후 왼쪽 아래 Pages를 클릭하면 위 화면이 나온다.

빨간 화살표 deployed를 클릭한다.

다음 화면이 나온다.

 

re-run

 

우측 상단(빨간 화살표)의 Re-run all jobs 버튼을 클릭했다.

다시 빌드와 배포가 되었다.

브라우저에 가면 아직 그대로다.

새로고침을 하니 제대로 반영이 되었다.

이렇게 실수를 한다니깐~

JS 파일

JS(Javascript, 자바스크립트) 파일도 CSS와 같은 과정이다.

우선 VSCode 탐색기에서 마우스 우측 클릭으로 새 폴더 선택 후 "js" 폴더를 만든다.

그리고 새 파일도 만든다.

파일명은 "main.js"로 정했다.

 

js 폴더와 main.js 생성

 

이번엔 실수하지 말고 연결도 잘 걸고 소스 반영도 해보자.

먼저 index.html에 코딩을 했다.

 

index.html과 js에 코드 추가

 

index.html 7번 라인을 보면 CSS와 다르게 <script> 태그를 사용했다.

main.js에 myClick() 함수를 추가했다.

alert 기능을 넣었다.

index.html 12번 라인을 보면 <span> 태그로 감쌌다.

그리고 onclick 이벤트에 main.js에서 만든 함수 myClick()를 src를 사용해서 연결했다.

그리고 미리 보기에서 테스트했는데 이상하다.

 

미리보기

 

클릭을 하니 alert이 안 뜨고 파란색 글씨 영어로 안된다고 한다.

그래서 브라우저(크롬)를 열고 탐색기에서 index.html 파일을 끌어다 놨다.

 

alert 성공

 

js파일에서 함수를 잘 호출한다.

이제 반영하자.

js 폴더 및 main.js 파일 올리기

git 명령어를 사용해서 반영하자.

터미널로 다시 가서 방향키를 사용해 git 명령어를 불러오고 실행했다.

물론 commit 메시지는 "js 추가"로 수정했다.

 

js git 반영

 

GitHub에 반영했다.

잘 되었는지 확인해 보자.

github js 확인

 

코드를 보니 JS가 잘 반영되었다.

이제 웹사이트에 빌드 및 배포가 잘 되었는지 확인해 보자.

 

웹사이트 실행 성공

 

웹사이트에 접속해서 새로고침 후 실행했다.

텍스트를 클릭하니 alert이 잘 실행되었다.

마무리

사이트를 꾸미는 CSS와 기능을 넣을 수 있는 JS 구성을 만들었다.

CSS와 JS에 대한 코딩은 해당 폴더 내에 새로 만들거나 추가하면 된다.

다음엔 이미지도 넣고 index.html도 구성해 볼 계획이다.

 

이제 다음 단계로 진행한다.

문의는 댓글로 주세요~

반응형
저작자표시 비영리 변경금지 (새창열림)

'Software > Git&Github' 카테고리의 다른 글

GitHub Pages에서 블로그 만들기. Html로 레이아웃 만들어 보기. header, content, footer  (0) 2026.01.19
GitHub Pages로 개인 블로그 만들기, 소스 관리와 무료 웹 호스팅 설정해 보기 (깃허브 페이지)  (0) 2025.11.25
[Git]Git Bash 간단 명령어 정리. (init, config, status, add, commit)  (0) 2024.01.14
 

티스토리툴바