시간이 지나 갈 수록 다양한 기기에서 웹에 접속하는 빈도가 많아졌습니다.
그렇다보니 휴대폰과 테플릿 등과 같은 화면에도 가독성을 신경 써서 만드는 것을 반응형 웹이라고 합니다.
반응형 웹이란 접속하는 장비의 해상도의 따라 CSS를 다르게 보여주는 것입니다.
반응형 웹은 미디어쿼리를 이용하여 만들 수 있습니다.
아래는 기본적인 미디어쿼리 예제입니다.
viewport는 필수로 입력해야 하는 값입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- html의 가로 폭을 화면의 기기에 맞게 설정하고 확대 값을 기본 값인 1로 설정하라는 뜻 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*가로가 최대 768px 이하일 때 작동*/
@media(max-width:768px){
p{
color: red;
}
/* 가로가 768px 보다 클 때 작동*/
@media(min-width:768px){
p{
color: red;
}
@
}
</style>
</head>
<body>
<div>
<p>sample </P>
</div>
</body>
</html>'HTML_CSS' 카테고리의 다른 글
| CSS - transition 예제 (0) | 2021.04.17 |
|---|---|
| CSS - Transitions Site (0) | 2021.04.03 |
| Bootstrap - form Style (0) | 2020.05.31 |
| bootstrap - Grid System (0) | 2020.05.30 |
| Bootstrap (1) _소개 및 설치 (0) | 2020.05.30 |