최근에 배운 CSS 미디어 쿼리 정보
소개
최근에 처음으로 미디어 쿼리에 대해 배운 것을 메모로 남겨두고 싶습니다.
미디어 쿼리 정보
웹 페이지를 탐색할 때 사용자는 PC, 스마트폰, 태블릿 등 다양한 단말기를 이용하고 있습니다. 이 때 단말기에 따라 웹 페이지에 표시되는 내용을 표시해야합니다. 반응형 웹 페이지를 만들기 위해 메디아어 쿼리가 사용됩니다. 반응 형 웹 사이트를 만드는 데 사용되는 유명한 예는 bootstrap입니다.
Qiita를 PC로 표시하면
Qiita를 스마트폰으로 표시한 경우
위와 같이 PC와 스마트폰으로 표시하면 각각의 디자인이 다르다.
반응형 웹 디자인이란?
미디어 쿼리를 조사했을 때에, 반응성인 웹 디자인이라고 보이는 것이 많았습니다만, 원래 반응성이란 무엇인가라고 의문에 생각해 조사했습니다.
"반응형 웹 디자인"은 PC, 태블릿, 스마트폰 등 여러 가지 다른 화면 크기를 웹 사이트 표시의 기준으로 삼아 페이지의 레이아웃 디자인을 유연하게 조정하는 것을 말합니다.
필독! 5분만에 알 수 있는 반응형 웹 디자인 요약
더 인용
장점
웹 페이지를 탐색할 때 사용자는 PC, 스마트폰, 태블릿 등 다양한 단말기를 이용하고 있습니다. 이 때 단말기에 따라 웹 페이지에 표시되는 내용을 표시해야합니다. 반응형 웹 페이지를 만들기 위해 메디아어 쿼리가 사용됩니다. 반응 형 웹 사이트를 만드는 데 사용되는 유명한 예는 bootstrap입니다.
Qiita를 PC로 표시하면
Qiita를 스마트폰으로 표시한 경우
위와 같이 PC와 스마트폰으로 표시하면 각각의 디자인이 다르다.
반응형 웹 디자인이란?
미디어 쿼리를 조사했을 때에, 반응성인 웹 디자인이라고 보이는 것이 많았습니다만, 원래 반응성이란 무엇인가라고 의문에 생각해 조사했습니다.
"반응형 웹 디자인"은 PC, 태블릿, 스마트폰 등 여러 가지 다른 화면 크기를 웹 사이트 표시의 기준으로 삼아 페이지의 레이아웃 디자인을 유연하게 조정하는 것을 말합니다.
필독! 5분만에 알 수 있는 반응형 웹 디자인 요약
더 인용
장점
단점
실제로 써보자
제가 평소에 관여하고 있는 내 마이스터 에서는 Sass를 사용하고 있으므로, Sass도 동시에 기술하고 싶습니다. CSS와 Sass로 기술하는 방법은 거기까지 변하지 않습니다만, 평상시 Sass를 메인에 쓰고 있는 자신으로부터 하면 조금 혼란했습니다. 나중에 스스로 돌이킬 때 알 수 있듯이 Sass도 써 둡니다.
index.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>メディアクエリ練習用</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<p>この部分が、端末の横幅に応じて変化します！</p>
</body>
</html>
index.sass@media screen and (mxn-width: 767px)
p
font-size: 16px
color: red
@media screen and (min-width: 768px)
p
font-size: 32px
color: blue
생성된 CSS는
index.css@media screen and (min-width: 767px) {
p {
font-size: 16px;
color: red;
}
}
@media screen and (max-width: 768px) {
p {
font-size: 32px;
color: blue;
}
}
됩니다.
이번에는 iPad를 하나의 기준으로, iPad의 가로폭 768px를 기준의 그 이하라면 16px로 적색의 문자로 표시해, 768px로부터는 32px로 청색의 문자를 표시한다고 했습니다.
요약
약간의 웹페이지를 만들고 싶었을 때, PC용과 스마트폰용의 2개의 HTML 파일을 작성하는 것은 번거롭다고 느낄 때가 있었습니다. 그 때 미디어 쿼리를 사용하면 편리하다고 생각합니다.
Reference
이 문제에 관하여(최근에 배운 CSS 미디어 쿼리 정보), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/masaki-ogawa/items/245d0d33a4820e907db4
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>メディアクエリ練習用</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<p>この部分が、端末の横幅に応じて変化します！</p>
</body>
</html>
@media screen and (mxn-width: 767px)
p
font-size: 16px
color: red
@media screen and (min-width: 768px)
p
font-size: 32px
color: blue
@media screen and (min-width: 767px) {
p {
font-size: 16px;
color: red;
}
}
@media screen and (max-width: 768px) {
p {
font-size: 32px;
color: blue;
}
}
약간의 웹페이지를 만들고 싶었을 때, PC용과 스마트폰용의 2개의 HTML 파일을 작성하는 것은 번거롭다고 느낄 때가 있었습니다. 그 때 미디어 쿼리를 사용하면 편리하다고 생각합니다.
Reference
이 문제에 관하여(최근에 배운 CSS 미디어 쿼리 정보), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/masaki-ogawa/items/245d0d33a4820e907db4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
