반응형
레이아웃
<!DOCTYPE html>
<html>
<head>
<title>레이아웃</title>
<link href="resource/css/common.css"
type="text/css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<header>
<h2>DIV</h2>
<div style="background:orange;">첫번째</div>
<div>두번째</div>
<div>세번째</div>
<div></div>
</header>
<h2>SPAN</h2>
<span style="background:orange;">첫번째</span>
<span>두번째</span>
<span>세번째</span>
</body>
</html>CSS
<!DOCTYPE html>
<html>
<head>
<title>CSS 시작</title>
<style>
* {
color:orange;
font-size: 20px;
}
h2{ font-size: 30px; }
p{ font-size: 30px; }
/** 다중 선택 **/
h2, p{ font-size: 30px; }
#header{background-color: grey;}
#footer{background-color: beige;}
.red{color:red;}
input{color: blue;}
input[type="password"]{color: red; font-size: 35px;}
#header h2{color: blue;}
li:hover{color: blue;font-size: 22px;}
li:active{color: white;}
input:enabled{background-color: coral;}
input:disabled{background-color: black;}
input:focus{background-color: white; color: blue;}
input[type="checkbox"]{width: 30px; height: 30px;background-color: red;}
input:checked{width: 30px; height: 30px; background-color: blue;}
</style>
</head>
<body>
<div id="header">
<h2>CSS 테스트</h2>
<p>
Css 테스트를 하면서 익혀봅시다.
</p>
<div>
<h2>선택자 테스트</h2>
<p>후손일까 자손일까</p>
</div>
</div>
<div>
<input type="text" /> <br/>
<input type="password" /> <br/>
<input type="checkbox" /> <br/>
<input type="text" disabled="disabled" />
<ul>
<li>Home</li>
<li>Profile</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<div id="footer">
<h2 class="red">CSS 테스트</h2>
<p>
Css 테스트를 하면서 익혀봅시다.
</p>
</div>
</body>
</html>반응형
'웹프로그래밍 기초 > B반소스자료' 카테고리의 다른 글
| 디스플레이 & 폰트 스타일 (3) | 2023.04.27 |
|---|---|
| CSS TEST (4) | 2023.04.06 |
| Table & Form Tag (176) | 2023.03.23 |
| 이미지와 멀티미디어 Tag (0) | 2023.03.23 |
| Text & List Tag (3) | 2023.03.23 |
댓글