CSS 강좌 02강 - CSS 선택자
※CSS 선택자란..
CSS 선택자는 CSS를 이용해 스타일을 적용하고자 하는 태그를 지정해주는 것을 의미합니다.
태그명으로 선택자를 지정할 수 있고, 아이디나 클래스로 선택자를 지정할 수 있습니다.
※type 선택자
▷특정 태그명을 가진 엘리먼트 전체를 제어하기 위해서 사용합니다.
▷type 선택자를 이용하여 스타일을 적용하게 될 경우 같은 type의 모든 태그에 스타일이 적용됩니다.
사용법)
태그명{
color:blue;
}
예제)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Go Learning! </title>
<style type="text/css">
h1{
color:blue;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<h1>Go Learning!</h1>
<h1>Funny Web!</h1>
<h1>You Joking?</h1>
</body>
</html>
위와 같이 코딩을 하면 h1 type의 모든 태그에 스타일이 적용됩니다.
다른 type의 태그도 마찬가지 입니다.
※아이디 선택자
▷아이디 선택자는 아이디를 가지고 있는 특정한 객체에 스타일을 적용합니다.
▷id 속성은 전체 문서에서 하나의 태그를 식별하기 위해서만 사용합니다.
▷아이디 선택자는 우선순위가 가장 높습니다.
사용법)
#아이디{
color:blue;
}
예제)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Go Learning! </title>
<style type="text/css">
#reply{
color:blue;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="reply">
Go Learning!
</div>
</body>
</html>
※클래스 선택자
▷클래스 선택자는 클래스를 가지고 있는 모든 객체에 적용됩니다.
▷3학년 3반의 담임선생님은 홍길동 선생님 이다.
▷3학년 3반 = 클래스, 홍길동 선생님 = 스타일
사용법)
.클래스{
color:blue;
}
단일로 지정이 가능하고 혹은 여러개의 클래스를 동시에 적용시킬 수 있습니다.
여러개의 클래스를 나열할 경우는 , 로 구분합니다.
.클래스, .클래스, .클래스{
color:blue;
}
예제)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Go Learning! </title>
<style type="text/css">
.memo{
color:red;
}
.comment, .reply{
color:blue;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="memo">
Go Learning!
</div>
<div class="comment">
Go Learning!
</div>
<div class="reply">
Go Learning!
</div>
</body>
</html>
모든 코드는 직접 코딩하면서 테스트를 해보세요 :)
예제파일 다운로드
02.zip'코딩이야기 > CSS' 카테고리의 다른 글
| CSS 강좌 06강 - CSS 링크/표/배경 스타일 (0) | 2016.03.05 |
|---|---|
| CSS 강좌 05강 - CSS font 스타일 (0) | 2016.03.03 |
| CSS 강좌 04강 - CSS 텍스트 스타일 (0) | 2016.03.03 |
| CSS 강좌 03강 - CSS 선택자 조합 (1) | 2016.03.03 |
| CSS 강좌 01강 - CSS 시작하기(CSS개념) (7) | 2016.03.02 |