본문 바로가기

💬/ㅍㅅㅌㅋㅍㅅ 챌린지

(50)

패스트캠퍼스 챌린지 18일차 🧸 18일차 Part 3. JavaScript Essentials Ch 2. JS 시작하기 Ch 2. JS 시작하기 주제 JS 기초 문법 주요 내용 🔗 데이터 타입 import getType from './getType'; export default function getType(data) { return Object.prototype.toString.call(data).slice(8, -1); } 🔗 산술, 할당 연산자 🔗 비교, 논리 연산자 🔗 삼항 연산자 🔗 조건문 If Else, Switch export default function random() { return Math.floor(Math.random() * 10); } 🔗 반복문 For for (시작조건; 종료조건; 변화조건) {} 🔗 변수..

패스트캠퍼스 챌린지 17일차 🧚‍♀️ 17일차 Part 3. JavaScript Essentials Ch 1. Node.js Ch 1. Node.js 주제 Node.js npm 주요 내용 JS는 컴퓨터 환경(Node.js)에서도 동작하고, 브라우저(Chrome)에서도 동작한다. 🔗 npm (Node Package Manager) node_modules: npm 설치 패키지들이 담겨 있는 곳 package-lock.json: 자동으로 패키지 관리 package.json: 우리가 직접적으로 패키지 관리 "devDependencies": { "parcel-bundler": "^1.12.5" }, "dependencies": { "lodash": "^4.17.21" } # 개발용 의존성 패키지 설치 (개발할 때만 필요하고, 실제로 동작할 ..

패스트캠퍼스 챌린지 16일차 📚 16일차 Part 2. Git을 활용한 버전관리 Ch 2. Markdown Ch 2. Markdown 주제 README.md 주요 내용 🔗 장점 문법이 쉽고 간결하다. 관리가 쉽다. 지원 가능한 플랫폼과 프로그램이 다양하다. 🔗 단점 표준이 없다. 모든 HTML 마크업을 대신하지 못한다. # 제목(Header) # 제목 1 ## 제목 2 ### 제목 3 #### 제목 4 ##### 제목 5 ###### 제목 6 # 문장(Paragraph) 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 # 줄바꿈(Line Breaks) 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세 # 강조(Emphasis) _이텔릭_ **두..

패스트캠퍼스 챌린지 15일차 👾 15일차 Part 2. Git을 활용한 버전관리 Ch 1. 버전관리 Ch 1. 버전관리 주제 Git Github 주요 내용 🔗 버전 생성과 업로드 # Git 최초 설치 후 한 번만 관리하면 되는 내용들 # 개행문자(Newline) 설정 ## macOS $ git config --global core.autocrlf input ## Windows $ git config --global core.autocrlf true # 사용자 정보 # 커밋(버전 생성)을 위한 정보 등록 $ git config --global user.name 'YOUR_NAME' $ git config --global user.email 'YOUR_EMAIL' # 구성 확인 ## Q키를 눌러서 종료 $ git config --glo..

패스트 캠퍼스 챌린지 14일차 ☕ 14일차 Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트 Ch 10. 스타벅스 예제 Ch 10. 스타벅스 예제 주제 고정 이미지 배경 3D 애니메이션 스크롤 위치 계산 애니메이션 다중 요소 슬라이드 푸터 페이지 상단으로 이동(ScrollTo) 주요 내용 🔗 HTML Entities (HTML 특수기호들) https://dev.w3.org/html5/html-author/charref Character Entity Reference Chart dev.w3.org 새로 알게 된 내용 🔗 뒤집기 애니메이션 backface-visibility: hidden; 앞 뒤 body { padding: 50px; } .container { width: 100px; height: 100px; backgr..

패스트 캠퍼스 챌린지 13일차 🐣 13일차 Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트 Ch 10. 스타벅스 예제 Ch 10. 스타벅스 예제 주제 요소 슬라이드 유튜브 영상 배경 주요 내용 새로 알게 된 내용 🔗 Swiper JS 라이브러리 (지난번 거 이어서) 🔗 Youtube iframe API https://developers.google.com/youtube/iframe_api_reference?hl=ko iframe 삽입에 대한 YouTube Player API 참조 문서 | YouTube IFrame Player API | Google Developers Embed a YouTube player in your application. developers.google.com // Youtube IFrame A..

패스트 캠퍼스 챌린지 12일차 🍰 12일차 Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트 Ch 10. 스타벅스 예제 Ch 10. 스타벅스 예제 주제 순차적 애니메이션 요소 슬라이드 주요 내용 🔗 복습하기 선택자 우선순위 BEM 요소__일부분 요소--상태 새롭게 알게 된 내용 🔗 Swiper JS 라이브러리 https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com //? 슬라이드 요소 관리 new Swiper(".notice-l..

패스트 캠퍼스 챌린지 11일차 🔮 11일차 Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트 Ch 10. 스타벅스 예제 Ch 10. 스타벅스 예제 주제 헤더와 드롭다운 메뉴 주요 내용 새롭게 알게 된 내용 top이나 bottom 속성을 사용하지 않아 수직 위치 값이 없다면, 요소의 원래 위치를 그대로 사용한다. 만약 position: absolute;를 사용했다면, (위치상) 부모 요소를 기준으로 하므로 화면의 뷰포트 좌우 끝까지 늘어날 수 없게 된다. 🔗 BEM(Block Element Modifier) : HTML 클래스 속성의 작명법 요소__일부분 요소--상태 일반적으로 block 요소는 width를 최대한 늘어나려고 하지만, position fixed와 absolute 요소는 최소한 줄어들려고 한다. 🔗 Lodas..

이전 1 2 3 4 5 6 7 다음

티스토리툴바