"> 제목 "> 제목 ">

<head>
  <!-- HTML Meta Tags -->
  <meta charset="UTF-8" />
  <title> 제목 </title>
  <meta
    name="description"   content=" 설명 "   />
  <meta name="keywords" content="키워드, 양파고, Yang Phago, 노션, 양파고 노션, notion" />

  <!-- Open Graph / Facebook -->
  <meta   property="og:title"   content="제목 "  />
  <meta  property="og:description" content=" 설명, 양파고, Yang Phago, 노션, 양파고 노션  "  />
  <meta property="og:image" content="대표 이미지" />
  <meta property="og:url" content="페이지 주소" />
  <meta property="og:type" content="website" />
</head>

목차(클릭하세요)

<aside> 💡 클라우드 드라이브에서 작업시 설치와 실행에 오류가 발생할 수 있으니, 로컬 드라이브에서 작업

</aside>

0. 참고: 이 내용은 ‘커서 AI 트렌드&활용백과’를 참고함

프로젝트 폴더와 파일 만들기

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 : 부가적인 리소스 저장소 (폰트, 영상 등)

0. 참고: 이 내용은 ‘커서 AI 트렌드&활용백과’를 참고함

1-1. 웹 사이트의 첫페이지

1-2. html과 php의 차이

✅ 핵심 비교

1-3. 웹사이트 파일들의 일반적 구조: 트리 구조

2. 웹페이지 구축(초보)

2-1.참고 페이지

2-2. 프롬프트