반응형 웹, 반응형 디자인(Responsive Web) :
화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌어 동작하게 되는 것.
미디어 쿼리
: 화면의 여러가지 특성들에 따라서 어떠한 조건을 만족할 때만 CSS 내용이 동작하게 하는 것
<style>
div{
border:5px solid green;
font-size:60px;
}
@media(min-width:800px){
div{
display:none;
}
}
</style>
</head>min-width : 최소 800px -> 800픽셀 이상부터 효과가 적용된다.
max-width : 최대 800px -> 800픽셀 이하부터 효과가 적용된다.
* 적용
@media(max-width:800px){
#grid{
display:block;
}
#grid ul{
border-right:none;
}
h1 {
border-bottom:none;
}
}
</style>block-level element는 화면 전체를 사용.
반응형 웹사이트를 위해서는 미디어 쿼리를 더욱 공부할 것!
중복의 제거 <link> 태그
<link rel="stylesheet" href="style.css">
재사용성, 사용성이 높아짐. 동시 수정 가능
캐싱 (저장하다) : style.css 한 번 다운받으면 파일이 바뀌기 전까지는 웹브라우저가 저장해두었다가
이후 style.css 요청받으면 저장된 결과를 가져와 속도를 높일 수 있다.
중복 제거 -> 재사용성, 가독성 높이고, 유지보수를 편리하게 만들기.
CSS를 지탱하는 중요한 뿌리 : 선택자와 속성 !
나에게 남은 의문점들
- 폰트 적용
- 반응형 웹을 위한 미디어쿼리
- <style media="screen">
- <html lang="en" dir="ltr">
- 사진 가운데로 옮기는 방법은 div 뿐?
'오늘은 공부 중 > 강의 공부' 카테고리의 다른 글
| [생활코딩] WEB2 CSS. 선택자와 속성 (0) | 2021.06.17 |
|---|---|
| [생활코딩] WEB1 마무리 + 코드의 힘 + 웹사이트 파비콘 추가하기 (0) | 2021.06.12 |
| [생활코딩] web. 웹서버 운영하기 (0) | 2021.06.08 |
| [생활코딩] 서버와 클라이언트, 웹호스팅 (0) | 2021.06.03 |
| [생활코딩] 웹. 태그와 속성 (0) | 2021.06.02 |