[TIL] 2021-08-24

 

 

1. box-sizing: border-box;

* {
  box-sizing: border-box;
}

 ▷ 기본설정으로 사용하는 이유 : border-sizing의 기본값은 content-box인데, 이 때 padding과 border이 더해지면 내가 설정한 width를 초과하는 넓이가 되기 때문

 

 

 

2. margin:auto

block level의 요소들은 자동적으로 오른쪽에 margin이 간다

예를 들어, block level인 list는 margin 이 오른쪽만 들어가게 됨

이 때 margin을 auto로 주면 중앙배치가 가능

/* 위 아래 여백이 0 이고, 가로 중앙배치 하고 싶을 때 */
header {
  margin: 0 auto;
}

 

 

 

3. border, outline

button input {
  border: none;
  outline: none;
}

outline은 input이 focus 될 때 파란색으로 테두리가 변하는 것

 

 

 

4. javascript focus 함수

focusMethod = function getFocus() {
  document.getElementById("myTextField").focus();
}

자동으로 focus 하면서 사용자가 편하게 입력하도록 도와주는 것