기록 ＞ 기억
[CSS] 반응형 웹 본문
반응형 웹
사용자의 접속환경(PC, 모바일)에 맞춰서 레이아웃을 자연스럽게 바꿔서 보여주는 것
| 장점 | 단점 |
| 모든 기기에서 접속가능 | 최신 버전의 브라우저만 지원, 하위 버전 브라우저 지원 X |
| 너비 값을 조절하면 너비에 맞추어 레이아웃을 변경 | |
| 사이트가 하나라서 유지관리가 편함 |
● 가변 그리드 → 화면의 크기에 관계없이 늘어나고 줄어들수 있도록 퍼센트(%)로 설정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>가변 그리드</title>
<style>
/* 사이즈를 픽셀단위가 아닌 퍼센트로 설정 → 사이즈에 맞게 자동적으로 변함 */
#wrap {
width: 90%;
margin: 0 auto;
border: 4px solid red;
}
</style>
</head>
<body>
<div id=wrap>
content
</div>
</body>
</html>● 미디어 쿼리 → 접속한 기기의 종류를 물어보고 그 기기에 맞게 사이트 구조를 바꿈
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>미디어 쿼리</title>
<style>
@media all and (min-width: 320px) {
body{
background-color: red;
}
}
@media all and (min-width: 768px) {
body {
background-color: green;
}
}
@media all and (min-width: 960px) {
body {
background-color: blue;
}
}
</style>
</head>
<body>
<!-- 320px ~ 767px → 빨강색 -->
<!-- 768px ~ 959px → 초록색 -->
<!-- 960px ~ → 파랑색 -->
</body>
</html>● 뷰포트 ( viewport ) → 화면에 보이는 영역을 제어 (미디어 쿼리로 기기의 화면크기를 감지할 때 필요)
● 플렉스 박스
'IT국비지원' 카테고리의 다른 글
| [JavaScript] 제어문 ① 조건문 (if, switch) (0) | 2021.09.08 |
|---|---|
| [JavaScript] 연산자 (0) | 2021.09.07 |
| [JavaScript] 작성위치, 변수와 상수 (0) | 2021.09.06 |
| [CSS] visibility : hidden 과 display : none 의 차이 (0) | 2021.09.05 |
| [CSS] 2단 메뉴 (0) | 2021.09.03 |
| [CSS] position 속성 / z-index 속성 (0) | 2021.09.02 |
| [CSS] display 속성 (block / inline / inline-block) (0) | 2021.09.01 |
'IT국비지원' Related Articles
more
Comments