공부/프론트엔드32 [PJ] setting 1. 프로그램 설치 - mysql server + workbench 8.0.30 - nodejs 16.17.0 + npm(npx) 8.15.0 - vscode - notion - git - sourcetree - jdk - intellij 2. vscode extention - 내가 설치한 extentions 22.10.03 추가 extensions vue 코드의 Highlight가 잘 되지 않는것 같아서 찾아서 설치. 아주 만족만족 컴포넌트가 HTML 이랑 코드가 같아서 잘 안보였었는데 초록색으로 구별되서 너므 좋당 3. prettier 적용방법 Editor: Default Formatter 를 Prettier ESLint로 설정 Editor: Format On Save 체크 표시 O 4. 설정을 마친.. 2022. 9. 14. [CSS] Icon 사용하기(google icons, font-awesome) Google Icons ( CDN 동시에 여러가지 사용하기) 1. 구글 아이콘 사이트 접속 https://fonts.google.com/icons Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 원하는 아이콘의 종류 선택 (모양은 같은데 특성이 약간다르다.) 3. CDN 걸기 원하는 그림을 클릭하고 오른쪽에 보면 CDN 걸으라고 링크 준다. 4. 원하는 아이콘 선택후 코드 복사 5. 코드 복붙 후 모양 확인 home favorite android star 결과 Font-Awesome Icons 1. 회원가입 폰트 어썸을 사용하고싶은 경우 회원가입을 해야 한다. (무료로.. 2022. 6. 22. HTML/CSS clone2 모바일 UI/UX clone 진행 주로 div로 영역을 나누고, div를 "posotion : relative" 와 "position : absolute" 를 지정하여 오른쪽 정렬 적용. header쪽 Categories span 은 width를 100%로 주고 "text-align:center" 적용하여 가운데 정렬. Q. img를 앞으로 두면 span width:100%가 이미지 포함을 못시킴 ㅠ 그래서 span을 앞에 두어야 함. Categories는 table로 지정 . Decoration 1065 items img 와 info로 열 2개로 나눔. #info 가 relative , right img 는 absolute로하여 정렬 Q. td 안에 img 가로 정렬은.. 2019. 7. 14. [JavaScript30] 18,19,20 강 정리 18강. Adding Up Times with Reduce 목표 동영상 재생 시간을 Reduce를 사용하여 다 더하여 시,분,초로 나타내기 과정 1. 재생시간 변수에 담기 2. 재생시간의 시, 분, 초를 모두 더하여 초로 나타내기 3. 모두 더한 초를 시, 분, 초로 나타내기 코드 분석 비디오의 시간이 다음과 같이 list tag의 data-time 설정되어 있다. Video 58 data-time(재생시간) 불러와 변수에 담기 - querySelectorAll 로 불러온 Dom은 NodeList속성을 가짐. 따라서 reduce 메소드 사용을 위해 Array로 변환해야 함. - NodeList를 Array로 변환하는 방법 1. Array.from 사용(아래) 2. spread사용(ES6) ex) [..... 2019. 4. 10. [JavaScript30] 12,13,14 강 정리 12강. Key Sequence Detection 목표 비밀키 입력 시 유니콘이 나오도록 설정 과정 1. 비밀키 크기만큼 배열을 생성 2. keyup 이벤트를 받아 순서대로 잘라서 배열에 삽입 3. 배열에 들어있는 문자들을 join 했을 때 비밀키와 일치한다면 유니콘 등장 코드 분석 const pressed = []; // 배열생성 const secretCode = 'wesbos'; //비밀키 설정 window.addEventListener('keyup',(e)=>{ //이벤트 리스너 생성 // console.log(e.key); pressed.push(e.key); //배열에 이벤트 key 삽입 pressed.splice(-secretCode.length - 1, pressed.length - secr.. 2019. 3. 28. [JavaScript30] 1,2,3,4,5 강 정리 3강. Playing with CSS Variables and JS SASS란?Sass(Syntactically Awesome StyleSheets)는 CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다.CSS의 간결한 문법은 배우기 쉬우며 명확하여 프로젝트 초기에는 문제가 없이 보이지만 프로젝트의 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 지저분해지고 유지보수도 어려워지는 단점도 가지고 있다.이러한 CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다.변수의 사용조건문과 반복문ImportNestingMixinExtend/Inherita.. 2019. 3. 21. 이전 1 2 3 4 5 6 다음
