20250826 - @media 반응형
- 반응형
body{
background-color:lightblue;
}
/*화면 너비가 500 이하 일때*/
@media(max-width:500px){
body{
background-color:red;
font-size:16px;
}
}
/*화면 너비가 601 이상 일때*/
@media(min-width:601px){
body{
background-color:gold;
font-size:26px;
}
}
<h1>안녕하세요</h1>
<p>welcome</p><html>
<header></header>
<style>
body, ul, li {
margin:0;
padding:0;
list-style:none;
font-family:verdana;
}
a{
color:inherit;
text-decoration:none;
}
.navigation {
display: flex;
flex-direction: row;
justify-content: flex-end;
list-style: none;
margin: 0;
background: deepskyblue;
}
.navigation > li > a {
text-decoration: none;
display: block;
padding: 1em;
color: white;
}
.navigation > li:hover > a {
background: #1565C0;
}
@media (max-width: 800px) {
.navigation {
justify-content: space-around;
/*요소 주변에 동일한 간격 배분 (양 끝도 여백 있음)*/
}
}
@media (max-width: 600px) {
.navigation {
flex-direction: column;
padding: 0;
}
.navigation > li > a {
text-align: center;
padding: 10px;
border-top: 1px solid rgba(255, 255, 255,0.3);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.navigation > li:last-of-type > a {
border-bottom: none;
}
}
.tmenu {
display: flex;
flex-direction: row;
justify-content: flex-end;
list-style: none;
margin: 0;
background: deepskyblue;
}
.tmenu > ul > li{
display: flex;
}
.tmenu > ul > li > a {
text-decoration: none;
display: block;
padding: 1em;
color: white;
justify-content: flex-end;
}
.tmenu > ul > li:hover > a {
background: #1565C0;
}
.container {
display:flex; /* container 안의 자식 요소들이 가로 방향으로 나란히 정렬 */
flex-direction:column; /* Flexbox 레이아웃에서 자식 요소들을 세로 방향(위에서 아래로) 정렬하도록 설정하는 속성입니다. 기본값인 row가 가로 정렬이라면, column은 그 반대 방향 */
min-height:100dvh;
background-color:darkcyan;
flex-grow:0;/*Flexbox에서 요소가 남는 공간을 전혀 차지하지 않도록 설정. 0이면 절대 확장하지 않음 */
}
.container > header {
background-color:red; /* 임시 */
}
.container > section {
background-color:gold; /* 임시 */
display:flex; /* 하위 엘리멘트 적용을 위한 선언*/
flex-direction:row;
flex-grow:1;
}
.container > section > nav {
background-color:#CFCFCF; /* 임시 */
flex-basis:150px; /* 현재 기준은 width 값을 150 */
flex-shrink:0; /*줄지마세요*/
}
.container > section > nav > ul > li:hover{
background-color:black;
color:white;
cursor:pointer;
}
.container > section > main {
background-color:white; /* 임시 */
flex-grow:1;
flex-shrink:1; /*줄지마세요*/
}
.container > section > aside {
background-color:#00FCCC; /* 임시 */
flex-basis:120px;
flex-shrink:0;
}
.container > footer {
background-color:green; /* 임시 */
display:flex; /* Flexbox 레이아웃을 활성화하는 핵심 속성 */
justify-content:space-between; /* 주축(main axis)을 기준으로 자식 요소들을 가운데 정렬하는 속성
반대방향 정렬은 flex-direction: row; */
padding-left:10px;
padding-right:10px;
}
</style>
<body>
<div class="container">
<ul class="navigation">
<li><a href="#">Here</a></li>
<li><a href="#">There</a></li>
<li><a href="#">Some</a></li>
<li><a href="#">Nowhere</a></li>
</ul>
</div>
<!--
<div class="tmenu">
<ul>
<li><a href="#">Here</a></li>
<li><a href="#">There</a></li>
<li><a href="#">Some</a></li>
<li><a href="#">Nowhere</a></li>
</ul>
</div>
-->
</body>
</html>
한줄소개불가