Jam's story

[HTML] 반응형 웹 본문

WEB/HTML

[HTML] 반응형 웹

애플쩀 2022. 5. 19. 17:51 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
box-sizing: border-box;
}
body{
font-family: Ver dana;
color: black;
}

#header {
 background-color: #892DE5;
 color:white;
 padding:15px;
text-align:left;

}
#footer{
	   background-color: #0099cc;
	 color:white;
 padding:15px;
text-align:center;
margin-top:7px;
}

.menu{
width: 100%;
float:right;
}

.menu a{
background-color: #4AB7E2;
color:white;
display:block;
width:100%;
text-align:left;
text-decoration:none;
margin-top:7px; 
padding:5px;

}

.main{
width:100%;
padding: 0 20px;
float:right;
}
.right{
width:100%;
background-color: #4AB7E2;
color:white;
text-align: center;
margin-top:7px;
padding: 15px;
float:right;
}
</style>

<style>
@media only screen and (min-width:600px){
.menu { width:30%;}
 .main { width:70%;}
 .right{ width:100%;}
}
@media  only screen and  (min-width:768px){
.menu { width:20%;}
 .main { width:60%;}
 .right{ width:20%;}
 
 
}


</style>
</head>
<body>
   <div id="header">
      <h1>Chania</h1>
   </div>
   <div style="overflow: auto"> 

      <div class="menu">
         <a href="#">the Flight</a>
         <a href="#">the City</a>
         <a href="#">the Island</a>
         <a href="#">The food </a>
      </div>   
      <div class="main">
         <h1>the City</h1>
         <p>Chania the capital the Chania regoioin on the ulpa recusandae eos atque
            assumenda velit at eaque optio est?</p>
      </div>
      <div class="right">
       
         <p>    <h2>What?</h2> Chauina is the city  </p>
          <p>    <h2>Where?</h2> Create is a Greek isalnad </p>
           <p>    <h2>How?</h2> You can reach </p>
      </div>      
   </div>
   <div id="footer">Resize the browser windeot to  see thow the content </div>
</body>
</html>
Insert title here
the Flight the City the Island The food

the City

Chania the capital the Chania regoioin on the ulpa recusandae eos atque assumenda velit at eaque optio est?

What?

Chauina is the city

Where?

Create is a Greek isalnad

How?

You can reach

저작자표시 (새창열림)

'WEB > HTML' 카테고리의 다른 글

[HTML] Datalist 와 select의 다른점  (0) 2022.05.20
[HTML] API  (0) 2022.05.19
[HTML] HTML에서 유튜브 동영상 열기  (0) 2022.05.19
[HTML] audio  (0) 2022.05.19
[HTML] video  (0) 2022.05.19
'WEB/HTML' Related Articles more
Comments