1. 미디어 쿼리
width, height , color ..속성과 같은 미디어 관련 표현식을 통해 스타일이 적용되는 범위를 조절
컨텐츠를 별도로 변경하지 않아도 웹 페이지에 접속하고 있는 기기에 따라 알맞은 형태로 스타일을 조정
장점: UI 고급화, 유지관리와 업데이트
단잠: 구현이 어렵다 , 다운로드 속도가 느려진다.
@media 매체유형 and 조건...{
적용할 스타일 코드
}
매체 유형
all : 모든 매체
screen : 컴퓨터, 태블릿 , 핸드폰 ...
print : 프린터 기기
speech : 스크린 리더
모바일: ~480px
모바일 가로, 태블릿 : 480px ~767px
태블릿 가로 : 768px ~ 1023px
낮은 해상도 pc , 태블릿 가로: ~1024px
이 이후는 그냥 pc : 1024px ~
테이블 가로 : 768px ~ 1023px
모바일 가로 : ~768px
<입력 코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>미디어쿼리1</title>
<style>
body{
background-color: gold;
color: blue;
font-size: 32px;
}
@media screen and (max-width: 1024px){
body{
background-color: aqua;
color: black;
font-size: 20px;
}
@media screen and (min-width: 787px) and (max-width:1024px){
body{
background-color: black;
color: bisque;
font-size: 40px;
}
}
</style>
</head>
<body>
<h2>미디어 쿼리-1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae neque eligendi vero ipsam harum corporis consequatur,
pariatur quas ad expedita suscipit itaque eos voluptas amet aspernatur
maxime ipsum ducimusloremmmdsffffffffffffffffffAsdhdfhskajldhfkjlashdkjfhakjsdhfkjash
dfkjhajksdhfjkahsdjkhfkjahsdkjfhajksdhfkjasdhfkjshdkjfhaskjdhfjkash
dfkjasejiqwuoeiuqoiweuoiqwueoiduasdjlakjdlkjdflkashdkjfnkjsvnsjdnc;oiuroiqweur
oiq;wjdlanskcjnsdjkhasjduoqwihjfdo</p>
</body>
</html>
< 출력결과>
1번.
2번.
<설명>
min max > min 최솟값
(min-width: 787px) and (max-width:1024px)
787~1024 까지는 media 에 있는 css를 적용하고, 아닌 부분은 원래 주었던 css 의 값을 적용한다.
2. 상대 크기 em/rem
em - 단위는 사위요소 (부모) 크기의 몇배인지 나타나는 크기 (1.5em: 상위 요소의 1.5 배)
<입력 코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>em 크기 </title>
<style>
.em{font-size: 2em;}
</style>
</head>
<body>
<h2>em크기 </h2>
<div style="font-size: 10px;">
<p class="em">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Quis, tempora ea labore similique tenetur, eum ullam dolorum i
ncidunt corrupti minus reiciendis corporis, impedit natus blanditiis beatae id a
speriores maxime. Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Accusantium mollitia, nam ea ratione inventore ipsam voluptatum, animi aliquam a
rchitecto vel illum, consectetur neque unde dolore quidem dolorem fugiat quod
repellendus.</p>
</div>
</body>
</html>
<출력결과>
<설명>
em의 단위는 부모 크기의 몇배인지 나타나는 크기 라고 한다.
위의 코드에서 div 값의 인라인 스타일로 10px 을 지정해준후
문장이 써있는 p 태그의 em의 클래스 명을 넣어 스타일 코드에
font-size:2em 을 넣었다.
고로 속성이 먼저 들어가있던 10px의 폰트에 2m의 스타일 값을 주었으니 출력결과의 폰트 사이즈는
10px 의 2배 즉, 20px 이 되는셈이다.
2-1. rem
rem - 단위는 문서의 최상의 요소 (태그), 즉 html 요소 크기의 몇 배인지를 나타내는 크기
(1.5rem : html 요소의 1.5배)
<입력코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rem</title>
<style>
html{font-size: 30px;}
.rem{font-size: 1.5rem;}
</style>
</head>
<body>
<h2>rem 크기</h2>
<p class="rem">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius ipsa voluptates quas iste ea ratione fugit provident at et reprehenderit sed excepturi nam corrupti ab, maiores doloribus voluptate a veniam?
</p>
</body>
</html>
< 출력결과>
<설명>
위에 설명했듯 rem은 html 요소 크기의 몇 배인지를 나타내느 크기 임으로
아래 코드를 보았을때 문장에 나오는 폰트 사이즈는
30px 의 1.5 배 즉, 45px이 나와야 한다.
html{font-size: 30px;}
.rem{font-size: 1.5rem;}
3. 퍼센트 크기
- 퍼센트크기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>퍼센트크기</title>
</head>
<body>
<h2>퍼센트크기</h2>
<div id="container1">1</div>
<div id="container2">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div id="container3">
<div class="box-2"></div>
</div>
</body>
</html>
<스타일 코드>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
}
#container1 {
width: 100%;
height: 5%;
background-color: slategray;
opacity: 0.8;
}
#container2 {
width: 30%;
height: 90%;
background-color: rgb(241, 163, 18)
opacity: 0.8;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto;
}
.box {
width: 49%;
height: 33%;
background-color: bisque;
}
#container3 {
width: 50%;
background-color: red;
}
.box-2 {
width: 50%;
height: 10px;
background-color: blue;
margin: 0 auto;
}
</style>
<출력결과>
<설명>
맨위에 올라갈 #1.container 의 크기와 속성을 넣어준다.
#container 2 에 들어갈 크기과 값, 배경을색상을 넣어준다.
위에 올라갈 <div class="box"> 에 다가
크기와 색상, 값 을 넣어준다. 여기에 들어가는 크기와 , 넓이가
#container2 에 들어간 크기보다 작아서 선들이 그어져 있는것 처럼 보인다.
'Class > Frontend' 카테고리의 다른 글
| [프론트 엔드 DAY11] (0) | 2022.05.26 |
|---|---|
| [프론트 엔드 DAY10] (0) | 2022.05.25 |
| [프론트 엔드 DAY08] (0) | 2022.05.23 |
| [프론트 엔드 DAY07] (1) | 2022.05.09 |
| [프론트 엔드 DAY06] (0) | 2022.05.02 |
댓글