스마트폰의 대중화로 예전과는 달리 웹사이트 방문을 위해 사용하는 기기의 비중에 스마트폰이 압도적인 비중을 차지하기 시작했다. 그렇다고 데스크탑 화면을 버릴 순 없다. 그렇다면 우리는 둘 중 하나도 버릴 수 없다. 반응형 웹을 만들것이다.
See the Pen by Junmannn (@Junmannn) on CodePen.
아 돌려봤는데 이게 블로그에서 바로 페이지 크기 변경하면서 볼 수가 없구나 코드를 올릴게여
HTML
<body>
<div class="size-xlarge size-large size-medium size-small bgcolor"></dv>
</body>
CSS
.bgcolor {
background-color:red;
height:400px;
}
.size-xlarge{
flex:0 0 auto;
width: 50%;
}
/* media 쿼리를 쓴 부분임 이게. 0~400px 까지는 이렇게 하라*/
@media screen and (max-width:400px){
.bgcolor {
background-color:green;
}
.size-large{
flex:0 0 auto;
width: 50%;
}
}
@media screen and (max-width:300px){
.bgcolor {
background-color:blue;
}
.size-medium{
flex:0 0 auto;
width: 50%;
}
}
@media screen and (max-width:200px){
.bgcolor {
background-color:yellow;
}
.size-small{
flex:0 0 auto;
width: 50%;
}
}
미더어 쿼리에 대해 더 잘 알고 싶다면?
https://developer.mozilla.org/ko/docs/Web/CSS/@media
@media - CSS: Cascading Style Sheets | MDN
@media CSS @규칙은 스타일 시트의 일부를 하나 이상의 미디어 쿼리 결과에 따라 적용할 때 사용할 수 있습니다.
developer.mozilla.org
진짜 혹시나 해서 하는데, 웹 개발에 대한 거는 MDN에서 보는데 설마 알고 있겠지 다들? 몰랐으면 이제 알았으니 ㅇㅋ
'Font-End' 카테고리의 다른 글
| ToolTip 에서 줄바꿈 break line (0) | 2021.10.20 |
|---|---|
| vscode 프론트앤드 개꿀 플러그인 모음 (0) | 2021.10.20 |
| HTML div 요소 정렬 (0) | 2021.08.20 |
| html 테이블 - 마우스 셀 위치 하이라이트 테이블 (0) | 2021.08.20 |
| html text outline css, 텍스트 테두리 입히기 (0) | 2021.08.11 |
