본문 바로가기

분류 전체보기

 (36)
[React] 강의 4주차 (3) -JS (Node.js / NVM, NPM) [국비지원교육] [패스트캠퍼스] React 강의 4주차 (3) - JS (Node.js)) - Node.js 개요 및 설치방법, NVM 사용, NPM (개요, 개발 서버 실행과 빌드) - 유의적 버전(SemVer) - NPM 프로젝트의 버전관리 (.gitignore) * Visual Studio를 사용하여 설명드리겠습니다. [ Node.js ] 1. 개요 및 설치방법 : Chrome V8 JavsScript 엔진으로 빌드된 JavaScript 런타임(프로그래밍 언어가 동작하는 환경) https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org - LTS(Long..
[React] 강의 4주차 (2) -JS ( DOM API, 메소드 체이닝) [국비지원교육] [패스트캠퍼스] React 강의 4주차 (2) - JS (JavaScript) - DOM API - 메소드 체이닝 - 내용정리 Qna [ Javascript ] 1. DOM API : Document Object Model, Application Programming Interface box가 하나일 경우, HTML 삽입 미리보기할 수 없는 소스 box // 요소의 클래스 정보 객체 활용! boxEl.classList.add('active'); let isContains = boxEl.classList.contains('active'); console.log(isContains); // true boxEl.classList.remove('active'); isContains = boxEl..
[React] 강의 4주차 (1) -JS (데이터, 변수, 함수, 조건문) [국비지원교육] [패스트캠퍼스] React 강의 4주차 (1) - JS (JavaScript) - 개요 - 데이터 종류 - 변수, 예약어 - 함수 - 조건문 [ Javascript ] 1. 표기법 - dash-case(kebab-case) ex) the-quick-brown-fox - snake_case ex) the_quick_brown_fox - camelCase ex) theQuickBrownFox - pascalCase ex)TheQuickBrownFox - Zero-based Numbering : 0기반 번호 매기기! 특수한 경우를 제외하고 0부터 숫자를 시작합니다. let fruits = ['Apple', 'Banana', 'Cherry']; console.log(fruits[0]); // '..
[React] 강의 3주차 (3) - CSS 속성 (transform, perspective, backface-visibility) [국비지원교육] [패스트캠퍼스] React 강의 3주차 (1) - CSS 속성 - 변환 (transform, perspective, backface-visibility) - Overwatch 캐릭터 선택 예제 [*변환효과] 1. transform : 요소의 변환 효과 1) transform : 변환함수1 변환함수2 변환함수3 ...; 2) transform: 원근법 이동 크기 회전 기울임; 이동(translate) 확대(scale) 회전(rotate) 기울이기(skew) 2d변환 translate(x,y) scale(x,y) rotate(angle) skew(x-angle,y-angle) 3d변환 translate3d(x,y,z) scale3d(x,y,z) rotate3d(ax,y,z,angle) x축 ..
[React] 강의 3주차 (2) - CSS 속성 (flex,transition) [국비지원교육] [패스트캠퍼스] React 강의 3주차 (1) - CSS 속성 - flex - 전환 [*Flex Container 부모요소에 부여] 1. display : flex : Flex Container의 화면 출력(보여짐) 특성 1) flex : 블록 요소와 같이 Flex Container 정의 2) inline-flex : 인라인 요소와 같이 Flex Container 정의 2. flex-direction : 주 측을 설정 1) row : 행 축 (좌 => 우) 2) row-reverse : 행 축 (우 => 좌) 3) column : 열 축 (위 => 아래) 4) column-reverser : 열 축 (아래 => 위) 3. flex-wrap : Flex Items 묶음(줄 바꿈) 여부 1)..
[React] 강의 3주차 (1) - CSS 속성 (문자, background, position) [국비지원교육] [패스트캠퍼스] React 강의 3주차 (1) - CSS 속성 - 문자 - 배경 - 배치 1. 문자 - color : 글자의 색상 (rgb(0,0,0) = 검정 ) - text-align : 문자의 정렬 방식 (left, right, center, justify(양쪽정렬)) - text-decoration : 문자의 장식(선) - text-indent : 문자 첫 줄의 들여쓰기 (0, 단위(px,em,rem), %) 2. 배경 - background-color : 요소의 배경 색상 ( transparent(투명), 색상) - background-image : 요소의 배경 이미지 삽입 (none, url("이미지경로")) - background-repeat : 요소의 배경이미지 반복 (re..
[React] 강의 2주차 (4) - CSS 속성 (border, box-sizing, display, overflow, opacitiy) [국비지원교육] [패스트캠퍼스] React 강의 2주차 (4) - CSS 속성 - 테두리선(border) - 모서리 둥글게 (border-radius) - 크기 계산(box-sizing) - 넘침 제어(overflow) - 출력 특성(display) - 투명도 - 글꼴 1. 테두리선 (border) : 요소의 테두리 선을 지정하는 단축 속성 : 선-두께(border-width), 선-종류(border-style), 선-색상(border-color) (index.html) (main.css) .cont { width: 100px; height: 100px; background-color: orange; } .item { width: 20px; height: 20px; background-color: pin..
[React] 강의 2주차 (3) - CSS 속성 (width, height, margin, padding) [국비지원교육] [패스트캠퍼스] React 강의 2주차 (3) - CSS 속성 - 너비(width,height), 단위, 외부 여백(margin), 내부여백(padding) 1. 너비 (auto) 브라우저가 자동으로 요소의 너비를 계산 / (단위) px, em, vw등 단위로 지정 -width : 가로너비 -height : 세로너비 -max-width/max-height : 기본값 none -min-width/min-height: 기본값 0 (index.html) (main.css) div { width: 100px; height: 100px; background-color: orange; } .abc { width: 100%; height: 100px; background-color: royalblue..

티스토리툴바