728x90
반응형
SMALL
선택자
1. 전체 선택자
- 스타일을 모든 요소에 적용
- * 기호를 사용해서 표현한다
- 너무 많은 요소가 있는 html에 사용할 경우 클라이언트에 부하를 걸수 있음
ex) * { 속성명1: 속성값1; 속성명2: 속성값2; }
✔ 개별 적용된 스타일은 우선순위로 적용됨
2. 요소 선택자
- 특정 요소가 쓰인 모든 요소에 스타일을 적용
✔ 상속
- 부모요소의 속성값이 자식 요소에게 전달 되는것
3. id 선택자
- 웹 문서 안에 특정 부분 스타일을 적용
- # 기호를 사용해서 id속성을 가진 요소에 스타일을 적용
CSS
h2 { font-size: 30px; } /* 안녕하세요, 반갑습니다 모두 적용됨 */
h2#hello { font-size: 20px; } /* 안녕하세요가 20픽셀로 변경 */
#hello { color: pink; } /* 안녕하세요를 pink 컬러로 변경 */
HTML
<h2 id="hello">안녕하세요</h2>
<h2>반갑습니다</h2>
4. class 선택자
- 특정 집단의 요소를 한번에 스타일을 적용하는 방법
- . 기호를 사용해서 같은 class 이름을 가진 요소에 스타일을 적용
- 두개 이상 클래스를 적용시키고 싶으면 띄어쓰기로 사용할수 있음
css
h2 { font-size: 20px; } /* 안녕하세요, 반갑습니다 적용 */
h2.hello { color: deeppink; } /* 안녕하세요 적용 */
.hello { color: deepskyblue; } /* 안녕하세요, 하이 */
p { font-weight: bold; } /* 하이, 또 만났군요 적용 */
html
<h2 class="hello">안녕하세요</h2>
<h2>반갑습니다</h2>
<p class="hello">하이</p>
<p>또 만났군요</p>
5. 그룹 선택자
- 여러개의 요소를 나열하고 , 로 구분하여 스타일을 적용
h2, p { text-align: center; }
6. 자식 선택자
- 부모의 요소 하위에 자식요소의 스타일을 적용
body > p { color: deepskyblue; }
7. 자손 선택자
- 조상요소 하위에 모든요소의 스타일을 적용
- 자손은 자식을 포함
body p { color: deepskyblue; }
8. 인접 형제 선택자
- 동일한 부모의 요소를 갖는 자식요소들의 관계
- 연속된 동생 요소의 스타일을 적용
h2 + p { color: deepskyblue; }
9. 일반 형제 선택자
- 형제 관계를 갖는 요소 중에서 요소 다음에 나오는 모든 동생 요소의 스타일을 적용
h2 ~ p { color: deeppink; }
10. 속성 선택자
- HTML 요소에서 src, href, style, type, id, class ... 속성을 선택자로 지정해서 스타일을 적용
- 패턴이 많음 -> MDN 참고 https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors
css
[src] { border: 3px solid red;}
[src='apple.png'] { width: 200px; height: 200px;}
HTML
<img src='apple.png' alt='사과이미지'>
<ing src='banana.png' alt='바나나이미지'>
11. 가상 선택자
- 클래스를 추가할 필요없이 요소 중에서 순서에 따라 원하는 요소를 선택
css
.deepsky { color: deepskyblue; }
html
<ul>
<li class='deepsky'>김사과</li>
<li class-'deepsky'>오렌지</li>
</ul>
- li:first-child
li 요소중에서 첫번째 해당하는 요소의 스타일을 적용
ex) ul > li:first-child { color:deeppink; }
- li:last-child
li 요소중에서 마지막에 해당하는 요소의 스타일을 적용
- li:nth-child(n)
li 요소중에서 n번째 요소에게 스타일을 적용
- li:nth-child(odd)
li 요소중에서 홀수에게
- li:nth-child(even)
li 요소에서 짝수번째에게
12. 스타일링 링크
- a:link
하이퍼링크가 연결되었을때 선택
- a:visited
특정 하이퍼 링크를 방문 한적이 있을 때 선택
- a:hover
특정요소에 마우스를 올렸을때
- a:active
특정요소에 마우스 버튼을 클릭하고 있을 때 선택
728x90
반응형
LIST
'CSS' 카테고리의 다른 글
| CSS-레이아웃(Layout) (2) | 2023.03.30 |
|---|---|
| CSS- Background, Display (0) | 2023.03.29 |
| CSS-font (0) | 2023.03.29 |
| CSS- 컬러와 텍스트 (0) | 2023.03.28 |
| CSS (0) | 2023.03.28 |