프로그래밍 공부 노트

  가상 클래스 선택자(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가 적용된다.

지금까지 태그와 요소가 동일한것으로 알고있었다. 그러니까 동일한것을 가리키지만 부르는 방식이 두가지라고 알고있었다. 당연히 그러려니하고 넘어갔는데 이제와서 갑자기 궁금해서 찾아보니 두가지는 조금 달랐다. HTML 관련 강의나 내용들을 보면 태그와 요소라는 용어를 자주 접하게 된다. 비슷해보이지만 두가지는 조금 다르다. 태그는 말 그대로 태그 자체를 가리키는 반면, 요소는 태그가 적용된 것을 가리킨다. < p > Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse provident cumque quam cupiditate laboriosam, nostrum accusamus! Cum enim doloremque tempora aperiam sed vel, quia laborum facere ullam quam odio sapiente! </ p > 이 소스에서 <p></p> 가 태그이며 시작태그와 종료태그 사이에 작성된 텍스트가 p 요소이다.

JavaScript setTimeout, setInterval, clearInterval 비교 setTimeout 메서드는 일정시간 후 함수를 실행한다. (1초후 출력) setTimeout(fn, delay) setInterval 메서드는 일정시간마다 함수를 실행한다.  (1초마다 출력) setInterval(fn, delay) 한가지 주의할점은  fn에 함수가 오지않으면 setInterval도 반복하지 않고 setTimeout과 같이 한번만 실행한다. clearInterval 메서드는 setInterval로 반복중인 작업을 중단시킨다. clearInterval(setInterval로 생성된 변수) clearInterval을 사용하기 위해서는 위의 비동기 함수들을 변수에 할당하고 해당 변수를 clearInterval의 매개변수로 대입헤 줘야한다.