(반응형)웹에서 사용하는 폰트
1.px:데스크탑이나 모바일,노트북에서 동일한 포트크기 사용
2.em:부모크기의 배수로 적용
3.rem:브라우저의 기본크기의 배수로 적용(기본크기:16px)
4.vw:브라우저의 가로너비에 영향(1vw=기본 화면 가로넓이의 1/100)
ex)가로넓이가 1000이라면 1vw=10px
font-sizer가 3vw이면 30px이다.
5.vh:브라우저의 세로너비에 영향
<style>
.wrap{
font-size:30px;
}
p{
font-size: 3em; /*부모크기의 배수로 적용되므로 30px*3=90px*/
}
h1{
font-size: 4rem; /*기본크기(16px)의 4배이므로 16*4=64px*/
}
h2{
font-size:2vw; /*기본 화면 가로 넓이의 1/100이므로 만약 가로 넓이가 1000이라면 2vw=20px*/
}
</style>
<body>
<div class="wrqp">
<h1>...<h1>
<h2>...<h2>
<p>......<p>
</div>
</body>반응형웹(responsive web)
반응형 웹:기기에 맞푸어서 웹 화면을 보여주는 웹
1.media query:반응형 웹을 만들기 위한 css
형식:@midia 미디어유형 and 조건 and 조건
ex)미디어유형이 screen이고 최소너비가 768,최대넓이가1500일경우
@midia screen and (min-width:768px) and (max-width:991px)
2.모바일-------|태블릿----태블릿 가로----|데스크탑
-------------768px-----------992p------1024px-----------
<style>
@midia screen and (max-width:767px){ /*모바일 크기일 때*/
body{
...
}
}
@midia screen and (min-width:768px) and (max-widht:1023px){ /*태블릿 크기일 때*/
body{
...
}
}
@midia screen and (min-width:1024px){ /*데스크탑 크기일 때*/
body{
...
}
}
</style>
배운 거 머리에 집어넣기 위한 블로그