1. 형제 선택자(Sibling Selector) 이웃 형제 선택자(Adjacent Selector, Adjacent Sibling Selector)는 이웃한 형제 선택자 중 나중의 요소만 선택되지만 형제 선택자는 이웃한 형제 선택자 중 처음의 선택자를 제외한 모든 요소가 선택됩니다. 첨부 파일에 다음과 같은 코드가 있습니다. div과 p가 섞여있죠. 123456 스타일시트에 다음과 같이 선언하면 3,4,6의 div이 선택됩니다. div ~ div { background: green;} 다음처럼 하면 p 태그중 나중의 것만 선택됩니다. p 태그는 두개밖에 없으므로 마지막 하나만 선택됩니다.p ~ p { background: green;} 다음은 p 다음에 있는 div은 모두 선택됩니다. div ~ div..
HTML/CSS 기초 - 잘 안쓰지만 알아두면 편리한 CSS 선택자 - 1. 이웃 선택자( + :Adjacent Selector, Adjacent Sibling Selector)
웹사이트 제작 문의
CSS를 사용하면서 되도록이면 많은 선택자의 기능을 알아두면 편리하게 디자인할 수 있습니다. 어떤 요소에 대해서 색다른 효과를 주려고 하는데 선택자를 삽입할 수 없다거나 html은 건드리기는 싫고 CSS만으로 스타일 하고자 하는 경우 이런 선택자를 알아두면 아주 편리합니다. 이번 글에서는 처음 CSS를 배우는 분들은 생소하지만 미리 알아두면 편리한 선택자들에 대해 알아보겠습니다. 첨부파일의 start.html을 열면 다음과 같이 돼있습니다. 모두 태그로만 돼있고 아이디나 클래스 선택자를 사용하지 않았습니다. 1 2 3 4 5 6 스타일시트는 기본적인 레이아웃만 돼있습니다. * { margin: 0; padding: 0;}body { font-family: "Nanum Gothic", Arial, sans..