CSS 선택기 (1)

요소 선택기

현재 페이지에서 모든 < p > 태그에 적용 // 이름기반으로 HTML 요소를 선택

p {
text-align: center;
color: red;
}

ID 선택기

coat7 라는 id태그에 적용 // HTML 요소의 id 속성을 사용하여 특정 요소를 선택

#coat7 {
text-align: center;
color: red;
}

Class 선택기

Class 앞에 ( . )을 사용해서 Rcenter 라는 Class를 가진 태그에 적용 // 특정 Class를 가진 HTML 요소를 선택

.Rcenter {
text-align: center;
color: red;
}
< p class = "Rcenter" > 이 글씨는 중앙에 빨강색 < /p >
< h1 > 이 글씨는 아무것도 적용되지 않은 일반 글씨< /h1 >

p.Rcenter = Class가 Rcenter이면서 < p >태그가 붙은 요소에 적용 // ( . ) 앞에 요소( p )가 붙게되면 특정 요소도 지정가능

p.Rcenter {
text-align: center;
color: red;
}
< p class = "Rcenter" > 이 글씨는 중앙에 빨강색 < /p >
< p > 이 글씨는 아무것도 적용되지 않은 일반 글씨< /p >

두개의 클래스도 적용가능

.right {
color : blue;
font - align : right;
}
.large {
font - size : 250%;
}
< p class = "right large" > 이 글씨는 두개의 클래스를 받아 파랑색, 오른쪽 정렬, 폰트사이즈 250%로 적용된다. < /p >

CSS 범용 선택

( * )을 사용하여 HTML 모든 요소에 접근

*{
color : green;
font - size : 75%;
text - align : center;
}

CSS 그룹화 선택기

똑같은 스타일 정의를 가지고 있을때 하나로 묶는 방법 // 두개가 완벽히 같을 때(그룹화)

green {
text-align: center;
color: purple;
}
blue {
text-align: center;
color: purple;
}
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
이 두개를 하나로 묶을 시
green, blue {
text-align: center;
color: purple;
}