<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<h1>MY HOMEPAGE</h1>
<hr>
</div>
<div>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVASCRIPT</li>
<li>JQUERY</li>
</ul>
<hr>
</div>
<div>
<h1>What is HTML5?</h1>
<p>HTML5 is gooooooooood</p>
<hr>
</div>
<div>
<p>xxx 주식회사 서울시 oo구 oo동</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
background: #ffd800;
}
/* div의 배경색을 정한다. 16진수에 맞춰서 R,G,B 코드 적는다.*/
</style>
</head>
<body>
<h1>제목</h1>
<p>본문</p>
<div>
<h1>제목</h1>
<p>본문</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
color: #ffd800;
}
p {
background-color: #ff0000;
}
</style>
</head>
<body>
<header>
<h1>oo 주식회사</h1>
</header>
<nav>
<ul>
<li>회사소개</li>
<li>제품소개</li>
<li>고객센터</li>
<li>공지사항</li>
</ul>
</nav>
<section>
<p>
우리 회사는 50년 전통의 역사와 뛰어난 기술을 바탕으로 좋은 회사 입니다.
</p>
</section>
<footer>
<p>서울시 oo구 oo동 oo빌딩</p>
</footer>
</body>
</html>
li, p, div {
/* 원하는 기능 넣기 */
}
li, p, h1 {
color : blue;
}
h1 {
color : yellow;
} /* h1은 yellow가 적용된다 */
* {
background : aquamarine;
color : yellow;
}
html에 줄 때는 class="menu", id="footer"
css에서는 .menu{}, #footer{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.menu {
color: red;
font-weight: bold;
font-size: 30px;
}
.yellow {
background: #e0e036;
}
#footer h1 {
background: lightskyblue;
}
</style>
</head>
<body>
<div id="header">
<h1 class="yellow">HEADER</h1>
</div>
<div id="wrap">
<div id="content">
<h1 class="yellow">CONTENT</h1>
<ul>
<li class="menu">menu1</li>
<li>menu2</li>
<li class="menu">menu3</li>
<li>menu4</li>
<li class="menu">menu5</li>
</ul>
<ol>
<li class="menu">menu1</li>
<li>menu2</li>
<li class="menu">menu3</li>
<li>menu4</li>
<li class="menu">menu5</li>
</ol>
</div>
<div id="side_banner">
<h1>BANNER</h1>
<a href="http://www.sba.seoul.kr" target="_blank"><img
src="http://www.sba.seoul.kr/kr/images/footer/f_logo.png"></a>
</div>
</div>
<div id="footer">
<h1>FOOTER</h1>
</div>
</body>
</html>
#header, #wrap, #footer {
border: 1px solid #cccccc;
width: 500px;
}
div li {
background-color: red;
}
div p {
font-size: 25px;
}
div>h1 {
font-weight: bold;
color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h3~div {
font-size: 10px;
color: orange;
}
/* h3 기준으로 밑에 있는 div 모두 */
h3+div {
font-size: 20px;
font-weight: bold;
color: blue;
}
/* h3 기준으로 바로 밑에 있는 div */
#title~div {
width: 300px;
background: yellow;
}
/* id="title" 적용된 태그 기준으로 밑에 있는 div 모두 */
</style>
</head>
<body>
<h3 id="title">동위 선택자(+, ~)</h3>
<div>div_01</div>
<div>div_02</div>
<div>div_03</div>
<div>div_04</div>
<div>div_05</div>
</body>
</html>
예제 파일
내가 만든 파일