결합자 자손 결합자 box1 text Hello Bye div { border: 10px solid black; } .box.border-box .text { // 자손 결합자 color: red; } div div { // 자손 결합자 color: green; } 공백(띄어쓰기)을 이용해 두 개 이상의 선택자를 조합하는 형태로 표현할 수 있다. 뒤쪽 선택자 요소의 부모선택자가 존재할경우 사용한다. (부모, 부모의 부모, 부모의 부모의 부모...) 뒤에 작성한 선택자부터 그 이하의 모든 선택자들에 스타일을 적용한다. 쉼표( , )를 이용해 작성하는 그룹 선택자는 모든 선택자에 스타일이 적용된다는 점에서 차이라고 볼 수 있다. 그룹 선택자 링크 : https://imcoding.tistory.com/46 ..

CSS 그룹 선택자 box1 box2 .box { color: blue; } .box.border-box, .box.bg-box { border: 10px solid #000; } 여러개의 선택자를 가져와서 쉼표를 이용해 작성하여 스타일 시트 크기를 줄일 수 있다. 끝

CSS 기본 선택자 CSS의 선택자(Selector)는 html에서 쓰인 코드에 영향을 준다. 여기서는 선택자 중에서도 기본 선택자에 대해 알아보겠다. 기본 선택자 표현식 전체 선택자 * 요소 유형 선택자 선택하길 원하는 노드 이름 (div, input 등) 클래스 선택자 . ID 선택자 # 특성 선택자 [attr] 전체 선택자 * { color: red; } html 내에 존재하는 모든 태그에 영향을 준다. 유형 선택자 div { color: red; } input { color: red; } html에서 해당 태그를 갖는 모든 요소를 선택한다. 클래스 선택자 빨간색문장 파란색인풋 .div1 { color: red; } .input1 { color: blue; } html에서 해당 클래스 이름을 갖는 ..