익스텐션 파일 경로%USERPROFILE%\.vscode\extensions 복사한 폴더명과 폴더 구조.vscode/extensions/ritwickdey.liveserver-5.7.9/├── package.json├── extension.js├── out/└── ... 폴더 이름 확인, 폴더 안에 package.json 파일 있는지 확인하기 VS Code 완전히 재시작하기작업관리자 열어 Code.exe 남지 않도록 확인하기VDI 환경일 경우 세션 종료 후 재로그인 필요할 수 있음 *VS Code 완전 종료하는 방법1. Ctrl+Shift+ESC 눌러 작업관리자 실행=> [프로세스] 탭에서 Code.exe, Code.helper 찾아 우클릭=> 작업 끝내기(End Task) 2. 명령줄에서 종료ta..
현재 우리 회사에서는 react나 vue와 같은 프레임워크 없이도컴포넌트 기반으로 마크업을 작성하고 html과 css를 불러오는 구조로리뉴얼 프로젝트를 진행할 예정이다. 프레임워크 없이 컴포넌트 기반으로 리뉴얼 프로젝트를 진행할 때의 장단점과예상되는 문제점, 퍼블리싱 시 고려해야 할 포인트들을 정리해봤다. 장점1. 컴포넌트 단위의 재사용 버튼, 헤더, 푸터, 카드 등 공통 UI를 모듈화해서 관리하면 중복 작업이 줄어들고 개발 속도가 빨라짐. 반복되는 구조를 재사용 가능하니 HTML 마크업이 깔끔해지고, 생산성이 향상됨. 2. 코드 분리로 가독성 향상 하나의 html 파일에 모든 내용을 작성하는 방식보다, 파일을 기능별로 나누면 각 컴포넌트 구조를 파악하기 쉬움. 신규 인원이 투입돼도 구조만 익히면 빠르..
특정 구간에서 반복적으로 재생되어야 하는 유튜브 영상 삽입하기 iframe으로 삽입하고 loop를 넣었더니특정 구간 재생 시작 => 특정 구간 재생 종료까지는 되는데종료 시점에서 영상이 끝나면 아예 영상 맨처음부터 다시 재생이 됐다 구글링을 통해특정 구간을 반복 재생하려면 유튜브 api를 사용해야 한다는 것을 찾아서 문제 해결 // youtube loop play var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insert..
HTML CSS/* .active 클래스명 주고 애니메이션 스타일링, 아래는 예시 */.item_01.active .item_btm .con_wrap:before{ animation: triangleChartArrow 0.5s 1.5s linear forwards;}.item_01.active .chart_wrap:before{ animation: triangleChart 1s 0.5s linear forwards;}.item_01.active .chart_wrap:after{ animation: triangleChartTxt 1.5s 2s linear infinite; opacity: 1; -webkit-transition: opacity 0.5s 2s; trans..
HTML go to section 1 go to section 2 CSS/* navigation */.navi_wrap{ position: relative; z-index: 10; height: 97px;}.navi_wrap.fixed .navi_menu{ position: fixed; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 1200px;}.navi_menu{ display..
HTML 모달 띄우기 모달 팝업 콘텐츠 CSS/* modal */body.ofh { overflow-y: hidden;}#dim { display: none; position: fixed; top: 0; left: 0; z-index: 10001; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6);}.modal_contents { display: none; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 10002; width: 9..
let prevScrollpose = window.pageYOffset; window.addEventListener("scroll", function() { let currentScrollPose = window.pageYOffset; if (prevScrollpose > currentScrollPose) { document.getElementById("bnr_btm").style.bottom = "60px"; // 스크롤 올릴 때 } else { document.getElementById("bnr_btm").style.bottom = "0px"; // 스크롤 내릴 때 } prevScrollpose = currentScrollPose; });}