1. 전체 선택자
<style>
*{
color:red;
}
</style>
</head>
<body>
<h1> 전체 선택자 </h1>
<p>전체 선택자는 모든 요소를 한번에 선택할수 있다.</p>
</body>
2.아이디 선택자 #
3. 클래스 선택자 .red{}
4. 그룹선택자
여러 선택자를 하나로 그룹지을때 사용
p, #title , .red {
color:red;
}
5. 자식 선택자: 부모 요소의 하위에 있는 자식 요소에 스타일 적용할때 사용
.box >p { // class 속성값이 box 인 요소 + 자식 관계에 있는 p 태그
color:red;
}
6. 가상요소 선택자
:: before 콘텐츠 앞의 공간을 선택
:: after 콘텐츠 뒤의 공간을 선택
7. 동적 가상클래스 선택자
:hover 마우스 올리면 해당 태그 지정
:active 요소를 마우스로 클릭하고 있는 동안 해당 태그 선택자로 지정
8. 구조적 가상 클래스 선택자
9. css는 같은 태그에 중복해서 스타일이 지정되더라도 개별성 규칙점수에 의해 스타일이 결정된다.
10. 절대단위px vs 상대 단위 %/em / rem/ vw(뷰포트의 너비기준으로 상대적 크기)/ vh (뷰포트의 높이를 기준으로 상대적 크기
'【축 완독】 > ★완★[코딩자율학습단10기]HTML+CSS+자바스크립트' 카테고리의 다른 글
| [코딩자율학습단10기]HTML+CSS+자바스크립트8일차p.242-276 (0) | 2024.10.08 |
|---|---|
| [코딩자율학습단10기]HTML+CSS+자바스크립트 7일차 p.170-241 (0) | 2024.10.08 |
| [코딩자율학습단10기]HTML+CSS+자바스크립트 5일차 p.132~139 (0) | 2024.10.08 |
| [코딩자율학습단10기]HTML+CSS+자바스크립트 4일차 p.60~126 (0) | 2024.10.05 |
| [코딩자율학습단10기]HTML+CSS+자바스크립트 3일차p.60~126 (0) | 2024.10.05 |
