728x90
반응형
웹사이트의 레이아웃을 제작할 때 화면의 해상도를 고려해서 제작을 해야 합니다.
요즘은 스마트기기 사용이 많아져 해상도에 따라 배치를 변경하며 가독성을 높이게 됩니다.
이러한 작업을 반응형 작업이라고 합니다.
반응형 작업을 하기 전에 head 태그 안에 meta 태그를 추가해줍니다.
<head>
<meta charset="UTF-8">
<title>title</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
</head>
css에는 @media 쿼리를 이용합니다.
✨ 모바일 우선일 때
작은 폭을 먼저 작성합니다.
@media ( min-width: 768px ) {
768 이상일때 스타일
}
@media ( min-width: 1024px ) {
1024 이상일때 스타일
}✨ 데스크톱 우선일 때
큰 폭부터 먼저 작성합니다.
@media ( max-width: 1024px ) {
1024 이하일때 스타일
}
@media ( max-width: 768px ) {
768 이하일때 스타일
}728x90
반응형
'html,css' 카테고리의 다른 글
| [CSS] -webkit-tap-highlight-color / 모바일 터치 / css 대응 (0) | 2022.12.12 |
|---|---|
| [CSS] scrollLeft 했을때 부드럽게 이동 (0) | 2022.10.23 |
| [CSS] img src를 css로 수정하기 (0) | 2022.05.13 |
| [html] inline tag 와 block tag (0) | 2022.04.15 |
| [CSS] css 색상표현하기 (0) | 2022.03.25 |