[code review]

✅ autofocus

<input> 태그의 autofocus 속성은 페이지가 로드될 때 자동으로 포커스(focus)가 input 요소로 이동되는 기능이다.
autofocus 속성은 불리언(boolean) 속성이므로, 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며(default값이 false), 명시하면 자동으로 true 값을 가지게 됩니다.

<input autofocus="true">

✅ :focus

요소가 선택되거나 마우스 이벤트 상태 또는 <input> <textarea> 태그에서 기본값 상태(입력할 준비가 될 때 커서가 깜빡거리는 것)일 때 포커스 되었다고 한다.
이 외에도 <a> <button> 역시 기본값으로 :focus 상태(클릭하면 테두리가 적용)이기 때문에 style을 바꿔주거나 없애기 위해서는 css적용을 해주어야 한다.

input:focus{
        border:1px solid red;
        color:#000000;
      }
/* focus에 스타일주기 */
a:focus{
		outline:none;
      }
/* outline 없애기 */

✅ scroll-behavior: smooth;

스크롤 할 때 부드럽게 넘어가는 animate기능을 주는 css효과.
기본적으로 css 전체 효과에 넣어주자!

*{
scroll-behavior: smooth
}

✅ parseInt() / parseFloat() / eval()

사용자로부터 문자값을 받으면 숫자값으로 출력하는 함수.
(모두 자바스크립트가 자체적으로 갖고 있는 내장함수)

👉 parseInt()
integer(정수) 형으로 자료형을 변경

// parseInt 예제
a = 10.5;
b = parseInt(a);   //b = 10

👉 parseFloat
float(실수) 형으로 자료형을 변경

// parseFloat 예제
a = "10.545";   //10.545 를 문자형으로 a 변수에 저장
b = parseFloat(a);   //b = 10.545(실수)

👉 eval()
문자열로 된 구문을 실행/ 문자로 표현된 javascript 코드를 실행하는 함수

// eval 예제1
a = 10;
eval("a = 20");
alert(a);   //20을 출력.

// eval 예제2
eval("alert('Test')");   // Test 라는 문자열을 출력

// eval 예제3
alert2("test");   // alert2 라는 함수가 존재하지 않으므로 에러.

eval("function alert(string){ 
     alert('String : ' + string); 
     }
   ");
alert2("test");   // String : test 를 출력

// eval 예제4
eval('2+2');   // 4
eval(new String('2+2'));   // 2+2
eval('2 + 2') === eval('4'); // true
eval('2 + 2') === eval(new String('2 + 2'); //false