"> 웹페이지 구조를 위한 기초지식 "> 웹페이지 구조를 위한 기초지식 ">

<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>

1. 파비콘

1-1. 파비콘이란?

브라우저 탭, 즐겨찾기, 모바일 홈화면 등에서 웹사이트를 대표하는 작은 아이콘
🟡 기본 규격

항목	내용
파일 확장자	`.ico`, `.png`, `.svg`, `.jpg` 등
권장 크기	`32x32`, `16x16` px (가장 일반적)
파일 이름	`favicon.ico` (가장 표준적인 이름)
최적 포맷	`.ico` 또는 `.png`

1-2.✅ 유용한 파비콘 생성 도구

도구 이름	주소
Favicon.io	https://favicon.io
RealFaviconGenerator	https://realfavicongenerator.net

2. 반응형 웹

2-1. 반응형 웹이란?

어떤 크기의 디스플레이든(태블릿, PC, 스마트 폰 등) 웹페이지를 그에 맞춰 보여주는 웹 페이지
➡️ 사용자의 화면 크기나 기기에 따라 자동으로 레이아웃과 디자인이 조절되는 웹사이트를 의미

2-2.왜 필요한가?

🟢 왜 필요한가?

이유	설명
✅ 다양한 디바이스 대응	스마트폰, 태블릿, 노트북, 데스크탑 등 해상도 다양화 대응
✅ 사용자 경험(UX) 향상	화면이 작아도 콘텐츠가 잘 보이면 이탈률 감소
✅ 유지보수 효율화	하나의 페이지로 모든 기기에 대응 가능
✅ SEO(검색 최적화)에 유리	구글은 반응형 웹을 우선시함

2-3.🛠️ 주요 기술 요소

요소	설명
CSS 미디어쿼리	화면 너비에 따라 다른 스타일을 적용 (`@media`)
퍼센트 기반 레이아웃	`width: 100%`, `flex`, `grid` 등 유연한 레이아웃 사용
뷰포트 설정	`<meta name="viewport" ...>` 사용으로 모바일 대응 설정
이미지 반응형 처리	`max-width: 100%`, `object-fit`, `srcset` 등 적용

1. 파비콘

1-1. 파비콘이란?

1-2.✅ 유용한 파비콘 생성 도구

2. 반응형 웹

2-1. 반응형 웹이란?

2-2.왜 필요한가?

🟢 왜 필요한가?

2-3.🛠️ 주요 기술 요소

3. 파일 인클루드(file include)