<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  * { margin : 0; padding : 0; box-sizing : border-box; }
  li { list-style-type : none; }
  header { height : 80px; padding : 30px 0 0 30px; background-color : #33b30b;
	   color : #ffffff; }
  .row { margin-top : 10px; }
  .row::after { content : ""; clear:both; display:block;}

  /* ::after : 선택자는 요소 다음에 가상 요소(pseudo element)를 생성한다.
    content 속성이 이 선택자와 같이 사용되는데 content 속성에 의해 콘텐츠(문자열, 속성 등)를 삽입한다.
    일반적으로 content 속성은 장식용 텍스트(특수문자)를 추가할 때 사용된다. 
    
    예를들어 
    a : :after { content : "->"; } 하면 a태그(링크)가 걸린 글자 뒤에 화살표 ->를 추가하게 된다. 
    p : :after {content : "*" ; } 하면 p태그의 내용 앞에 *을 삽입한다.

    여기에는 
    content : ""; 는 클래스 row 다음에 content 속성으로 빈 텍스트 (NULL) 을 넣는다
    clear : both 는 선택된 요소에서 사용된 float(float:left나 float:right) 를 해제한다.
    display : block;은 이 가상 요소의 display 속성을 block으로 설정한다. */
    
  .menu li { padding : 10px; margin-bottom : 12px; background-color : #3ea3d9;
  	     color : #ffffff; box-shadow : 3px 3px 5px #aaaaaa; }
  .menu a:link, .menu a:visited, .menu a:hover, .menu a:active {
  	color : #ffffff; 	text-decoration : none; }
  .menu li:hover {
  	background-color : orange;
}
section p {
	line-height : 150%;
	padding-top : 10px;
}
footer {
	height : 80px;
	background-color : #eeeeee;
  	color : #000000;
  	text-align : center;
  	font-size : 0.9em;
  	padding-top : 30px;
  	margin-top : 10px;
}
/* 데스크 탑 */
.col_1 {width : 8.33%;}
.col_2 {width : 16.66%;}
.col_3 {width : 25%;}
.col_4 {width : 33.33%;}
.col_5 {width : 41.66%;}
.col_6 {width : 50%;}
.col_7 {width : 58.33%;}
.col_8 {width : 66.66%;}
.col_9 {width : 75%;}
.col_10 {width : 83.33%;}
.col_11 {width : 91.66%;}
.col_12 {width : 100%;}
[class*="col_"] {
  	float : left;
  	padding : 15px; 
}
/* 미디어 쿼리 */
@media only screen and (max-width : 768px) {
/* 스마트 폰 */
  	[class*="col_"] {
         width : 100%;
        }
    }        
</style>
</head>
<body>
<header>
	<h3>웹 프로그래밍 강좌</h3>
</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="#">자바스크립트/jQuery</a></li>
		</ul>
	</nav>
	<section class="col_9">
		<h2>웹 페이지란?</h2>
		<p>웹 페이지는 웹 서핑을 할 때 보는 각각의 화면을 말한다. 웹 페이지는 HTML과 CSS로 구성된 HTML 문서와 관련된 이미지, 동영상, 음악 파일 등의 데이터 파일로 구성된다.</p>
		<p>웹 브라우저는 웹 서버에서 보내온 웹 페이지에 관련된 파일들을 해석하여 브라우저 화면에 내용을 보여준다.</p>
	</section>
</div> <!-- row -->
<footer>
	<p>Copyright 2021. (goldmont) all rights reserved.</p>
</footer>
</body>
</html>
