미디어 쿼리를 활용하면
width에 따라 CSS를 따로 작성할 수 있음
<style>
/* 0에서 500px까지 CSS */
@media screen and (min-width: 0px) and (max-width: 500px) {
ul {
border: 1px solid black;
display: flex;
flex-direction: column;
font-size: 30px;
}
}
/* 501px 부터 css */
@media screen and (min-width: 501px) {
ul {
border: 1px solid black;
display: flex;
font-size: 20px;
/* 요소 주위로 동일 간격 */
justify-content: space-around;
}
}
</style>
</head>
<body>
<ul>
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
</ul>
</body>
<적용모습-화면 사이즈 바꿔가며 확인해보기>
- 첫번째
- 두번째
- 세번째
[화면이 500px보다 작을 때]
/*컬럼 방향으로 정렬*/
display: flex;
flex-direction: column;
/*폰트사이즈 30px*/
[화면이 500px보다 클 때]
/*기본 가로 정렬*/
display: flex;
/*폰트사이즈 20px*/
/*요소 주위로 동일 간격*/
justify-content: space-around;
'IT > 웹개발개발공부' 카테고리의 다른 글
| Java Script 대신 PHP 쓰는 이유-서버 사이드 스크립트 특징 (0) | 2024.05.06 |
|---|---|
| 명령프롬프트에서 원하는 폴더에서 vsc실행 (0) | 2024.02.22 |
| 애플,삼성 모델 별 viewport sizes (화면사이즈,해상도) (0) | 2024.02.03 |
| [HTML5] table 태그, 셀 병합 (0) | 2024.02.03 |
| 프론트엔드 언어의 폴더 이동 방법 (0) | 2024.02.03 |
