프로그래밍 공부 노트

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

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

< input type = "submit" /> < button ></ button > <input type='submit' /> 과 <button><button/> 태그는 폼의 내용을 전달하는 경우 사용하게 된다. 두개의 태그 모두 폼의 내용을 전달하는데 사용되는데 여러 사람들의 코드를 보다보면 누구는 input 태그를 사용하였고 누구는 button 태그를 사용하여 코드를 작성한것을 확인할 수 있다. 나는 둘의 차이가 궁금하여 찾아보았다. 일단 <input type='submit' /> 과 <button><button/> 태그는 기능적으로 동일하게 동작한다. 하지만 input 태그의 경우 type='submit' 속성을 작성해야지만 submit 동작을 수행하는 반면 button 태그의 경우 type 속성을 따로 명시하지 않을 경우 기본값으로 type='submit' 속성이 적용되어있어 submit 동작을 바로 수행할 수 있다. button 태그에도 기본 기능 submit 이외에 몇가지 type 속성이 더 존재하는데  submit 속성을 포함하여 button | submit | reset 이렇게 세가지 type 속성이 존재한다. button 태그가 input 태그보다 갖고있는 장점이 있다면 일단 input 태그와 달리 디자인적인 부분에서 자유도가 높다. 일반적으로 태그들을 디자인하는데 사용되는 모든 것들을 동일하게 적용할 수 있으며 배경으로 이미지도 넣을 수 있고 <button> 과 <button/> 태그 사이에 다른 태그들을 삽입할 수도 있다. 마지막으로  button 의 기본적인 디자인은 브라우저별로 조금씩 다르게 보여지기 때문에 사용자들의 동일한 사용경험을 위한다면 CSS로 디자인을 적용하여 사용하는것이 좋다.(크로스 브라우징) button 태그

[CSS] 반응형 작업을 위한 폰트 단위 em / rem  CSS에서 사용하는 단위는 여러가지가 있다.  많이들 사용하는 px에서부터 % / em / rem / vh / vw / vmin / vmax / ex / ch / 등이 있다. 호환성 문제도있고 요즘엔 쓰이지 않는 단위도 있으므로 대표적으로 많이 사용되는 3가지에대해 알아보자. px 절대값으로 사용 되는 단위이다. 많이 사용되지만 고정된 값이기 때문에 사용하기 편하고 이해하기도 쉽지만 반응형 웹사이트를 만들때에는 적절하지 않다. em 부모 태그의 영향을 받는 상대적인 길이다. 부모의 사이즈를 기준으로 하기 때문에 매우 유동적이고 파악하기 어렵다. 반응형 웹사이트에 사용된다. 하지만 권장되지 않는다. rem rem(root em)은 최상위 요소인 html요소에 비례하여 크기를 가지는 상대적인 길이다. 즉 html 요소에 font-size를 고정값으로 지정해 두면 그 비율에 따라 크기가 계산된다. 반응형 웹사이트에 가장 바람직한 단위이다. rem은 IE9 버전까지 지원이 된다. 반응형 홈페이지를 만들때 px로 작업을 하면 브레이크 포인트 마다 일일이 찾아서 px값을 수정해야 하는 엄청난 수고를 하게 된다. px은 절대값으로 사용 되는 단위이기 때문에 반응형 홈페이지를 작업할때는 불편하고 문제가 되기 때문에 em / rem 을 사용 하는 것이 좋다. 이 중에서 rem을 많이 사용하는데 rem은 html에서 font-size를 정의 해 놓으면 그 사이즈를 기준으로 계산이 되기 때문에 이해 하기 쉽고 사용하기 편리하다. html에서 사이즈를 지정하지 않으면 기본적으로 시스템 사이즈가 적용 된다. html의 기본 시스템 사이즈는 font-size: 16px; 이다. html { font-size:16px; } 에서 16px은 1rem 이다. 17px은 1.063rem이다. 이렇게 되면 계산하기 어렵기 때문에 rem을 계산해주는 사이트를 이용하거나 더 쉬운 방법은 html { font-size:62.5%; }, 또는