반응형
기본 셀렉터
태그, id, 클래스를 사용하는 방법
기본 셀렉터로는 특정한 부분의 디자인을 적용하기 어렵다.
복합 셀렉터
html 계층 구조 안에서 부모요소와 자식요소간의 관계를 파악하고 상속을 통해 CSS 속성을 적용하기 위해 복합 셀렉터를 이용한다.
사용자 동작과 UI 요소 상태에 스타일 적용하는 가상 클래스를 배우고 어떤 속성이 존재하는지 학습한다.
-> CSS 상속, 후손, 자손 형제 선택자등의 선택자 조합 가상 선택자에 대해 배운다.
1. 상속
html 계층 구조에서 특정 속성들이 부모요소로부터 자식요소로 전달되는 개념
[margin 속성은 제외]
- 상위 객체와 하위 객체의 관계형 구조를 의미하며 부모 요소의 속성을 자식 요소가 물려받는 것을 의미.
- 코드의 중복성을 줄여주기 때문에 생산성을 높일 수 있고 유지 보수가 편하고 재활용이 용이하다
2. 셀렉터 조합
원하는 요소를 선택하기 위해 결합하는 것을 의미
1) 후손 선택자
공백으로 구분
- Selector A Selector B
- A요소 아래의 모든 B 요소를 해당
- B는 A 아래에 있는 다른 요소의 자식이어도 해당
2) 자식 선택자
방향 기호로 구분
- Selector A>Selector B
- 직접적인 자식만 해당
- A요소 아래의 모든 B이지만 B가 다른 요소는 제외
3) 인접 형제 선택자
+기호로 구분
- A와 가장 인접한 형제 요소 B에 속성 적용
- A와 B는 같은 부모요소를 가지고 있어야 하고 가장 인접한 B만 선택
4) 일반 형제 선택자
~기호로 구분
- Selector A ~ Selector B
- A요소의 형제인 모든 B 선택
- A이후에 오는 모든 B가 선택
3. 가상 셀렉터 [제외]
가상 클래스와 가상 엘리먼트를 이용해 선택된 요소에 특별한 상태 혹은 특정 부분 선택하느는 셀렉터
:virtual selector
1) 가상 클래스
<style>
/* 하이퍼 링크의 링크 텍스트 색상 지정 */
a:link {
color: red;
}
/* 하이퍼 링크에 마우스가 올라 갔을때의 색상 지정 */
a:hover {
color: hotpink;
}
</style>
<body>
<p><a href="default.asp">This is a link</a></p>
</body>마우스 위에 이미지를 올렸을 때 스타일 변경 코드
- 선택된 요소의 특정 상태에 동작하는 셀렉터
- <a> 태그에서 사용
- :active
- 마우스 클릭
- :hover
- 해당 요소 위로 올렸을 때
- :link
- 방문 하지 않은 모든 링크 선택
- :active
- <input>태그에서 사용
- :focus
- input태그에서 마우스 포커스를 가진 경우 [선택된 경우]
- :checked
- input태그에서 체크박스 체크
- :disabled
- input태그 상태가 disabled인 경우, 속성 적용시
- :enabled
- input태그 상태가 enabled인 경우
- :first-child
- 해당 요소의 첫번째 자식 요소를 선택
- :last-child
- 해당 요소의 마지막 자식 요소를 선택
- :nth-child(n)
- 해당 요소의 n번째 자식 요소를 선택
- :focus
- <a> 태그에서 사용
2) 가상 엘리먼트
선택된 요소의 특정 위치에 동작하는 셀렉터
::psudo element
<style>
h1::before {
content: "Title - ";
}
</style>
<body>
<h1>This is a heading</h1>
</body>선택된 요소 앞에 다른 텍스트 삽입 코드 [<h1>태그 앞에 Title- 추가하는 예제]
- ::after
- 선택된 요소 다음 위치
- ::before
- 선택된 요소 앞 위치
- ::first-letter
- 선택된 요소 텍스트 내용중 첫글자
- ::first-line
- 선택된 요소 텍스트 내용중 첫번째 줄
- ::selection
- 선택된 요소 텍스트가 선택된 영역
반응형
'Programming > Web Programming (2021)' 카테고리의 다른 글
| [웹프로그래밍 프로젝트] 3. CSS 네비게이션 바 만들기 (0) | 2021.05.17 |
|---|---|
| [웹프로그래밍 실습] 9. 복합 셀렉터 (0) | 2021.05.17 |
| [웹프로그래밍 실습] 8. 박스모델과 포지셔닝 (0) | 2021.05.10 |
| [웹프로그래밍] 8. 박스모델과 포지셔닝 (0) | 2021.05.10 |
| [웹프로그래밍 실습] 7. CSS 셀렉터와 스타일 속성 (0) | 2021.05.03 |
