반응형 디자인 / 반응형 웹
- responsive web
- 화면의 크기에 따라 최적화된 모양으로 바뀌게 하는 것
- 미디어쿼리 사용 -> 어떤 조건을 만족할 때 동작하도록 만든다.
- 예) 휴대폰 가로모드-세로모드
@media
- used in media queries to apply different styles for different media types/devices.
@media (조건) {
실행동작
}
<style>
div {
border: 10px solid green;
font-size: 60px
}
@media(min-width:800px) {
div {
display:none;
}
}
</style> 창의 최소 크기가 800픽셀이면(=크기가 800이상~부터) (true)
=>div를 표시하지 않기
<style>
div {
border: 10px solid green;
font-size: 60px
}
@media(max-width:800px) {
div {
display:none;
}
}
</style>
창의 최대 크기가 800픽셀이면(=크기가 ~799까지??왜지??) (true)
=> div를 표시하지 않기
<style>
@media (max-width:800px) {
#gridcontainer{
display:block;
}
ol {
border-right: none;
}
h1 {
border-bottom: none;
}
}
</style>창의 최대 크기가 800픽셀이면(=크기가 ~799까지) (true)
=> 1. grid 를 block 요소로 보이게 하기
2. ol태그의 오른쪽 경계선을 없애기
3. h1태그의 아래쪽 경계선 없애기
->
