프로그래밍 공부 노트

  가상 클래스 선택자(pseudo-class selector)  :nth-of-type과 :nth-child 비교 :nth-of-type 선택자로 지정된 요소와 일치하는 형제 요소 중 n번째인 요소를 선택한다. See the Pen css - nth-of-type by seungwonleee ( @seungwon-code ) on CodePen . div 부모 태그 안에 1번째 p 태그 자식 요소와 2번째 p 태그 자식 요소를 선택한다. h1과 h2 태그는 p 태그가 아니므로 순서에 영향을 받지 않는다. :nth-child 형제 요소 중 n번째인 요소를 선택한다. 만약 해당 순서의 요소와 선택자로 지정된 요소가 일치하지 않는 경우 선택되지 않는다. See the Pen Untitled by seungwonleee ( @seungwon-code ) on CodePen . div 부모 태그 안에  1번째 p 태그와 2번째 p 태그를 선택하지만 1번째 요소가 h1 태그이므로 선택되지않아 css가 적용되지 않으며 2번째 요소는 p 태그이므로 css가 적용된다.

선택자(selector) 태그 즉 element(요소)에 css스타일을 적용할때 각각의 요소들마다 세분화하여 스타일을 지정할 수 있고 선택자를 잘 활용할 경우 재활용성과 중복의 제거가 일어나서 유지보수에 효과적이다. id 선택자 : id 선택자는 태그에 id=""로 속성을 줄 수 있으며 id선택자는 해당 html에서 단 한번만 선언될 수 있다. (여러번 사용이 가능하나 선택자 이름이 중복되서는 안된다.) id속성이 적용된 태그에 스타일을 적용하고자한다면 css파일에서 #으로 선언하여 해당 속성이 적용된 태그에 스타일을 적용할 수 있다. 사용방법 : #first {...} class 선택자 : class 선택자는 태그에 class=""로 속성을 지정해 줄 수 있으며 id 선택자와 다르게 많은 태그들에 사용할 수 있고 id 선택자보다 조금 더 포괄적인 부분 또는 많은 태그들에 동시다발적으로 스타일을 지정해 줄 때 사용한다.  class속성을 사용한 태그에 스타일을 적용하고 싶으면 css파일에서 .(점)과 함께 속성명을 적고 스타일을 작성한다. 사용방법 : .second {...} 일반 선택자 : class 선택자 보다 더 포괄적인 태그들에 동시다발적으로 스타일을 지정해 줄 때 사용된다.  사용법은 다른 태그들과 다르게 태그명만 작성하고 중괄호 안에 스타일 속성을 작성하면 된다. 사용방법 : div {...} 전체 선택자 : 모든 태그를 가르키며 화면 전체의 모든 태그에 스타일을 적용할 수 있다. 사용방법 : * {...} 자식 선택자   : 자식 선택자는 깊이가 1인 자식 요소에만 스타일을 적용한다. < div > < p > 1 </ p > < p > 2 </ p > < span >< p > 3 </ p ></ span > </ div > 자식 선택자  사용방법 : div > p {...} ...