📌 @media 규칙
웹페이지를 구경하다보면 스크린에 보이는 웹페이지의 모습과 인쇄할때의 웹페이지의 모습이 다른 경우를 많이 볼 수 있다. 이런 부분을 구현할 수 있게 해주는 것이 @media 규칙이라 할 수 있다.
먼저 다음과 같은 코드를 분석해보자
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" media="screen"/>
<link rel="stylesheet" href="style2.css" media="print"/>
<style>
@media screen and (max-width: 767px){
html{
background: red;
color: white;
}
}
@media screen and (min-width: 768px) and (max-width: 959px) {
html{
background: green;
color: white;
}
}
@media screen and (min-width: 960px){
html{
background: blue;
color: white;
}
}
</style>
<title>Browser</title>
</head>
<body>
<h1>@media</h1>
<p>나 뉴진스 하니인데 html은 프로그래밍 언어가 맞다</p>
<p>-> 하니는 그런 말 안써요.</p>
</body>
</html>그리고 style.css를 이렇게
html{
height: 100%;
}
h1{
color: black;
}style2.css를 이렇게 구성해본다.
h1{
color:red;
text-align: center;
}그리고 파일을 저장하여 결과를 각각 휴대폰, 태블릿, 데스크탑에서 확인해보자.
💡휴대폰 결과
💡태블릿 결과
💡데스크탑 결과
왜 이런 결과가 나왔을지 이제부터 분석을 해본다.
📌 min-width 속성과 max-width 속성
<style>
@media screen and (max-width: 767px){
html{
background: red;
color: white;
}
}
@media screen and (min-width: 768px) and (max-width: 959px) {
html{
background: green;
color: white;
}
}
@media screen and (min-width: 960px){
html{
background: blue;
color: white;
}
}
</style>기기의 종류마다 화면 색이 바뀌는 것은 이 부분의 코드 때문이다.
@media 규칙에서 min-width 속성으로 화면의 최소 너비를 지정할 수 있고 max-width 속성으로 화면의 최대 너비를 지정할 수 있다.
즉, 0~767px까지는 배경이 빨간색으로 768px~959px까지는 배경이 초록색으로, 960px부터는 배경이 파란색으로 바뀌는 것이다.
여기서 768px은 아이패드 수직 상태의 넓이고 960px은 일반적인 웹페이지 넓이다.
📌 print 속성
앞서 작성한 html파일을 인쇄 미리보기로 한번 봐보자.
다음과 같이 style2.css가 적용된 것을 볼 수 있다.
이는 html파일에서 style2.css를 가져오면서 media규칙의 print 속성을 썼기 때문이다.
<link rel="stylesheet" href="style.css" media="screen"/>
<link rel="stylesheet" href="style2.css" media="print"/>screen 속성은 일반 화면에 보여질때 적용하는 스타일시트를 나타내고 print 속성은 인쇄할 때 적용하는 스타일시트를 나타낸다.
개...발 공부 기록 블로그