<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>태그 셀렉터 만들기</title>
<style>
body {
background-color : pink;
color : blueviolet;
}
h3, span {
color : blue;
}
h3 {
text-align : right;
}
span { background-color : skyblue; }
</style>
</head>
<body>
<h3>소연재</h3>
<hr>
<p>저는 체조 선수 소연재입니다. <span>음악</span>을 들으면서 책읽기를 좋아합니다.
<span>김치 찌개</span>와 <span>막국수</span>무척 좋아합니다.
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>텍스트와 폰트</title>
<style>
p {
text-indent : 1em;
background-color : AliceBlue;
color : brown;
font : "Lucida Console", "Sans-Serif"";
font-size : 15px;
}
span {
font-size : 1.5em;
text-decoration: underline;
}
</style>
</head>
<body>
<h3>텍스트와 폰트</h3>
<hr>
<p>
AliceBlue 바탕색에 Brown 색의 "Lucida Console" 폰트로 10px 크기이고 <span> 저는 이보다 1.5배 큽니다.</span></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>색 이름과 코드</title>
<style>
div {
width : 60px;
}
</style>
</head>
<body>
<h3>색 이름과 코드</h3>
<hr>
<table border="1">
<thead>
<tr>
<th>이름</th>
<th>코드</th>
<th>색</th>
<th>이름</th>
<th>코드</th>
<th>색</th>
</tr>
</thead>
<tbody>
<tr>
<td>Brown</td>
<td>#A52A2A</td>
<td><div style="background-color:#A52A2A;"> </div></td>
<td>DeepSkyBlue</td>
<td>#00bFFF</td>
<td><div style="background-color:#00bFFF;"> </div></td>
</tr>
<tr>
<td>BlueViolet</td>
<td>#8A2BE2</td>
<td><div style="background-color:#8A2BE2;"> </div></td>
<td>Gold</td>
<td>#FFD700</td>
<td><div style="background-color:#FFD700;"> </div></td>
</tr>
<tr>
<td>DarkOrange</td>
<td>#FF8C00</td>
<td><div style="background-color:#FF8C00;"> </div></td>
<td>OliveDrab</td>
<td>6B8E23</td>
<td><div style="background-color:#6B8E23;"> </div></td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>클래스 셀렉터</title>
<style>
.main { background-color : #00bFFF }
.headline {
font-size : 2em;
color : #A52A2A;
text-align : center;
}
body { color : blue; }
/*div.help { color : blue; }*/
p.help { color : red; font-size : 1.5em }
#hot { background-color : #FF8C00; /*color : blue;*/ }
</style>
</head>
<body class="main">
<h3 class="headline">클래스 셀렉터</h3>
<hr>
<div class="help">도움말</div>
<p class="help">!!경고 메시지</p>
<p id="hot">뜨거운 태양</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>셀렉터</title>
<style>
.main { background-color : #00bFFF; }
h3 { color : #6B8E23; font-size : 1.5em; }
div#center { text-align: center; }
div > strong { background-color : yellow; color : blue;}
p { text-indent : 3em; }
p > em { font-style : italic; color : #6B8E23; }
div.indent strong { color : red; }
</style>
</head>
<body class="main">
<h3>얼굴</h3>
<hr>
<div id="center"><strong>박인희</strong></div>
<div class="indent">
<p><em>길</em>을 걷고 산들 무엇하리
<strong>꽃</strong>이 내가 아니듯 내가
<strong>꽃</strong>이 될 수 없는 지금...</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>링크 꾸미기</title>
<style>
a { text-decoration : none; }
a:hover { text-decoration : underline; color : violet; }
</style>
</head>
<body>
<h3>링크 꾸미기</h3>
<p>초록색에 밑줄 없는 링크. 마우스를 올리면 밑줄과 violet 색으로 변경</p>
<hr>
<ul>
<li><a href="http://naver.com">네이버 사이트</a></li>
<li><a href="http://google.com">구글 사이트</a></li>
</ul>
</body>
</html>
|
|
'IT > Css' 카테고리의 다른 글
| css3 - 레이아웃 배치, 자바스크립트 submit 제한걸기, radio, checkbox, select, textarea (0) | 2018.08.29 |
|---|---|
| css3 - 레이아웃 배치 header, nav, section, footer, float (0) | 2018.08.28 |
| css3 - float 배치, 변환(transform rotate), 전환(transition), 리스트로 수직 메뉴 만들기, list float 응용, 애니메이션 응용 keyframes (0) | 2018.08.22 |
| css3 - :hover 활용, 이미지 테두리 만들기, text-shadow와 box-shadow (0) | 2018.08.21 |
| css3 - 배치, 리스트 꾸미기, 표 꾸미기, 폼 꾸미기 (0) | 2018.08.20 |