선택자3 [HTML/CSS] CSS - 구체성, 상속, Cascading 9) 구체성 요소를 선택하는 데는 여러 방법이 있고, 서로 다른 선택자를 이용해 같은 요소를 선택할 수도 있다. 그렇다면 만약 같은 요소를 선택하는 서로 다른 규칙들이 상반된 스타일을 가지고 있다면 어떻게 표현이 될까? h1 { color: red; } body h1 { color: green; } 위 코드의 두 규칙은 모두 을 선택하게 되지만, 두 규칙 지정하는 스타일은 서로 다르다. 하지만 결국 에는 color: green이 적용되는데 이는 구체성과 연관이 있다. 선택자에는 어떤 규칙이 우선으로 적용되어야 하는지에 대해 정해진 규칙이 있는데, 이 규칙을 '구체성'이라 한다. 구체성은 선택자를 얼마나 명시적으로(구체적으로) 선언했느냐를 수치화한 것으로, 구체성의 값이 클수록 우선으로 적용된다. 0, 0.. 2020. 8. 10. [HTML/CSS] CSS - 문서 구조와 가상 선택자 6) 문서 구조 관련 선택자 HTML: Hyper Text Markup Language HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다. ◆ 자손 선택자 div span { color: red; } 자손 선택자는 선택자 사이에 아무 기호없이 그냥 공백으로 구분을 하고, 위 코드는 의 자손 요소인 을 선택하는 선택자다. ◆ 자식 선택자 div > h1 { color: red; } 자식 선택자는 선택자 사이에 닫는 꺽쇠 기호(>)를 넣고, 꺽쇠 기호와 선택자 기호 사이에 공백은 있거나 없어도 상관 없다. 위 코드는 의 자식 요소인 를 선택하는 선택자다. ◆ 인접 형제 선택자 div + p { color: red; } 인접 형제 선택자는 선택자 사이에 + 기호를 넣고, .. 2020. 8. 9. [HTML/CSS] CSS - 선택자 3) 선택자 1 ◆ 요소 선택자 선택자 중에 가장 기본이 되는 선택자이며, 선택자 부분에 태그 이름이 들어가서 태그 선택자라고도 한다. h1 { color: yellow; } h2 { color: yellow; } h3 { color: yellow; } h4 { color: yellow; } h5 { color: yellow; } h6 { color: yellow; } ◆ 그룹화 선택자는 쉼표를 이용해서 그룹화를 할 수 있다. h1, h2, h3, h4, h5, h6 { color: yellow; } 위 코드와 같이 쉼표를 이용하거나 * { color: yellow; } *(별표, asterisk) 기호를 이용해서 문서 내에 모든 요소를 선택하는 전체 선택자도 있다. 이렇게 선언하면 한 번의 선언만으.. 2020. 8. 8. 이전 1 다음
