반응형
레이아웃
<!DOCTYPE html>
<html>
<head>
<title>레이아웃 테스트</title>
<link href="resource/css/common.css"
type="text/css" rel="stylesheet" />
<style>
div{background-color: orange;}
</style>
</head>
<body>
<header>
<h1>LOGO</h1>
</header>
<h2>DIV</h2>
<div style="background-color: blue;">첫번째</div>
<div>두번째</div>
<div>세번째</div>
<h2>SPAN</h2>
<span style="background:pink;">첫번째</span>
<span>두번째</span>
<span>세번째</span>
</body>
</html>CSS
<!DOCTYPE html>
<html>
<head>
<title>CSS TEST</title>
<style>
*{ color:blue; font-size:30px; }
h2{color: red;}
p{color: red;}
h2, p{color: red;}
#header{background-color: grey;}
#footer{background-color: beige;}
.black{ color: black;}
input[type="password"]{ color: red;
font-size: 35px; }
#header > h2{color: blueviolet; font-size: 40px;}
li:hover{ background-color: gold; font-size: 35px; }
li:active{ color: white; }
input:enabled{background-color: gold;}
input:disabled{background-color: black;}
input:focus{background-color: white; color: blue;}
input:checked{width:30px; height: 30px;
background-color: gold;}
input[type="checkbox"]+label{ color: black; }
</style>
</head>
<body>
<div id="header">
<h2 class="black">CSS 시작</h2>
<p class="black">CSS 를 이용해 이제 꾸밀 수 있습니다.</p>
<h2>자식인가</h2>
<div>
<h2>자식인가</h2>
<p>후손인가</p>
</div>
</div>
<div>
<input type="text" /><br/>
<input type="password" /><br/>
<input type="text" disabled="disabled" /><br/>
<input type="checkbox" id="chk_agree" />
<label for="chk_agree">회원가입동의</label>
<br/>
<ul>
<li>home</li>
<li>profile</li>
<li>photo</li>
<li>contact</li>
</ul>
</div>
<div id="footer">
<h2 class="black">CSS 시작</h2>
<p>CSS 를 이용해 이제 꾸밀 수 있습니다.</p>
</div>
</body>
</html>반응형
'웹프로그래밍 기초 > A반소스자료' 카테고리의 다른 글
| 디스플레이속성 과 폰트속성 (1) | 2023.04.27 |
|---|---|
| CSS 테스트 (0) | 2023.04.06 |
| table & form Tag (0) | 2023.03.23 |
| 이미지와 멀티미디어 Tag (0) | 2023.03.23 |
| Text & List 태그 (0) | 2023.03.23 |
댓글