-
[CSS] 반응형 웹, 반응형 설계 - 가변 그리드, 반응형 설계 - 미디어 쿼리Web/CSS 2020. 5. 16. 05:52
반응형 웹
최근 다양한 모바일기기(=디바이스)의 보급으로 하나의 웹사이트로 데스크탑, 태블릿PC, 모바일 등
다양한디바이스 해상에 따라 사이트의 레이아웃이 변환되는 것
가변그리드 레이아웃
1. 그리드 시스템: 디자인의 일괄성을 유지하기 위해 화면을 칼럼으로 나누어 요소들을 배치하는 것
2. 가변성: 넓이 값이 정해져 있지 아니해서 사이즈에 따라 변환되는 것
3. 가변 그리드: 화면의 폭을 고정해 놓지 않고 창의 폭에 따라 콘텐츠 너비가 달라지게 하는 것
clear: both;
/* 나열의 속성이 올라오는 것을 막아줌 */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가변 그리드</title>
<style>
/*
(요소의 넓이 / 컨텐츠 전체를 감싸는 요소의 넓이) * 100
% >>> 비율로의 화면 변화 100%
*/
*{
margin: 0;
padding: 0;
}
#wrapper{
width: 96%;
/* 960px/960 = 100% */
margin: 0 auto;
background-color: #6ea491;
}
header{
width: 100%;
height: 120px;
background-color: #d07f7f;
}
aside{
float: left;
width: 31.25%;
/* (300 / 960) * 100 = 31.25 */
background-color: rgb(98, 173, 95);
}
section{
float: right;
width: 62.5%;
background-color: cadetblue;
}
footer{
clear: both;
/* 나열의 속성이 올라오는 것을 막아줌 */
width: 100%;
background-color: cornflowerblue;
}
}
</style>
</head>
<body>
<div id="wrapper">
<header>가변그리드 만들어보기</header>
<aside>aside</aside>
<section>section</section>
<footer>footer</footer>
</div>
</body>
</html>(기준이 되는 요소의 넓이 / 전체를 감싸는 요소의 넓이) * 100 = %값
부모요소 100%, 자식요소 1400px일 때
(1400 / 1900) * 100 -> 73.68%
padding, margin 등의 여백값도 밖의 부모값과 나눠 100% 비율로 계산. border 값도 동일
반응형 설계 - 가변 그리드
<!-- 가변 글꼴 -->
<!--
기본 웹: px = 고정 (기본 폰트 사이즈 -> 16px
움직이는 웹(반응형) -> '가변 글꼴' 을 지정해야 함. = em, rem
em 단위: 기본 글꼴 사이즈 기준으로 변경
1em = 16px / ex) 12px -> 12/16 = 0.75em
-->
상위 요소에 font-size를 지정했을 때
div{
font-size: 1em;
/* 20px = 1em */
}
body{
font-size: 20px;
}
}em은 부모 요소를 기준으로, rem은 최상위 요소를 기준으로 삼는다.
미디어 쿼리에서 html,body의 font-size 속성만 바꿔주면 em, rem으로 지정해 놓은 폰트 크기들이 자동으로 바뀐다.
반응형 설계 - 미디어쿼리
디바이스에 따른 레이아웃 변경 시 화면 사이즈에 맞추어 css코드를 구현해주는 구문
@media screen and (조건) {스타일지정}
@media screen and (조건) and (조건) {스타일 지정}조건에 들어가는 항목
min-width: 최소 넓이 값~ (넓이 값 ~ 부터)
max-width: 최대 넓이 값 (넓이 값 ~ 까지)max-width: 지정한 최대의 너비를 유지 (스크롤 시 내용물 유지)
min-width: 전체화면에서 축소시 최소너비 유지 (스크롤 시 내용물 유지)
즉,
@media screen and (max-width: 1200px)
이렇게 사용이 가능하다. 혹은
@media (max-width: 1200px)
이렇게 사용해도 된다. 앞의 screen 접두어는 미디어 타입이다.
screen을 붙이면 미디어 타입이 스크린인 장치에서만 미디어 쿼리가 실행되고, 미디어 타입을 생략하면 모든 장치에서 미디어 쿼리가 실행된다(기본값이 @media all, 즉 모든 장치이다.)
상황에 따라 다르겠지만 주로 2번째 방식으로 많이 사용하는 듯 하다.
바깥에 부모가 존재할 때는 img 태그에
img{max-width: 100%}; 를 부여해 반응형 화면에 따라 이미지 변화 설정을 주는 것이 좋음.
화면사이즈에 대한 언습은 화면사이즈 순서에 맞춰 진행 - 스타일의 성격(마지막에 쓰인 결과가 도출)
www.evernote.com/l/AldDtLSlNLxNbp_SO-HciIQ24QOAFVJgu7E/
[심화응용] 반응형 웹, [심화응용] 반응형 설계 - 가변 그리드 [심화응용] 반응형 설계 - 미디어 쿼
[심화응용] 반응형 웹 최근 다양한 모바일기기(=디바이스)의 보급으로 하나의 웹사이트로 데스크탑, 태블릿PC, 모바일 등 다양한디바이스 해상에 따라 사이트의 레이아웃이 변환되는 것 가변그��
www.evernote.com
'Web > CSS' 카테고리의 다른 글
[CSS] float를 이용한 풀다운 메뉴 (0) 2020.05.16 [CSS] float과 부작용 해결 (0) 2020.05.16 [css] 트랜스폼 속성, 스프라이트 이미지 , 모바일 웹의 이해 (0) 2020.05.16 [CSS] 트랜지션 속성, 애니메이션 속성 (0) 2020.05.16 [CSS] 선택자의 형태, 선택자의 활용 (0) 2020.05.16