반응형 웹 (Responsive Web)
- 브라우저(화면) 크기에 따라 요소의 크기와 배치가 유동적으로 변하는 웹
- CSS "@media" 설정으로 브라우저 크기에 맞춘 요소 설정을 변경할 수 있다.
<style>
/* 기본적으로 적용되는 css */
h1 {
font-size: 24px;
}
p {
font-size: 12px;
}
/* 브라우저 넓이 768 px 이상일 경우 적용되는 css */
@media (min-width: 768px) {
h1 {
fontsize: 36px;
}
p {
font0size: 24px;
}
}
/* 브라우저 넓이 992 px 이상일 경우 적용되는 css */
@media (min-width: 992px) {
h1 {
fontsize: 48px;
}
p {
font0size: 32px;
}
}
</style>
<h1>반응형웹 만드는 CSS 설정</h1>
<p>브라우저 넓이 조건에 맞추어 요소의 크기와 배치 방법을 변경할 수 있습니다.</p>
'Cording > HTML & CSS' 카테고리의 다른 글
[HTML / CSS] BOOT_STRAP (0) | 2020.01.13 |
---|---|
[HTML / CSS] List / List Styling (0) | 2020.01.08 |
[HTML / CSS] Float / Grid-layout / Clear (0) | 2020.01.08 |
[HTML / CSS] CSS Positioning (0) | 2020.01.04 |
[HTML / CSS] 웹디자인 참고 사이트 7선 (0) | 2020.01.02 |
댓글