프론트엔드 개발자가 될거야.
-
[위코드 35기 precourse-html-css] 위코드 첫 날, htmlcss 총정리, 배운 내용 복습프론트엔드 개발자가 될거야./htmlcss 2022. 6. 20. 21:45
들여쓰기, 띄어쓰기 (스페이스바 기능) 방법1   방법2 => text-indent 을 이용 .js-description { text-indent: 50px; } 밑줄긋기 p { text-decoration: underline; } 이처럼 text-decoration를 이용한다고 알고있지만 밑줄의 두께나 색깔 등, 완벽하게 커스터마이징 하기가 어렵다. 그래서 내가 원하는 스타일로 밑줄을 칠 수 있게 border-bottom으로 구현하는 것을 더 선호해야한다. CSS selector 표현 p.p-tag => p태그 이면서 p-tag클래스 .pre span => pre클래스 내부에 있는 span태그 .a div .b .pre span => a클래스 내부에, div태그 내부에, pre클래스 내부에 있는..
-
[노마드 코더] 바닐라 JS로 크롬 앱 만들기프론트엔드 개발자가 될거야./js 2022. 6. 19. 18:03
listen하고 싶은 event를 찾는 가장 좋은 방법 console.dir(h1); 메소드 & element의 내부를 볼 수 있음. 이벤트도 알 수 있음. -> on만 빼면 됨 className, classList, toggle의 사용 (feat. css는 css에서!) - className의 버그 : 이전의 class들은 상관하지 않고 모든걸 교체해버림 => 이것을 해결한 것이 classList - classList => clsaaList의 코드를 한 줄로 해결한 것이 toggle // css .clicked { color: red; } // JS if(h1.classList.contains("clicked")) { h1.classList.remove("clicked"); } else { h1.cla..
-
HTML input checkbox프론트엔드 개발자가 될거야./htmlcss 2022. 6. 15. 17:17
// 복수 선택 가능한 체크박스 // 단일 선택 체크박스 이름 삽입 시 태그를 사용하면 글씨 영역을 클릭해도 checkbox 영역이 클릭 된다. 방법 1 오늘 할 일 방법 2 오늘 할 일 체크 박스 그룹 지정 여러 체크 박스를 하나의 그룹으로 지정하고 싶을 때, name 속성을 같은 값으로 지정하기 공부하기 잠자기 카페가기 체크박스 checked/unchecked 기본 설정은 unchecked이고 특정 체크박스에 체크 표시를 하고 싶으면 checked 속성명 삽입하기
-
JS함수 정리 - 화살표함수, 즉시실행함수, 호이스팅, 타이머함수, 콜백프론트엔드 개발자가 될거야./js 2022. 6. 14. 11:17
* 화살표함수 // 화살표 함수 // () => {} vs function () {} const double = function (x) { return x + 2 } console.log('double: ', double(7)) const doubleArrow = x => x * 2 console.log('doubleArrow', doubleArrow(7)) // 화살표 함수 객체데이터 사용법 const doubleArrow = x => ({ name: 'jeongeun' }) console.log('doubleArrow', doubleArrow(7)) * 즉시실행함수 IIFE : 함수가 한 번 실행되고 쓸 일이 없을 때 : 이름이 없는 익명함수를 만들자마자 그 자리에서 바로 실행가능 // 즉시실행함수 ..
-
자바스크립트 라이브러리 정리프론트엔드 개발자가 될거야./js 2022. 6. 13. 16:45
swiperjs swiperjs 슬라이드 기능 구현해주는 라이브러리 사용법 1. CDN 가져오기 (주의! link테그도 함께 가져오기) 2. HTML 레이아웃 Slide 1 Slide 2 Slide 3 ... 3. JS에서 swiper초기화 new Swiper(선택자, 옵션) 4. 여러 스타일이 있으니 홈페이지에서 'Demos' 참고 gsap 자바스크립트 애니메이션 라이브러리 사용법 gsap 1. CDN 가져오기 2. gsap 이해하기 나같은 경우는 gsap.to를 이용했다. gsap.to(요소, 지속시간, 옵션) 3. 넣고싶은 옵션 공부하기 gsap.to gsap 홈페이지 가서 구경해보자! gsap.to로 구현한 코드 html css .fade-in{ opacity: 0; } javascript con..
-
나의 첫번째 웹사이트 수정편프론트엔드 개발자가 될거야./js 2022. 6. 13. 16:43
맨 처음에 만든 자기소개 웹사이트가 승에 차지 않아서 레이아웃을 대폭 수정했다. 웹사이트 구경가기 첫번째페이지 방명록도 작성할 수 있다. 저장이 되지는 않는다...ㅎㅎ 추후 구현해야지! 그리고 about me! 버튼을 누르면 메인페이지로 들어갈 수 있다. 메인페이지 쟈쟌.. 전에보다 훨씬 깔끔해졌다 :) 단, Develpert 스펠링 틀림.. 인생은 단 한 번뿐, 대충 살아서는 행복할 수 없어! 내가 진짜 좋아하는 문구...... 내 가치관이라서 이 문구를 보면 힘이난다. 그리고 position: fixed를 사용해 navbar도 고정시켰다. 자꾸 겹치는 버그가 발생해서 구글에게 물어보니 body에 padding-top을 해주라고 해서 해줬다 :) 푸터도 만들었다. 이렇게 보니 나름 갖추어진 홈페이지가 ..
-
Git 명령어 정리프론트엔드 개발자가 될거야./git 2022. 6. 13. 16:40
6월 6일 월요일, 6월 7일 화요일에는 git과 친해지는 시간을 가지려고 한다. Git과 Github가 같다고 생각할 수도 있는데 Git = 버전관리 툴 Github = Git에서 관리한 작업들이 저장되는 곳 이렇듯 Git과 Github는 다르다. 그렇다면 Git으로 버전관리를 어떻게 해야할까? 현재 프로젝트에서 버전관리 시작 git init 사용자 정보로 깃 구성하기 git config --global core autocrlf input 지금 이 맥북에서 버전관리 할거다. git config --global user.name "깃아이디" (ex. wjddms4107) git config --global user.email "깃이메일" (ex.wjddms4107@naver.com) 버전관리 등록(모든파..
-
자바스크립트 타이핑 효과프론트엔드 개발자가 될거야./js 2022. 6. 13. 16:35
html, css 자기소개 페이지 만들고나서 JS로 타이핑 효과를 주어서 더 동적으로 만들고 싶었다. 자바스크립트 타이핑 효과 이분의 벨로그를 활용하여 나의 자기소개 페이지에 타이핑 효과를 구현할 수 있었다 :) 코드해석은 해석이 필요한 부분만 정리했다. HTML코드 해석 | 깜빡깜빡하는 효과를 주기위해 | 를 사용했다. CSS코드 해석 .text_box .blink { animation: blink 0.5s infinite; font-size: 20px; } @keyframes blink { from { opacity: 1; } to { opacity: 0; } } animation과 @keyframe의 이름은 blink로 같다. 같은 걸 바라보고 있다는 것을 의미한다. animation의 이름은 @k..