13-01_media-queries2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>13-01_media-queries2</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: 35%; }
.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>웹 프로그래밍</h2>
	</header>
	<div class="row">
		<nav class="col_3 menu">
			<ul>
				<li><a href="#">웹 페이지란?</a></li>
				<li><a href="#">HTTL/CSS</a></li>
				<li><a href="#">웹 프로그래밍</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>
	<footer>
		<p>Copyright 2023. all rights reserved.</p>
	</footer>
</body>
</html>