기록저장소

없으면 불편한, 필수설치- Live Server : html 작성시 변경된 화면 즉시 확인vscode 하단의 "Go Live"클릭시 브라우저에서 자동실행/업데이트 ( 단축키 alt + L, alt + O / cmd + L, cmd + O) - Live Sass Compiler : sass/scss를 css로 자동 컴파일vscode 하단의 "Watch my Sass" 클릭시 자동 컴파일 (sass/scss 파일은 파일명 앞에 "_"로 시작해야함) - Prettier : 코드 정렬prettier의 버전, 경로 등 설정이 필요함 - Error lens : 직관적인 에러 표시 설치하면 생산성이 올라가는- GitLens : 해당 코드의 작성자, 커밋이력, 메시지 등 미리보기 - Git Graph : git 그래..

웹 프레임워크프론트엔드 개발자/개발사React.jsUI 라이브러리,컴포넌트 기반의 빠른 렌더링과 강력한 생태계(React Router, React Native 등)로대규모 웹 애플리케이션에 적합 Meta Vue.jsUI 프레임워크,간단하고 직관적인 API 와 반응형 컴포넌트, 학습 곡선이 적어 가벼운 앱부터 대형 프로젝트까지 모두 적용 가능Vue.jsAngular풀스택 웹 애플리케이션 프레임워크,TypeScript 기반, MVC아키텍처, 양방향 데이터 바인딩으로 대규모 애플리케이션 구축에 적합GoogleSvelteUI 프레임워크,컴파일러 기반으로 빌드 시점에서 UI를 최적화 함,적은 런타임 오버헤드와 간결한 코드 작성Rich HarrisNext.js  React 기반 풀스텍 프레임워크,SSR(서버 사이드..

문득 border:0과 border: none은 둘다 border를 없애주는데 어떻게 다르지 궁금해서 검색하고 남기는 기록 border: 0;- border의 두께를 0으로 설정- 다른 속성이 있다면 (width, color 등) 그 속성들은 유지됨- 브라우저가 인식하지만 두께가 0이라 보여지지 않는것이라 렌더링은 됨- 다시 활성화해야 할 경우 초기설정 보존 border: none;- 테두리 스타일을 없음으로 설정- 테두리 자체를 렌더링하지 않으므로 더 효율적 결론!테두리 제거가 목적이라면 border:0보다 border:none이 가독성이 좋고 경제적이므로 border: none을 더 권장함기존스타일을 남겨두려면 border:0

HTML을 다루는 사람이라면 들어봤을 Q. 그래서 그게 뭔데? A. 브라우저와 개발자 모두에게 의미를 명확하게 알리기 위한 의미를 지닌 요소 유지보수가 편리, SEO에 유리, 웹 접근성 등의 장점이 있음 : 소개 컨텐츠, 탐색 링크 집합에 대한 컨테이너 내부에 , , 올 수 없음 : 문서의 주요 내용 지정 하나의 html에 하나만 있어야함, , , , 내부에 들어갈 수 없음 : 일반적으로 제목이 있는 주제별 컨텐츠 그룹, 문서의 섹션 : 독립적이고 자체 포함된 컨텐츠, 자체의 의미 과 은 서로/자신을 포함할 수 있음 : 탐색 링크 세트, 항상 존재하지는 것은 아님 : 자신이 배치된 컨텐츠 외의 일부 컨텐츠, 주변 컨텐츠와 관련되어야 함 : 문서나 섹션의 바닥글 : 일러스트, 사진, 코드 목록 등 독립된 ..

자주 쓰일듯 한 css n번째 요소 선택 :nth-child(3)//3번째 하위 요소 :nth-child(n+3)//3번째 하위 요소부터 끝까지 모두 :nth-child(-n+3)//첫번째부터 3번째까지 모든 하위 요소 :nth-child(n+3):nth-child(-n+5)//3번째부터 5번째까지의 하위요소 :nth-child(2 of .highlight)//.highlight 클래스를 가진 하위 요소 중 두번째 요소 .highlight:nth-child(2) //두번째 요소이면서(and) highlight 클래스를 가진 요소 특정 요소 선택 @scope (.card){ img{ border-color: red; } } //card 클래스 내부에 있는 img 만 선택 @scope (.card) to (..

0. "카카오 지도" 검색 1. https://apis.map.kakao.com/ 접속 : 기본적인 사용방법, 옵션 확인 등 공식문서 사이트 2. https://developers.kakao.com/ 접속 : url 등록 및 KEY 발급받는 사이트 KEY발급받기, 지도 사용할 URL등록하기 1. https://developers.kakao.com/ 에서 [내 애플리케이션] 클릭 2. 카카오계정 로그인하기 3. [애플리케이션 추가하기] 클릭 4. 애플리케이션 정보 등록 : 앱 아이콘, 사업자명 등을 입력해야해서 흠칫했지만 그냥 폴더명이라 생각하고 간단하게 등록하면 됨 5. [저장] 하면 등록완료 (아직 남음) 6. 사용하고자하는 [애플리케이션] 클릭 -> [플랫폼 설정하기] 7. 플랫폼 등록하기 : [we..

css li { float: left; } /* one item */ li:first-child:nth-last-child(1) { width: 100%; } /* two items */ li:first-child:nth-last-child(2), li:first-child:nth-last-child(2) ~ li { width: 50%; } /* three items */ li:first-child:nth-last-child(3), li:first-child:nth-last-child(3) ~ li { width: 33.3333%; } /* four items */ li:first-child:nth-last-child(4), li:first-child:nth-last-child(4) ~ li { wid..

https://pim.cyberlogitec.com/docs/pages/viewpage.action?pageId=20096574

https://blog.hivelab.co.kr/%EA%B3%B5%EC%9C%A0-vertical-align-%ED%8C%8C%ED%97%A4%EC%B9%98%EA%B8%B0-1%EB%B6%80/ [공유] Vertical-align 파헤치기! – 1부 | Hivelab Blog [공유] Vertical-align 파헤치기! – 1부 들어가며 안녕하세요. 하이브랩 UI개발2팀 도재경, 우현주입니다. 각자 UI개발1팀과 SEP실에서 열심히 과제를 진행했지만 서로 같은 고충을 느꼈던 저희!!! 그 blog.hivelab.co.kr https://blog.hivelab.co.kr/%ea%b3%b5%ec%9c%a0-vertical-align-%ed%8c%8c%ed%97%a4%ec%b9%98%ea%b8%b0-2%e..

https://stackoverflow.com/questions/46724542/javascript-move-elements-up-and-down-in-the-list JavaScript: Move elements up and down in the list I am working on a script to move list elements up and down with a button click. I can make it work with jQuery, but I have troubles writing this in pure (vanilla) JavaScript. $(function() { ... stackoverflow.com