css

선택자 nth-child(n) vs nth-of-type(n)

//html
<div class = "main-article">
  <span>1. span-1</span>
  <p>2. p-1</p>
  <span>3. span-2</span>
  <p>4. p-2</p>
  <span>5. span-3</span>
</div>

출력
1. span-1
2. p-1
3. span-2
4. p-2
5. span-3

nth-child(n)

.main-article > span:nth-child(5) {
  font-weight: bold;
}  
// > 표기는 해당 선택자의 자식중에서 고르겠다는 의미이다.

출력
1. span-1
2. p-1
3. span-2
4. p-2
5. span-3

nth-of-type(n)

.main-article > p:nth-of-type(2) {
  font-weight: bold;
} 

출력
1. span-1
2. p-1
3. span-2
4. p-2
5. span-3

속성 dipay: block , inline-block, inline

속성 box-sizing: boder-box;

box model에서 width 또는 height는 지정한 값에 좌우 또는 상하 padding, boder 값이 추가되어 최종 width와 height가 결정된다.
padding, boder값에 따라 지정한 width, height와의 값 차이가 발생하게되고 이는 추가적인 작업의 원인이 될수 있다. 이를 방지하기 위하여 아래처럼 속성을 추가하면 width와 height는 padding, boder값이 합처진 값으로 지정된다.

* {
  box-sizing: boder-box;
}
// 선택자 '*'는 모든 요소를 선택하겠다는것을 의미한다.

javascript

변수선언

변수 선언시 아래와 같이 빈 문자열"" 혹은 0을 변수로 할 당하는 경우가 있는데 어떤 이유에서 일까?

let word = "";
//이런 경우 변수에 할당된 데이터는 없지만, 데이터 타입은string으로 정해질 수 있다. 이후 변수에 + 연산자를 이용한다면 
//string 타입으로 합쳐지는 결과를 얻을 수 있다.
let count = 0;
//마찬가지로 변수의 타입을 number 지정해줄수 있다.