CSS 블록
head의 style 태그 내부에 사용
선택자 {스타일속성: 스타일값;}
ex) h1 {color: red;}
h1 태그를 사용할 시 글자 색을 빨간색으로 변경
선택자 종류 |
선택자 모습 |
설명 |
전체 선택자 |
* |
HTML 내부의 모든 태그를 선택한다. |
태그 |
ex) h1 |
특정 태그를 선택한다. |
#아이디 |
ex) #test |
아이디 속성을 가진 태그를 선택한다.(div id="test") |
.클래스 | ex) .test | 특정한 클래스를 가진 태그를 선택한다.(class="test") |
후손 선택자 | 태그A 태그B | 태그A의 후손에 위치하는 태그B를 선택한다. |
| 속성 선택자 | 선택자[속성] | 특정한 속성이 있는 태그를 선택한다. |
선택자[속성=값][속성=값] | 특정한 속성 안의 값이 특정 값과 같은 문서 객체를 선택한다. | |
| 문자 선택자 | 선택자[속성~=값] | 속성의 값이 특정 값을 단어로 포함하는 태그 선택 |
| 선택자[속성|=값] | 속성의 값이 특정 값을 단어로 포함하는 태그 선택 | |
| 선택자[속성^=값] | 속성의 값이 특정 값으로 시작하는 태그 선택 | |
| 선택자[속성$=값] | 속성의 값이 특정 값으로 끝나는 태그 선택 | |
| 선택자[속성*=값] | 속성의 값이 특정 값을 포함하는 태그 선택 | |
웹매트릭스(webmatrix)를 이용해 각 선택자를 연습하면 좋습니다.
[예제] 전체 선택자
<head><style>
* {color: red;}
</style></head>
전체 태그의 글자 색을 빨간색으로 변경
[예제] 태그 선택자
<head><style>
p {color: blue;}
</style></head>
<p>태그의 글자 색을 파란색으로 변경
[예제] 아이디 선택자
<head><style>
#font {color: yellow;}
</style></head>
<body>
<div id="font">Hi. guest!</div>
</body>
font 아이디의 Hi. guest! 글자 색을 노란색으로 변경
아이디는 1개만 쓰기를 권장한다.
[예제] 클래스 선택자
<head><style>
.font {color: green;}
</style></head>
<body>
<ul>
<li class="font">Hi. guest!</li>
<li>Hi. guest!</li>
</ul>
</body>
font 클래스가 들어있는 li 의 글자 색을 초록색으로 변경
여러 개의 클래스 선택자를 사용할 때는
후손 선택자처럼 li.font 를 이용하도록 한다.
ex> <h1 class="font">Hi. guest!</h1>
위의 h1의 클래스가 font 이지만 li.font 클래스 이므로 <li>가 아니기 때문에 속성이 바뀌지 않는다.
[예제] 속성 선택자
<head><style>
input[type=mail] {background: blue;}
</style></head>
<body>
<form>
<input type="mail" />
</form>
</body>
input 태그 중에서 type 속성의 mail 의 배경색을 파란색으로 설정한다.
[예제] 문자 선택자
<head><style>
a[href$=com] {color: red;}
</style></head>
<body>
<a href="www.naver.com">네이버</a>
<a href="www.daum.net">다음</a>
</body>
<a> 태그의 href에서 com으로 끝나는 태그의 글자색을 빨간색으로 설정한다.
[예제] 후손 선택자
<head><style>
#member h1 {color: blue;}
</style></head>
<body>
<div id="member">
<h1>Hi. Guest!</h1>
<p>Hello. Here is heit.tistory.com.</p>
</div>
아이디 태그(#) member에 속해있는 <h1>태그의 글자색을 파란색으로 설정한다.
'사이버보안 1학년 1학기 > 웹페이지' 카테고리의 다른 글
| HTML 5 배우기. HEAD의 Title 과 Meta (0) | 2014.04.17 |
|---|---|
| Webmatrix 웹매트릭스 설치방법 (0) | 2014.04.17 |
| HTML의 기초 (0) | 2014.04.17 |
