선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상클래스라 합니다. :link - 방문한 적이 없는 링크 :visited - 방문한 적이 있는 링크 :hover - 마우스를 롤오버 했을 때 :active - 마우스를 클릭했을 때 :focus - 포커스 되었을 때 (input 태그 등) :first - 첫번째 요소 :last - 마지막 요소 :first-child - 첫번째 자식 :last-child - 마지막 자식 :nth-child(n) - 부모의 n번째 자식 위는 대표적인 가상 클래스의 예시이며 미리 정의되어 있는 가상 클래스를 효과적으로 사용하면 HTML, CSS 및 JavaScript의 코드를 효과적으로 줄일 수 있습니다. 사용법 .box:hover..

일치 결합자(Basic Combinator) 동시에 만족하는 요소 선택 span.orange { color : red; } 이건 오렌지가 아닙니다! 이건 오렌지가 아닙니다! 이건 오렌지 입니다!! 태그 선택자 span을 찾아 클래스 선택자 orange를 선택 자손 결합자 (Descendant Combinator) selectorA 하위의 모든 selectorB 요소 div span { color: red, } 이건 빨강입니다! 이건 빨강이 아닙니다. 이건 빨강입니다! 자식 결합자(Child Combinator) selectorA 바로 아래 selectorB 요소 div > span { color: red, } 이건 빨강입니다! 이건 빨강이 아닙니다. 이건 빨강이 아닙니다. 일반 형제 결합자(General..

📚CSS의 사용이유와 개념CSS(Cascading Style Sheets)Cascading : 계단식Style : 멋을 내다Sheets : (종이) 한 장=> 계단식으로 스타일을 정의하는 문서라는 뜻으로CSS는 HTML 문서에 스타일을 더해줍니다.HTML 문서는 태그가 태그를 포함하는 계단식 구조(태그안에 태그가 존재하는 특징)를 지니고 있습니다..또한 CSS는 HTML과 존재해야 하는 이유가 있는데요. 바로CSS 문서(코드) 자체는 (독립적으로 존재할 수 있지)만, 그 목적이 구조화된HTML 문서의 스타일을 정의하는 데 있으므로 HTML 문서가 없는 CSS 문서는사실상 의미가 없다고 할 수 있습니다.HTML : 웹 문서의 콘텐츠를 구성하는 언어CSS : 웹 문서의 콘텐츠에 스타일을 추가하는 언어(색상..