FE개발 공부 시작: 23년 4월 10일

1. 구조 분석 [recentSearch.js] 1. 변수 선언 문서객체 상수 : 사용할 문서 객체들 읽어들이기. 제이쿼리 객체라 $~로 시작하는 상수명 사용 isRecentSearch 변수 : 자동완성 기능 상태 변수. 불값으로 저장할거라 is~로 시작하는 변수명 사용 recentSearchData 변수 : 최근 검색어와 날짜 저장할 배열을 변수에 저장 2. 함수 : 상수 저장 createRecentItem 함수 : 최근검색어 초기화 후 리스트 추가함 cleanInput 함수 : 검색 입력창 초기화 deleteSelectedItem 함수 : recentSearchData.splice(매개변수, 1); showOlnyRecentItem 함수 : 조건에 따른 분기-recentSearchData길이가 0이면..

부트스트랩 컴포넌트 5.0 https://getbootstrap.com/docs/5.0/components/buttons/ 부트스트랩 시작 템플릿

flex 중앙정렬 display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap : 줄 넘기기 nowrap(default) wrap : ↙ wrap-reverse : ↖ flex-direction : 생성 방향 row(default) : → row-reverse : ← column : ↓ column-reverse : ↑ justify-content : 가로축 정렬 flex-start(default) : 컨테이너의 왼쪽 정렬 flex-end : 컨테이너의 우측 정렬 center : 컨테이너의 중앙 정렬 space-between : 요소들 사이에 동일한 간격 space-around : 요소들 주위로 동일한..

익스텐션 Live Server Korean Language Pack for Visual Studio Code Prettier Ctrl + ,콤마로 settings 창으로 이동 save 검색해서 format on save 체크 prettier 검색해서 Prettier:Tab Width를 2로 설정 CSS Peek Ctrl + 클래스나 아이디 클릭하면 정의된 CSS파일로 이동 HTML CSS Support: CSS에 정의된 명칭을 HTML에서 자동완성으로 사용 Auto Rename Tag: 여는태그 닫는태그 같이 이름 수정 단축키 Alt + Shift + F : 선택영역 CSS 코드 정렬 Alt + Shift + A : 선택영역 주석 Ctrl + D : 동일텍스트 순차 선택 Alt + 방향키 : 코드 한 줄..