vw (현재 브라우저 폭에 비례)
vh (현재 브라우저 높이에 비례)
rem (현재 기본 폰트 사이즈에 비례)
em (현재 내 폰트 사이즈의 X배)
width: 50vw;//현재 브라우저(viewport)의 50%만큼의 폭으로 지정해주세용
height: 50vh; //현재 브라우저(viewport)의 50%만큼의 높이로 지정해주세용
width: 10rem; //기본 폰트 사이즈(16px)의 10배=160px
font-size: 1rem; //16px
font-size: 15px;
width: 20em; //15*20=300px→ 모든 곳을 rem으로 크기 지정하면 기본 font-size 가 커져도 모든게 같이 커짐!
→ 근데 요즘은 Ctrl 누르고 마우스휠 올리면 다같이 커짐..
→ 요즘은 typography 디자인할 때 px 외우기 귀찮으면 rem 쓴다
반응형 웹 만들려면 태그에 필수
<meta name="viewport" content="width=device-width, initial-scale=1.0">media query
@media screen and (max-width: 1200px) { //현재 브라우저 폭이 1200px 이하일 경우
.main-title {
font-size: 30px; //이걸 적용해주세요
}
.navbar-items {
font-size: 12px;
}
}@media screen and (max-width: 1200px) {
.main-title {
font-size: 30px;
}
}
@media screen and (max-width: 768px) {
.main-title {
font-size: 20px;
}
}- 큰 사이즈 → 작은 사이즈 순으로 작성
- 하나의 미디어쿼리에 여러개 CSS 작성 가능
- breakpoint 기준 px 값은 1200px, 992px, 768px, 576px 로 사용하자
- breakpoint 4개 넘어가면 너무 복잡하니까 3개정도로 쓰자
- media query 문법은 항상 맨 밑에 있어야 잘 동작함
print할 때 보여지는 화면
@media print and (max-width: 1200px) {
.main-title {
font-size: 30px;
}
}반응형 레이아웃 만들 때,
PC용 레이아웃 먼저 짜고 미디어쿼리로 패드, 모바일 화면 구현하기
media query 실습
- PC화면에서는 1열로, 태블릿 화면에서는 2열로, 모바일 화면에서는 4열로 보이도록 만들기
→ 가로배치 방법 : 부모요소에 display: flex, float: left;
- float: left;
<body>
<div class="container"> //가장 큰 부모요소
<div class="item"> //자식요소 총 4개
<h4 class="title">Fast Shipping</h4>
<p class="detail">Lorem ipsum</p>
</div>
<div class="item">
<h4 class="title">Good Service</h4>
<p class="detail">Lorem ipsum</p>
</div>
<div class="item">
<h4 class="title">Free Coupons</h4>
<p class="detail">Lorem ipsum</p>
</div>
<div class="item">
<h4 class="title">New Products</h4>
<p class="detail">Lorem ipsum</p>
</div>
</div>
**<div style="float: none; clear:both;"></div>** //이 이후에 float 영향X
</body>.container {
width: 80%;
max-width: 1000px;
margin: auto;
margin-top: 50px;
margin-bottom: 50px;
align-items: center;
}
.container div {
**float: left;**
**width: 25%; //4개의 아이템이 1열에 오려면 각각 25%씩 너비를 가져가야함**
text-align: center;
}
/*tablet size*/
@media screen and (max-width: 1200px) {
.container div{
**width: 50%; //4개의 아이템이 2열에 오려면 각각 50%씩 너비를 가져가야함**
}
.container {
max-width: 700px;
}
}
/*mobile size*/
@media screen and (max-width: 598px) {
.container div {
**width: 100%; //4개의 아이템이 4열에 오려면 각각 100%씩 너비를 가져가야함**
}
.container {
max-width: 300px;
}
}- display: flex;
