CSS영역
스타일을 기술할 수 있는 영역
내부 스타일 방식
현재 이 문서에 스타일을 부여하고자 하는 스타일 정보들을
head태그 영역 안의 Style태그 내에 기입하는 방식.
html문서안에 스타일 정보를 저장하는 방식임.
인라인 스타일 방식
스타일을 부여하고자 하는 요소 내에
Style속성을 명시적으로 이용해서 직접적으로 바로 기입하는 방식
<body>
<h1 style="color : teal;">CSS 기본선택자</h1>
</body>
선택자
특정 html요소를 선택하고자 할 때 사용하는 기능
해당 요소를 선택해서 원하는 "스타일"과 기능을 적용시킬 수 있음
1. 전체선택자
모든 요소들을 모두 선택하고자 할 때 사용
[표현법]
* {
스타일속성명 : 값;
스타일속성명 : 값;
}
<style>
* {
color : red;
}
</style>
2. 태그선택자
이 문서 내에 같은 태그들을 모두 선택할 때 사용
[표현법]
태그명 {
스타일속성명 : 값;
스타일속성명 : 값;
}
<style>
p {
color : red;
}
pre {
color : blue;
}
</style>
3. 아이디선택자
문서 내에, 특정 html요소 하나만을 선택하고자 할 때 사용
단, 해당 요소 아이디 속성을 이용할 때는, 고유한 ID값(중복불가)을 부여해야 함.
[표현법]
#아이디속성값 {
스타일속성명 : 값;
스타일속성명 : 값;
...
}
<style>
#id1, #id3{
color : blue;
background-color: pink;
}
#id2{
color : green
}
</style>
4. 클래스선택자
해당 이 문서 내에, 내가 원하는 여러 개의 요소를 선택하고자 할 때 사용되는 선택자
[표현법]
.클래스속성값{
스타일속성명 : 값;
스타일속셩명 : 값;
...
}
<style>
.class1{
color : yellowgreen;
}
.test{
font-size: 30px;
}
</style>
5. id선택자 VS 클래스선택자
모든 태그 내에 공통적으로 쓸 수 있는 속성 : id, class
=> id는 문서 내에 고유한 값으로만 부여 가능, 중복이 불가함.
=> Class속성은 중복으로 여러개 사용 가능(태그 종류 상관없음)
한번에 여러개의 클래스 속성 부여 가능(띄어쓰기로 구분)
<body>
<ul>
<li class="class1">클래스 선택자1</li>
<li class="test">클래스 선택자2</li>
<li class="class1 test">클래스 선택자3</li>
<li>클래스 선택자4</li>
<li class="class1">클래스 선택자5</li>
</ul>
</body>
