728x90 반응형 내일배움카드8 [패스트캠퍼스] 프론트엔드 강의 8주차 - 자바스크립트 데이터 실습 [내일배움카드], [국비지원교육] Ch 2. JS 데이터 실습 01. 가져오기, 내보내기 js에서 export 통로는 Default, Named 2가지가 있다. Default는 이름을 지정하지 않아도 되고, Named는 이름을 지정해야되는 차이가 있다. import _ from 'lodash' // From `node_modules`! // default 내보내기는 한번만 가능. 이름 바꿔서 가져오는 것도 가능. import checkType from './getType' // getType.js // named export는 { }안에 써주기 ! // named 된 파일은 이름만 써주면 몇개든 import 가능 // 내보내기란 파일 이름을 바꾸고 싶으면 as 키워드 사용. import { random,.. 2023. 6. 19. [패스트캠퍼스] 프론트엔드 강의 7주차 - JavaScript 개요 및 기본문법 [내일배움카드], [국비지원교육] Ch 2. JS 시작하기 01. 개요(ECMAScript) 및 프로젝트 초기화 ES 2015년 이후 대대적인 혁신 시작. 자바스크립트의 전성기가 시작된다. 통상적으로 JS를 ES라고 부른다. 같은 개념으로 사용됨. 본격적으로 자바스크립트 배우기 시작. 프로젝트 시작후 터미널에 npm init -y 입력. npm install parcel-bundler -D 입력. npm i parcel-bundler -D 로 입력해도 됩니다. 02. 데이터 타입 확인 코드입력 console.log(typeof 'YoHa!') //string console.log(typeof 123) // number console.log(typeof true) //boolen console.log(ty.. 2023. 6. 16. [패스트캠퍼스] 프론트엔드 강의 6주차 - NPM 개요 [내일배움카드], [국비지원교육] 03. NPM 개요(1) NPM이란? 그림을 통해 이해하는 NPM 패키지(모듈)들을 NPM에서 관리해서 사용자가 $ npm install 패키지명 을 입력하여 사용할 수 있게 해준다. 현재 약 100만개(WOW~)의 NPM 패키지 있다고 합니다. 04. NPM 개요(2) 터미널에 다음 코드 실행 npm init -y ※ 이때 터미널은 powershell로 해주세요. 해당 프로젝트에 package.json파일이 생성됩니다. { "name": "part2_ch1", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && .. 2023. 6. 16. [패스트캠퍼스] 프론트엔드 강의 5주차 - Ch 9. JS 선행 [내일배움카드], [국비지원교육] Ch 9. JS 선행 01. 개요 javaScript 선행학습입니다~ PascalCase는 camelCase와 다르게 첫 글자도 대문자입니다. 기본적으로 개발언어들은 0부터 시작합니다. 02. 데이터 종류 String : 문자 데이터 Number : 숫자 데이터 Boolean : 불린 데이터(참거짓) Undefined : 값이 할당되지 않음. 자바스크립트만의 특징. Null : 의도적으로 값이 비어있음. 주의 : 자바스크립트에서는 ` 백틱기호로만 보간($으로 끼워넣는것)이 가능하다. let myName = "YoHa"; let hello = `Hello ${myName}?!`; Object : 객체 데이터 { 중괄호 } 사용 Array : 배열 데이터 [ 대괄호] 사용 .. 2023. 6. 15. [패스트캠퍼스] 프론트엔드 강의 4주차 - CH8. CSS속성 - 08. 크기 계산(box-sizing)~14. 배경 [내일배움카드], [국비지원교육] 08. 크기 계산(box-sizing) 기본값 : content-box 패딩과 보더로 달라진 박스사이즈를 맞추고 싶을때 사용 box-sizing으로 박스크기를 자동으로 맞춰준 모습 09. 넘침 제어(overflow) 10. 출력 특성(display) 인라인 요소인 span에 display: block;을 적용시켜서 넓이, 높이를 지정할 수 있게 바꿈. 11. 투명도 12. 글꼴 되도록 line-height는 배수로 입력하는 것이 좋다. 글꼴1, 글꼴2 여러개 중 우선순위를 정해서 브라우저가 글꼴을 출력해준다. 만약에 글꼴1이 적합하지 않으면 글꼴2가 채택된다. 글꼴2부터 아무것도 안된다면 글꼴계열에서 브라우저가 임의로 채택해서 출력해준다. 글꼴계열 종류 13. 문자 14.. 2023. 6. 13. [패스트캠퍼스] 프론트엔드 강의 3주차 - Ch 7. CSS 개요 [내일배움카드], [국비지원교육] Ch 7. CSS 개요 01. 기본 문법, 주석 선택자는 CSS를 적용할 대상임. 예를 들어 아래의 예제에서는 div 가 선택자임. html YoHa css div{ font-size:50px; color:blue; text-decoration:underline; } 02. 선언 방식 * 기본적으로 html, css, js는 따로 작성해야 유지보수가 쉽기때문에 html코드에 css를 직접 작성하는 내장방식은 추천하지 않는다. link 방식 : css를 html 로 연결 (병렬방식) @import 방식 : css를 다른 css로 연결 (직렬방식) ※ link방식이 속도가 빠르므로 권장합니다. 그러나 의도적으로 속도를 늦추는 경우에는 직렬방식를 쓰기도 합니다. 하지만 아직까.. 2023. 6. 12. 이전 1 2 다음 728x90 반응형
