내가 알아가는 내용을 같이 공유하는 공간

안녕하세요. 오늘은 CSS Selectors의 마지막 고급 선택자인 가상 클래스와 가상 요소에 대해 알아볼게요. 가상 클래스 가상 클래스는 특정 상태의 HTML 요소에 스타일 적용하기 위해 사용해요. 그리고 요소의 상태, 사용자의 동작, 문서 구조에 따라 구분해요. 1. 사용자의 동작에 반응하는 가상 클래스 선택자:link- 방문하지 않은 링크에 스타일 적용:visited- 방문한 링크에 스타일 적용:active- 웹 요소를 활성화했을 때의 스타일 적용- 사용자가 요소를 클릭하고 있는 동안 적용:hover- 웹 요소에 마우스 커서를 올려놓을 때 스타일 적용- 요소 위로 마우스를 올렸을 때:foucs- 요소가 포커스를 받을 때(초점이 맞추어졌을 때) 스타일 적용사용자 동작에 반응하는 가상 클래스의 순..

안녕하세요. 오늘을 CSS의 선택자(Selectors) 두 번째 시간으로 이번에는 CSS 고급 선택자인 연결 선택자와 속성 선택자에 알아볼게요. 연결 선택자 연결 선택자는 선택자와 선택자를 연결해 적용 대상을 제한하는 선택자로 특정 패턴에 따라 요소들 간의 관계를 기반으로 스타일을 적용시켜요. 연결 선택자 종류 1. 자손 선택자 자손 선택자(하위 선택자)는 부모 요소에 포함된 '모든 하위 요소'에 적용이 돼요. 선택자 A와 B 사이에 공백을 두어 사용을 하고, div 요소 내의 모든 p요소에 스타일을 적용시켜요. A B { /* 여기에 스타일을 작성하세요 */} 2. 자식 선택자 자식 선택자는 자식 요소에 스타일을 적용하는 선택자로 A의 직접적인 자식인 B요소에게만 적용이 돼요. A > B {..