목차(클릭하세요)
알면 도움이 되고, 아님 말고?
1. 파비콘
1-1. 파비콘이란?
•
브라우저 탭, 즐겨찾기, 모바일 홈화면 등에서 웹사이트를 대표하는 작은 아이콘
•
기본 규격항목 | 내용 |
파일 확장자 | .ico, .png, .svg, .jpg 등 |
권장 크기 | 32x32, 16x16 px (가장 일반적) |
파일 이름 | favicon.ico (가장 표준적인 이름) |
최적 포맷 | .ico 또는 .png |
1-2.
유용한 파비콘 생성 도구
도구 이름 | 주소 |
Favicon.io | |
RealFaviconGenerator |
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 등 적용 |
3. 파일 인클루드(file include)
3-1. 파일 인클루드란?
•
템플릿 분리 또는 공통 컴포넌트 분리 (Componentization)의 하나
•
[예] 제품소개 랜딩페이지를 더 잘 만들때 네비게이션바와 푸터 등 모든페이지에서 공통적인 요소를 별도로 독립된 파일로 만들고, 다른 페이지들에 이 독립된 파일을 ‘삽입’하는 기
왜 사용하는가?
•
코드 중복 방지
•
유지보수 용이 (한 번 수정하면 모든 페이지에 반영됨)
•
개발 생산성 향상
HTML vs PHP 인클루드 기법 비교
항목 | HTML 기준 | PHP 기준 |
적용 가능 여부 |  HTML 단독으로는 불가능 | PHP에서 include 또는 require 사용 가능 |
공통 파일 예시 | navbar.html, footer.html | navbar.php, footer.php |
인클루드 방식 | JS fetch()를 사용한 동적 삽입 필요 | PHP 내장 함수 include, require 사용 |
3-2.사용예시
<!-- index.php -->
<?php include 'navbar.php'; ?>
JavaScript
복사
<!-- index.html -->
<div id="navbar"></div>
<script>
fetch('navbar.html')
.then(res => res.text())
.then(data => {
document.getElementById('navbar').innerHTML = data;
});
</script>
HTML
복사
결론 요약
질문 | 답변 |
HTML에서 include 가능? | 기본 HTML만으로는 불가, JS fetch 필요 |
PHP에선 어떻게 사용? | include 또는 require로 재사용 가능 |
파일 나누는 이유? | 코드 재사용, 유지보수 편리함, 모든 페이지에서 구조 통일 가능 |
언제 이 방식을 써야 하나? | 같은 헤더/푸터가 여러 페이지에 반복될 경우 가장 효율적 |