5日目TIL


css


選択者n回child(n)vs n回of type(n)


nh-child(n)nh-of-type(n)親elmentの子のうちn番目のelmentは、親elmentの子のうちの特定のelmentのうち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


/blockinline-blockinline改行するか改行しないか改行しないデフォルトでは、幅(width)100%の文字が占める文字数はwidth、heightが使用可能かどうかの付加価値を超えてはいけません

属性box-size:boder-box;


boxモデルではwidthまたはheightが指定した値に左右または上下padding、boder値を追加して最終的な幅と高さを決定します.
padding、boder値によっては、指定したwidth、height値との差が発生し、他の操作の原因になる可能性があります.これを防止するために、widthとheightはpaddingとboder値の合計として指定されます.
* {
  box-sizing: boder-box;
}
// 선택자 '*'는 모든 요소를 선택하겠다는것을 의미한다.

javascript


変数の宣言


変数を宣言するとき、空の文字列""または0が変数として指定されることがあります.理由は何ですか.
let word = "";
//이런 경우 변수에 할당된 데이터는 없지만, 데이터 타입은string으로 정해질 수 있다. 이후 변수에 + 연산자를 이용한다면 
//string 타입으로 합쳐지는 결과를 얻을 수 있다.
let count = 0;
//마찬가지로 변수의 타입을 number 지정해줄수 있다.