반응형
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | css선택자 --------------------------------------- 전체선택자 전체선택 *{ color: green; } ------------------- 유형선택자 p태그 요소들 선택 p *{ color: green; } ------------------- 클래스 선택자 -문서내 class가 텍스트인 요소 글자만 .text{ color: green; } 예시) <h1 class="text"> 텍스트만 녹색으로 </h1> <h1> 색깔변경 없음 </h1> <p class="text"> p테그도 녹색으로 </p> <p> p색깔변경 없음 </p> ------------------- 아이디 선택자 id가 '네임'인 요소만 지정 #네임{ color: green; } 예시) <h1 id="네임"> 색깔변경 녹색 </h1> <p id="네임"> p테그도 녹색으로 </p> ------------------- 그룹 선택자 다양한 요소 한꺼번에 선택 h1, p, div{ color: green; } ------------------- 선택자 우선순위 선택자가 겹칠경우 나중에 작성된 스타일이 적용 선택자가 다르지만 요소가 겹치는 경우, 아이디>클래스>태그 순서로 적용 h1 {color: green;} h1 {color: red;} 나중선택 h1은 레드로출력 .text {color: green;} h1 {color: red;} 클래스 우선, 그린으로 출력 ------------------- | cs |
반응형
'coding > css(sass,tailwind,materialUi)' 카테고리의 다른 글
| css 풀배경으로 설정하기 (0) | 2022.07.30 |
|---|---|
| css 글 센터설정 (0) | 2022.07.30 |
| css 블록레벨, 인라인레벨, display속성, border속성 (0) | 2022.06.23 |
| css 글자세팅(글꼴, 크기, 정렬, 색상) (0) | 2022.06.23 |
| css연결양식 (0) | 2022.06.23 |