패캠 FE 공부

코딩 공부를 마음 먹었지만 이제까지 게으르게 미뤄왔었다.오늘 부터 하루하루 성장하는 개발자 되기위한 첫걸음으로서 공부한 것을 기록하기로 다짐!!Hyper Text Markup Language페이지의 제목, 문단, 표 이미지, 동영상 등 웹의 구조를 담당 Cacading

2일차 HTML 공부

3일차 공부 CSS개요

4일차 작심삼일 +1

5일차 어제에 이어서 CSS 속성 공부 CSS 속성 11. 글꼴 1. font-style font-style 글자의 기울기 normal 기울기 없음 italic 이텔릭체 oblique 기울어진 글자 2. font-weight font-weight 글자의 두께

6일차 CSS 속성 나머지 공부하기 CSS 속성 15. 플렉스 (정렬) Container 수평정렬 할때 display: flex 사용 display Flex Container의 화면 출력(보여짐) 특성 Flex : 블럭

7일차

어제 공부한 오버워치 캐릭터 선택 예제를 복습하기 위해F1 드라이버들로 다시 따라 만들어봤다

8일차 JS 선행 JS 선행 표기법 dash-case(kebab-case) snake_case camelCase PascalCase dash-case(kebab-case) the-movie-doctor-strange-multi-verse HTML CSS 사용

JS 선행 이어서

스타벅스 사이트 실습 준비하기

헤더

스타벅스 예제 메인메뉴

BEM과 전역배지 스타벅스예제 실습

14일차 스타벅스 사이트 예제 전역버튼 공부 전역버튼 줄 하나 차지하고 있는 부분 Section Section 별로 설계 visual margin-top 120px - header inner height 120px 관련 타이틀이 이동하면 버튼도 따라올수 있게 타이

순차적으로 보이기

16일차 요소 슬라이드 요소 슬라이드 수직 슬라이드 swiperjs

화면 슬라이드 실습

리워즈 Youtube iframe API 실습

유튜브 영상배경 - 반복 애니메이션 고정이미지배경3D 애니메이션

스크롤 위치 계산 애니메이션 공부back-to-position 지정delay-0~3 지정해서 스크롤시 순차적으로 나오는 구현ScrollMagic Cdn스크롤 매직 기능을 통해서 스크롤 할때 순차적으로 보이는 기능 구현Swiper를 이용해 슬라이드 구현swiper-pre

푸터ScrollTo제일 마지막 버튼은 여백이 필요하지않으니 초기화 (margin-right: 0;)img 요소가 display:block +margin: 0 auto; 인경우, width 속성이 없이도 가운데 정렬이 가능자바스크립트로 년도 자동출력 기능 구현gsap S

Git hub 사용법 버전관리 컴퓨터 파일의 변경사항을 추적하고 여러 사용자들 간에 해당 파일 작업을 조율하기 위한 대표적인 버전 관리 시스템(VCS)스타벅스 예제 업로드 해보기 VScode 터미널 창 열고 적기스타벅스 예제 Github에 업로드!

깃에 커밋을 한뒤에 수정을 할경우 VScode 파일 옆에 M자가 표시된다 Modified (수정됨)새롭게 파일이 만들어 졌을때 U Untracked file 새롭게 생성돼 추적하지 않은 파일별도의 브랜치를 만들어서 마스터 브랜치로 합치기 -> Merge 병합signi

git hub 프로젝트 vs code 터미널 compare:master를 compare:signin으로 선택 변경 -> Able to mergeCreate pull request버튼 클릭!Confirm Merge병합 완료!Macos lsWINDOW dircd desk

Node.js NPM NVM 공부

JavaScript 시작하기

27일차 JS 함수 함수 복습 화살표 함수 화살표함수는 축약형으로 코드를 최소화 할수 있어 편리함 화살표함수로 객체데이터{}를 반환할때는 ()로 꼭 감싸줘야함