반응형 디자인(반응형 웹, Responsive Web)
화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것
이를 css를 통해서 구현하기 위한 핵심적인 개념인 Media Query
<style>
div{
border:10px solid green;
font-size:60px;
}
@media(max-width:350px){
div{
display:none;
}
}
</style>
어떠한 조건을 만족할 때만 CSS의 내용이 동작하도록 하는 것
위에는 화면의 폭이 350px일 때까지만 동작하도록 하는 코드이다. 즉 350px보다 작을때 div 태그가 동작하도록 한다.
반대로, min-width:800px의 조건은 화면의 크기가 800px보다 크다면 div 태그가 동작하도록 하는 코드이다.
즉 최소 너비가 800px일 때부터 동작하는 것이다.
@media(max-width:300px){
#grid{
display: block;
}
ol{
border-right:none;
}
h1{
border-bottom:none;
}
}CSS 코드의 재사용
css코드를 따로 작성하여 css파일로 저장하고 이 파일을 link(연결)하여 html에서 사용하도록 한다.
body{
margin:0;
}
a {
color: black;
text-decoration: none;
}
h1 {
font-size: 45px;
text-align: center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
ol{
width: 100px;
border-right: 1px solid gray;
margin: 0;
padding: 20px;
}
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
#grid ol{
padding-left: 33px;
}
#grid #article{
padding-left: 25px;
}
@media(max-width:300px){
#grid{
display: block;
}
ol{
border-right:none;
}
h1{
border-bottom:none;
}
}style.css
<head>
<title>WEB1 - html</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>html파일에서는 link로 연결만 해주면 똑같은 css를 적용시킬 수 있다.
이때 style.css라는 파일을 다운로드하여 내부에서 적용시키는 것이다.
이로인해 코드의 재사용성이 높아지고 사용입장에서는 내부 원리를 몰라도 사용할 수 있기에 사용성이 높아진다.
네트워크적 측면에서는 웹페이지 안에 css를 직접 넣는 것이 효율적이지만, 캐싱의 효율성 때문에
한 번 style.css를 받았다면 style.css 파일이 바뀌기 전까지는 이 웹브라우저가 이 파일을 컴퓨터 내부에 저장하고
다시 style.css를 요청하면 내부에 저장된 해당 파일을 불러와 사용한다.
이때, 네트워크를 통하지 않기 때문에 속도가 빨라질 수 있다.
이것이 바로 style.css를 캐싱하여 얻을 수 있는 장점이다.
웹페이지를 훨씬 빨리 보여줄 수 있으며 트래픽을 줄일 수도 있다.
'Web' 카테고리의 다른 글
| [Paging] 페이지네이션을 알고 사용하자 (0) | 2023.10.02 |
|---|---|
| [Web] 서블릿(Servlet)이란 (0) | 2022.08.05 |
| [부스트코스] 웹 프로그래밍(풀스택) - Day 1 (0) | 2022.04.06 |
| 생활코딩 JavaScript 정리 (0) | 2022.01.24 |
| 생활코딩 css 정리(Day 1) (0) | 2022.01.14 |
