생활코딩 7일차 [21.01.16] - CSS 마무리
<반응형 디자인>
media query (미디어 쿼리) : 다양한 웹 페이지의 환경(웹 페이지 크기, 가로 세로 방향 화면 등)에 각각 반응하여 웹 페이지의 특성이나 디자인을 다르게 하는 방법.
@media (특성) {
div {
} (특성)을 기준으로 div의 속성을 띄운다.
}
<style>
@media(min-width:500px) {
div {
display:none;
}
}
</style>코드의 의미 : width가 최소 500px일 때 display를 사라지게 한다 → width>500px 일 때 display 사라지게 한다.
자 이제 미디어 쿼리를 활용해서 웹 페이지를 크기에 따른 특성을 수정해보자.
화면이 작을 때는 목차와 본문 내용 그리고 제목의 구분선이 불필요하고, 그리드 형식으로 나열하는 것도 불필요하다.
width<800px 일 때에는 구분선과 그리드 형식의 나열을 없애는 페이지로 디자인해보자.
- 제목 'WEB' 밑의 구분선 없애기
구분선이 h1 태그의 border-bottom: 1px gray solid; 태그에서 온 것이므로 border-bottom: none; 으로 수정한다.
- 목차와 본문 사이의 구분선 없애기
구분선이 ol 태그의 border-right: 1px gray solid; 태그에서 온 것이므로 마찬가지로 border-right: none; 으로 수정한다.
- 그리드 나열방식이 아닌 그냥 밑으로 배열하기
그리드 나열방식은 #grid { display: grid; grid-template-columns:150px 1fr; } 에서 온 것이므로, grid-template-columns를 없애고, display: block으로 수정한다. (그냥 세로로 나열하는 것이 block 방식-각각의 공간을 가지면서-으로 나열하는 것이다.)
<style>
@media(max-width:800px) {
h1{
border-bottom:none;
}
#grid ol{
border-right:none;
}
#grid{
display:block;
}
}
</style>
<CSS 코드의 재사용>
'2.CSS' 페이지에서만 사용했던 디자인들을 다른 웹 페이지들에게도 적용하기위해 각각의 페이지들의 코드를 수정해보자.
이로 인해 모든 페이지의 코드들에서 <style> 의 css 디자인 코드들이 적용되었다.
하지만 여기서 의문점이 생긴다. 좋은 코딩은 효율적인 작업을 지향하고, 중복을 지양하는 코딩이다. 그런데 여기서는 모든 웹 페이지에서 긴 css 디자인 코드들이 중복된다. 극한의 상황으로 우리를 몰아가보자. 이러한 페이지들이 1억 개가 된다고 하고, 글자들의 크기나 디자인을 수정하려면 최소 1억 개의 코드들을 수정해야 한다. 얼마나 비효율적인 작업인가?
이렇게 중복되는 css 코드들을 하나의 파일로 따로 빼내면, 이 빼낸 css 코드를 한 번만 수정하면 1억 개의 웹 페이지 디자인의 수정이 적용되지 않을까?
<style> ~ </style> 내에 있는 디자인 코드들을 빼내서 따로 'style.css'라는 코드 파일로 저장한다. (<style> </style> 코드는 제외)
그리고 각각의 웹 페이지들에서 <style> 태그의 내용들은 지우고 하나의 코드로 대체한다.
<link rel="stylesheet" href="style.css">
이 코드의 의미는 css 디자인에 관한 내용을 'style.css' 파일로 link한다는 뜻이다. 즉, 다른 파일로 연결한다는 뜻이다. (병렬로)
이렇게 하면 'style.css'의 파일만 수정하면 이에 연결된 1억 개의 웹 페이지의 디자인은 한 번에 수정되는 효율성의 폭발한다.
결과는 똑같다.
이상으로 CSS 끝 !