2015. 5. 17. 19:30 인터넷/웹사이트/CSS
CSS 기초
형식: 선택자 {스타일속성: 스타일 값;} -> "시.시.콜.콜." (스타일시트는 콜론과 세미콘론)
예: <style>h1 {color : red; }</style>
선택자:
- 전체선택: *
- 태그선택: h1
- 아이디선택: #아이디
- 클래스선택: .클래스
- (태그)속성의 타잎선택: input[type=text]
- (태그)속성값의 문자열선택: input[type=text]
- (태그)속성의 이벤트선택: a:active / a:hover
- (태그)속성의 상태선택: input:checked / input:focus / input:enabled /
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>:::Welcome to LikeTEH:::</title>
<style>
* {color:red;}
h1 {color:blue;}
#lbl_name {background:green;}
.input {background:yellow;}
input[type=tel] {color:pink;}
input[name*=a] {color:black;}
input:focus{background:orange;}
a:hover{color:azure;}
a:active{color:purple;}
</style>
</head>
<body>
<h1>Hello World!</h1>
<a href="#">빈 링크1입니다.</a><br />
<a href="#">빈 링크2입니다.</a>
<form action="action.asp" method="get">
<label id="lbl_name">이름</label>
<input class="input" type="text" name="name" /><br />
<label id="lbl_address">주소</label>
<input class="input" type="text" name="address" /><br />
<label id="lbl_cellphone">전화</label>
<input type="tel" name="tel" value="(),- 없이 써 주세요^^" /><br />
<input type="submit" />
</form><br />
</body>
</html>
