목차(클릭하세요)
클라우드 드라이브에서 작업시 설치와 실행에 오류가 발생할 수 있으니, 로컬 드라이브에서 작업
1. 프로젝트 폴더와 파일 만들기
1-1. 웹 사이트의 첫페이지
일반적으로 index.html 또는 index.php 라는 이름을 사용 예를 들어 www.fisrt.com이라는 웹서버 이름(도메인 네임)까지만 입력해도, 웹 서버는 자동으로 index.html 파일을 찾아서 전송해주는 개념1-2. html과 php의 차이
핵심 비교
구분 | index.html | index.php |
페이지 유형 | 정적 웹페이지 (Static) | 동적 웹페이지 (Dynamic) |
서버 코드 실행 | 불가 (프론트엔드만 처리) | 가능 (PHP 코드 실행, DB 연동, 세션 관리 가능) |
로그인 기능 구현 | JS로 API 요청만 가능(직접 처리 불가) | DB 검증, 세션/쿠키 활용해 로그인 처리 가능 |
추천 사용 상황 | 소개 페이지, 포트폴리오, 정적 사이트 | 로그인, 회원가입, 데이터 처리 필요한 경우 |
1-3. 웹사이트 파일들의 일반적 구조: 트리 구조
웹사이트의 트리구조 예시/ (루트 디렉토리)
├── index.html # 메인 페이지
├── about.html # 소개 페이지
├── /css # 스타일시트 폴더
│ └── style.css # 메인 스타일시트
├── /js # 자바스크립트 폴더
│ └── script.js # 주요 동작 스크립트
├── /images # 이미지 폴더
│ └── logo.png # 로고 이미지
├── /assets # 기타 리소스 폴더
│ ├── /fonts # 폰트 파일 보관 폴더
│ │ └── font.ttf # 폰트 파일
│ └── /videos # 동영상 파일 보관 폴더
│ └── intro.mp4 # 소개 영상
- index.html : 브라우저가 가장 먼저 읽는 메인 페이지
•
css/style.css : 웹사이트의 디자인과 레이아웃 담당
•
js/script.js : 사용자 동작 반응 처리 (버튼 클릭, 메뉴 이동 등)
•
images/ : 이미지 파일 저장소
•
assets/fonts, assets/videos : 부가적인 리소스 저장소 (폰트, 영상 등)
2. 웹페이지 구축(초보)
2-1.참고 페이지
서승완CEO운영 페이지
2-2. 프롬프트
“k치킨을 널리 알릴 웹페이지를 만들꺼야. “라는 질문보다는 ‘프레임워크’와같은 키워드를 언급해주면 훨씬 더 뛰어난 결과물을 얻을 수 있음 나쁜예시"k치킨을 널리 알릴 웹페이지를 만들꺼야.코드 작성해줘"
Markdown
복사
좋은 예시k치킨을 널리 알릴 웹페이지를 만들꺼야. 먼저 메인페이지는 대한민국 치킨 브랜드 중 상위OO개 브랜드에서 각각 3개씩 대표메뉴를 소개하는 홈페이지야. 이후 페이지는 하나씩 추가하자.
1. 글래스모피즘을 이용한 디자인으로 구성하고, css프레임워크는Tailwind CSS를 사용할꺼야.
2. npm과 같은 패지키는 하나도 설치하지 않은 상태야. node.js만 설치했어. 패지키 버전문제로 오류가 나지않도록 코드 작성해서 실행해
3. 필요한 이미지도 주소를 정확해서 검색해서 사용해.
Markdown
복사
2-3.완성된 초기페이지
초기 발생하는 문제점들1.
저작권 문제로 이미지를 unsplash같은 사이트만을 사용하기에 적합하지 않은 이미지가 붙음
2.
각 브랜드 페이지에서 이미지를 불러오는 것도 시원치 않음-_-
3.
해결책: 이렇게 하지 말고 @https://images.google.com/?hl=ko 구글이미지 검색 사이트에 가서 해당 브랜드와 메뉴를 키워드를 검색어로 넣어. 예를 들어 "BHC 맛초킹" 그리고 나온 첫번째 사이트의 이미지를 클릭했을 때 나오는 더 큰 이미지 주소를 복사해서 갱신해봐
모두 실패하여, 이미지 주소만 결국 수작업으로 셋팅
2-4. 프로젝트 진행을 위한 Node.js 설치
JS 개발 환경을 PC(로컬)에서 구축하고, 개발 도구(Vite, React, Vue 등)를 제대로 사용하기 위해서 필요특히 ,패키지 설치, 실행, 빌드, 배포를 위해 필수적으로 사용됨.
→ Node.js는 JS를 브라우저가 아닌 PC, 서버, CLI에서도 실행할 수 있게 해주는 엔진이자 환경임.
Node.js는 내 PC를 일종의 서버처럼 사용할 수 있게 해주는 실행 환경백엔드(서버 사이드) 개발에도 사용되는 플랫폼1.
2.
설치 완료 후 아래 명령어를 순서대로 진행
npm create vite@latest . -- --template react-ts
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Bash
복사
npm create vite@latest . -- --template react-ts
:Vite + React + TypeScript 프로젝트 초기화
npm install
: 필요한 의존성 패키지 설치
npm install -D tailwindcss postcss autoprefixer
:Tailwind 및 CSS 빌드 관련 도구 설치
npx tailwindcss init -p
: Tailwind, PostCSS 설정 파일 생성
3.
설치 완료후 기본확인 명령어
아래 3가지 명령어 실행시 결과가 나오면 정상설치 완료node -v # Node.js 버전 확인
npm -v # npm 버전 확인
npx --version # npx (패키지 실행기) 버전 확인
Bash
복사
3. 웹페이지 업그레이드
3-1. 웹페이지 구조 참고
•
화면 상단에 있는 메뉴를 내비게이션 바(Navbar)
•
위쪽의 큰 영역을 히어로 섹션(hero section)
•
그 다음 영역을 피처스 섹션(Features Section)
이렇게 커서에게 웹디자인 변경, 작업 수행을 위해서는 최소한의 용어를 알고 응용하는 것이 효과적참고: 레이아웃 갤러리
3-2.네이게이션바 업그레이드
네비이게이션 바(navbar)를 만들어서 현재 구축된 브랜드 페이지를 연결하자.
그리고 대한민국 치킨의 역사를 알려 줄 수 있는 페이지도 새로 생성해서 navbar로 만들고 연결시켜
Markdown
복사
•
만약 실패한다면 네비게이션바를 영어로 ‘navbar’라고 적으면 커서가 더 잘 이해할 수 있음
4. 웹페이지 서버로 업로드
4-1. 깃허브 업로드전 readme.md & .gitignore파일 만들기
readme.md와 .gitignore파일 만들어줘
Markdown
복사
README.md와 .gitignore 파일의 역할
README.md란?
프로젝트 소개 및 설명을 담는 문서→ 프로젝트를 처음 보는 사람도 이해할 수 있도록 정보를 제공함
항목 | 내용 |
확장자 | .md (Markdown 형식) |
작성 내용 | - 프로젝트 소개- 설치 방법- 사용 방법- 예시 코드- 기여 방법- 라이선스 등 |
표시 위치 | GitHub 저장소 최상단에 자동으로 표시됨 |
.gitignore란?
Git이 관리하지 않을 파일(추적 제외)을 설정하는 파일→ 불필요한 파일, 보안 정보, 빌드 결과물 등을 GitHub에 올리지 않도록 막아줌
항목 | 내용 |
확장자 | 파일 이름: .gitignore (확장자 없음) |
작성 내용 | - node_modules/ (npm 패키지 폴더)- .env (비밀번호, API 키)- dist/ (빌드 결과물)- *.log (로그 파일) |
효과 | Git이 해당 파일·폴더를 무시 (추적 제외) |
4-2. GitHub Pages 설정
1.
Settings에 들어가서 맨 밑으로 스크롤Danger Zone에서 Change repository visibility 부분을 public으로 설정하기
Danger Zone에서 Change repository visibility 부분을 public으로 설정하기
작업 내용 | 설명 |
GitHub 페이지 접속 | 저장소(Repository) → Settings → Pages 선택 |
브랜치 선택 | main 브랜치 → / (root) 디렉토리 선택 |
자동 배포 설정 완료 | 아래에 배포 주소(예: https://본인아이디.github.io/레포명/) 생성됨 |
2.
page로 이동하여 Source에서 None으로 되어있는 부분을 main branch로 변경 그 후 오른쪽에 save 버튼 클릭
그 후 오른쪽에 save 버튼 클릭
3.
GitHub Pages에서 파란색 링크 페이지를 클릭
4.
url 형식은 '깃허브 아이디'.github.io/'Repository 이름' 형식으로 나타남