▶package-lock.json: 해당 프로젝트에서 사용하는 외부 패키지 의존성을 관리함
package-lock.json 파일은 npm을 사용해서 node_modules 트리나 package.json 파일을 수정하게 되면 자동으로 생성되는 파일이다.
이 파일은 파일이 생성되는 시점의 의존성 트리에 대한 정확한 정보를 가지고 있다.
▶ <input type='button'> vs <button>의 차이
button 태그와 input 태그의 가장 큰 차이점은 button은 스스로 닫지 않는 태그이고 input은 스스로 닫는 태그다.
따라서 button은 하위 태그들을 추가할 수 있지만, input은 그럴 수가 없다.
차이점 1. Button에 하위요소를 추가할 수 있어서 디자인적 측면에서 더 자유롭다.
Button 태그는 속성값으로 폼을 제출하는 submit, 폼 안의 내용을 초기화 하는 reset, button은 그 자체로 사용되지 않고 click과 같이 써서 js와 같이 사용한다.
input태그를 사용하면 img태그를 사용할 수 없고 css의 background-image를 사용해야한다
button태그: 클릭 가능한 버튼을 생성, content를 포함
차이점 2. input태그는 텍스트 필드, 라디오 버튼, 체크박스등 다양한 입력요소를 생성할 수 있다. 타입속성에 따라 선택한 입력 요소에 따라 선택한 입력요소의 형태가 달라진다.
▶position: sticky
position: sticky 속성을 적용한 박스는 평소에 문서 안에서 position: static 상태와 같이 일반적인 흐름에 따르지만 스크롤 위치가 임계점에 이르면 position: fixed와 같이 박스를 화면에 고정할 수 있는 속성이다
▶브라우저의 기본 css와 reset.css
각 브라우저마다 제공하는 기본 스타일이 달라서, Reset css란, 브라우저 간의 요소들 차이를 없애 디폴트 값으로 초기화시키는 코드다.
HTML 요소에 내장된 고유 CSS 스타일 속성을 초기화 시켜서, 크로스브라우징 (= 브라우저마다 동일한 모양) 구현할 때 유용하다.
▶ sticky에 top과 left, right 속성은 왜 0으로 주게 되었나요?
sticky 속성은 top, bottom, left, right들 중에 하나를 필수적으로 설정해주어야 한다. sitcky로 설정된 영역은 설정된 위치(예 top: 0px)에 도달하기 전까지는 static 속성처럼 행동하다가 설정된 위치에 다다르면 fixed 속성처럼 행동하는 속성이다.
어느 부분까지 sticky를 해줘야하는지 지정해 줘야한다.
-> top이나 left, right 둘중 하나만 해줘도 됨
▶sticky 에 left 0 , right 0 을 하면 가로 스크롤을 감지할 때 씀
▶position: absolute에서 top과 left, right 속성은 왜 0으로 지정하는 이유:
position: absolute 로 설정을 해놓았더라도 top 이나 left 와 같은 위치 값을 지정하지 않으면 position: static 과 마찬가지로 동작한다.
▶flex: 1
flex: 1은
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0% 과 같다.
▶ id태그는 js와 같이 주로 사용, class는 css와 주로 같이 사용한다
