1. viewport 메타태그란?
HTML에서 <meta name="viewport"> 태그는 모바일 브라우저에서 페이지가 어떻게 보일지를 제어합니다.
위치
<head> 태그 안, <title> 태그 위에 위치하는 것이 권장됩니다.
예시
<meta name="viewport" content="width=device-width, initial-scale=1.0">
주요 속성들
| 속성명 | 설명 |
|---|---|
width | 화면 너비 설정. 주로 device-width를 사용하여 기기 화면 너비에 맞춤 |
height | 화면 높이 설정. 잘 사용되지는 않음 |
initial-scale | 최초 로딩 시 확대/축소 비율 (권장값: 1.0) |
minimum-scale, maximum-scale | 최소/최대 확대 허용 비율 (0.25 ~ 10.0) |
user-scalable | 사용자가 확대/축소 가능한지 여부 (yes or no) |
target-densitydpi | 화면 해상도 지정 (예: medium-dpi) — 대부분의 브라우저는 지원하지 않음 |
크롬에서 반응형 테스트
F12→Toggle Device Toolbar클릭- 원하는 기기 선택 후 화면 크기 반응 여부 확인
2. 미디어 쿼리(Media Query)란?
CSS3부터 도입된 기능으로, 화면 크기나 장치 타입에 따라 다양한 스타일을 조건부로 적용할 수 있도록 해줍니다. 반응형 웹의 핵심입니다.
기본 문법
@media 미디어타입 and (조건) {
/* 적용될 CSS */
}
예시
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
HTML에서 <link>로 사용 시
<link rel="stylesheet" href="default.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
only / not 키워드
only: 해당 미디어 쿼리를 지원하는 브라우저에만 적용not: 조건에 해당하지 않을 때 스타일 적용
3. 미디어 타입 종류
| 타입명 | 설명 |
|---|---|
all | 모든 장치 (기본값) |
screen | 디스플레이 화면 (컴퓨터, 스마트폰 등) |
print | 인쇄용 |
projection | 프로젝터 용 |
braille | 점자 디바이스 |
aural, speech | 음성 합성 장치 |
handheld | 작은 화면을 가진 휴대용 기기 |
tty | 텍스트 전용 장치 |
tv | TV 스크린 |
embossed | 점자 프린터 |
4. 조건 속성 (Media Features)
| 속성 | 설명 |
|---|---|
width, height | 브라우저의 뷰포트 너비/높이 (min-, max-와 함께 사용 가능) |
device-width, device-height | 기기 자체의 물리적 너비/높이 |
orientation | portrait(세로) / landscape(가로) |
aspect-ratio | 화면 너비/높이 비율 (예: 16/9) |
device-aspect-ratio | 기기 화면의 비율 |
resolution | 해상도 (예: 300dpi, 118dpcm) |
color, monochrome, color-index | 색상 표현 능력 관련 |
hover, any-hover, pointer | 입력 장치(터치, 마우스) 조건 제어 |
좋아요! 이 코드는 미디어 쿼리 중 @media print를 사용한 예제입니다. 즉, 인쇄용 스타일을 지정하는 부분으로, 사용자가 웹페이지를 인쇄할 때 <a> 태그 뒤에 링크 주소가 자동으로 표시되도록 해주는 기능이에요.
제가 정리해드린 미디어 쿼리 개념 문서에 적절한 위치에 이 코드를 추가해서 깔끔하게 재구성해드릴게요:
5. 미디어 쿼리(Media Query)사용 코드
기본 문법
@media 미디어타입 and (조건) {
/* 적용될 CSS */
}
예시: 화면 너비에 따른 스타일 적용
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
예시: 인쇄용 스타일 적용 (@media print)
@media print {
a:after {
content: "(" attr(href) ")";
}
}
위 코드는 사용자가 웹페이지를 인쇄할 때 <a> 링크 뒤에 해당 링크의 URL을 괄호 안에 출력하도록 합니다.
실제 HTML 코드 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@media print {
a:after {
content: "(" attr(href) ")";
}
}
</style>
</head>
<body>
<a href="https://www.javaspecialist.co.kr">자바전문가그룹</a><br>
<a href="https://www.youtube.com/watch?v=F0etwoax1rk">자바강의</a><br>
</body>
</html>
인생 별거 없어