HTML, CSS/day29 / 23.10.11(수) / (핀테크) Spring 및 Ai 기반 핀테크 프로젝트 구축
13_responsive
01_media-queries.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
# 반응형 웹
- 화면 해상도에 따라서 가로폭이나 배치를 변경하여 디자인하는 방법
# 미디어 쿼리
- 사용하는 기기에 따라서 style 을 지정
-->
<style type="text/css">
body {
background-color: skyblue;
}
@media only screen and (max-width : 1023px) {
body {
background-color: pink;
}
}
@media only screen and (max-width : 800px) {
body {
background-color: yellow;
}
}
</style>
</head>
<body>
<h1>미디어 쿼리</h1>
<br>
<p>화면 넓이가 8s00px 이하가 되면 배경 색상이 노란색으로 변경</p>
</body>
</html>02_media-queries2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
-->
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
header {
height: 80px;
padding: 30px 0 0 30px;
background-color: green;
color: white;
}
.row {
margin-top: 10px;
}
.row::after {
content: "";
display: block;
clear: both;
}
.menu li {
padding: 10px;
margin-bottom: 12px;
background-color: skyblue;
color: white;
box-shadow: 3px 3px 3px silver;
}
.menu a:link, .menu a:visited, .menu a:hover, .menu a:active {
color: white;
text-decoration: none;
}
.menu li:hover {
background-color: orange;
}
section p {
line-height: 150%;
padding-top: 10px;
}
footer {
height: 80px;
background-color: #cccccc;
color: #000000;
text-align: center;
padding-top: 30px;
margin-top: 10px;
}
/* 데스크 탑 */
.col_3{width: 25%;}
.col_9{width: 75%;}
[class*="col_"] {
float: left;
padding: 15px;
}
/* 스마트 폰 */
@media only screen and (max-width: 768px) {
[class*="col_"] {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<h2>웹 프로그래밍</h1>
</header>
<div class="row">
<nav class="col_3 menu">
<ul>
<li><a href="#">웹 페이지란?</a></li>
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">PHP 프로그래밍</a></li>
<li><a href="#">Javascript/jQuery</a></li>
</ul>
</nav>
<section class="col_9">
<h3>웹 페이지란?</h3>
<p>
웹 페이지는 웹 서핑을 할 때 보는 각각의 화면을 말한다.
웹 페이지는 HTML과 CSS로 구성된 HTML 문서와 관련된
이미지, 동영상, 음악 파일 등의 데이터 파일로 구성된다.
</p>
<p>
웹 브라우저는 웹 서버에서 보내온 웹 페이지에 관련된 파일들을
해석하여 브라우저 화면에 내용을 보여준다.
</p>
</section>
</div>
<!-- // row -->
<footer>
<p>Copyright 2023. all rights reserved.</p>
</footer>
</body>
</html>
Fintech