다음은 내가 간단히 만든 자기소개 홈페이지다.
html과 css만 사용해서 만들었는데 head 부분에
<meta name="viewport" content="width=device-width, initial-scale=1.0">
이 코드가 이해가 안 되어 추가로 알아보았다.
결론
모바일 및 반응형 디자인을 위한 코드이다.
Viewport(뷰포트):
웹 페이지가 사용자의 화면에 보여지는 영역을 말합니다.
예: PC 화면은 큰 뷰포트, 스마트폰 화면은 작은 뷰포트
→ 이 태그가 없으면, 스마트폰 화면에서 PC 버전의 페이지처럼 보일 수 있다.
width=device-width:
"너비를 기기 화면의 크기(디바이스의 너비)와 동일하게 설정하라"는 뜻.
예: 스마트폰의 화면이 360px이라면, 웹 페이지의 너비도 360px로 설정.
→ 페이지가 화면에 딱 맞게 들어감.
initial-scale=1.0:
"초기 확대 배율을 1배(100%)로 설정하라"는 뜻.
예: 브라우저가 페이지를 확대하거나 축소하지 않고 원래 크기 그대로 보이게 함.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1주차 과제-자기소개 페이지</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<img src="a1.jpeg" alt="Profile Picture" class="profile-pic">
<div class="header-text">
<h1>Better an oops than a what if.</h1>
<p>안녕하세요 :)
<br>
최근 프론트엔드에 관심이 생겨 이를 공부하고 있는 김서현이라고 합니다. 반갑습니다!🤗</p>
</div>
</div>
<div class="nav-bar">
<div class="keyword">Graduation</div>
<div class="keyword">About</div>
<div class="keyword">Skills</div>
<div class="keyword">Contact</div>
</div>
<div class="content">
<div class="section">
<h2>Graduation</h2>
<p>옥*초등학교, 함*중학교, 옥*여자고등학교를 졸업한 후
<br>
한양대학교에서 정보시스템학을 전공하고 있습니다.</p>
</div>
<div class="section">
<h2>About</h2>
<p>
2023 T-web 콘텐츠제작부 임원
<br>
2023 학교 후리스 기획 및 공동구매로 얻은 수익 백남학술관에 기부
<br>
2024 라치오스 개인부스 운영으로 얻은 수익의 일부 한양디자인 발전 기금에 기부
<br>
2025 총동아리연합회 사무국 국장
</p>
</div>
<div class="section">
<h2>Skills</h2>
<p>정보처리기능사, 컴퓨터활용능력 1급, SQLD</p>
</div>
<div class="section">
<h2>Contact</h2>
<p>이메일: dianwls03@naver.com<br>전화: 010-2330-9870</p>
</div>
</div>
</body>
</html>자세한 설명
1. 역할
이 태그는 브라우저에게 페이지가 어떻게 표시되어야 하는지 지시함.
- PC 화면: 넓은 화면에 맞춰 표시.
- 스마트폰 화면: 작은 화면에 맞게 크기를 조정하여 표시.
2. 꼭 필요한 경우
- 반응형 웹사이트: 다양한 기기에서 페이지를 잘 보이게 만들려면 필수입니다.
스마트폰에서 페이지의 글씨가 너무 작게 나오거나, 화면을 좌우로 스크롤해야 하는 문제를 방지합니다.
3. 없으면 어떻게 될까?
- 모바일 화면: 페이지가 너무 작거나 이상하게 표시됩니다.
글씨 크기가 읽기 힘들 정도로 작게 나올 수 있음.
스크롤바가 생겨서 사용자가 불편하게 좌우로 이동해야 할 수도 있음. - PC 화면: 큰 영향을 받지 않습니다. 기본적으로 PC 환경은 이 태그가 없어도 잘 표시됩니다.
결론
<meta name="viewport" content="width=device-width, initial-scale=1.0">는
1️⃣모바일 및 반응형 디자인에서 필수적인 태그입니다.
2️⃣만약 웹사이트가 모바일 사용자도 고려한다면 반드시 사용하는 것이 좋습니다.
3️⃣PC 전용 사이트라면 없어도 큰 문제는 없습니다.
한양대 학생입니다. 서울캠입니다.