Developer Camp[Fastcampus NKLCB] 2021.07/2021.07~ FastCampus 네카라쿠배2기16 5일차 : Javascript(1) INDEX Javascript 연습 방법 변수와 상수 변수 let 상수 const null, undefined 연산자 비교연산자 조건문 if, else, else if switch 문 함수 ES6 ECMAScript6, ES2015 template literal arrow function 객체 Javascript electron으로 데스크탭 프로그램을 만들수도 있다. react native, nativescript로 모바일용으로도 만들 수 있다. node.js로 javascript를 사용할 수 있기 때문에 iot에서도 사용할 수 있다. https://learnjs.vlpt.js 참조 연습 방법 codesandbox에서 주황색(vanaila script)을 통해서 javascript 자체만 사용할 수 있다.. 2021. 7. 16. 4일차 : CSS Flex https://heropy.blog/2018/11/24/css-flexible-box/ CSS Flex(Flexible Box) 완벽 가이드 많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS F heropy.blog Flex Flex를 사용하기 전 블럭들을 가로로 배치할 경우1 .container { border: 2px solid red; } .container .item { width: 100px; height: 100px; border: 2px solid; border-radius: 10px; display: in.. 2021. 7. 15. 4일차 : CSS Animation Animation animation 선언은 @keyframes로 하는 것 단축속성 animation : 이름 지속시간 [타이밍함수 대기시간 반복횟수 반복방향 전후상태 재생/정지]; 예시 .box { width: 100px; height: 100px; background: tomata; } .box:hover { animation: hello 2s linear infinite alternate; // alternate하면 반대도 모션 구현된다. } @keyframes hello { 0% { width: 100px; } 100% { width: 500px; } } ✅ 트랜지션이랑 무엇이 다른가? 트랜지션은 0%와 100%로 이루어져 있는데 animation과 keyframe를 이용하면 중간 과정을 만들 수 .. 2021. 7. 15. 4일차 : Figma 김데레사 강사님(html, css) 사전 과제 이건 점수에 반영하지 않는다. 배운 것들을 이용해서 얼마나 UI를 만들 수 있을지 스스로 점검합니다. 1:1 피드백이 올 때 질문을 주면 피드백도 줄 것. 안내 영상으로 찍어놨다. 영상 틀어주겠다. frontend-2nd create a new repository Taejoon(영어이름) 네카라쿠배 2기 과제 저장소 Private Add a README file 체크해야 main으로 설정된다. 체크 -> 만들기 노트북 클론작업 clone - 복사 - VSCode 구동 - 터미널 git clone {복사} cd Taejoon code . : 새로운 비쥬얼 스튜디오 열리면서 내가복제한 것이 열린다. (안열리면 파일 오픈 - 클론한 저장소 열기해도 된다.) -----------------------.. 2021. 7. 15. 4일차 : CSS 배경 Background background : 색상 이미지경로 반복여부 위치 스크롤특성 예시 일부 속성을 사용하지 않을 수도 있다. .box1 { background: url(../img/image.jpg) no-repeat right scroll; } background-image 기본 값 none url(경로) 요소의 배경으로 넣는 것이기 때문에 요소의 크기가 반드시 크기가 있어야 한다. .box { background-image: url( width: 120px; height: 80px; } 여러개 배경을 넣을 수도 있다. IE8이하 사용할 수 없다. (일반적으로 11버전이라 문제 없을 것) 일반적으로 다중으로 배경에 넣는 일은 많지 않다. background-repeat 기본값 : repeat (기본.. 2021. 7. 15. 3일차 : Git에 대해서 https://nonmajor.tistory.com/193?category=960265 GIT/GITHUB(1) 최우영 강사님 blog : https://ulgoon.github.io/ github : https://github.com/ulgoon/ email : me@ulgoon.com discord : @ulgoon 수업자료 https://github.com/ulgoon/nklcb-git/tree/main/handouts Goal CLI 기.. nonmajor.tistory.com 깃은 자주 사용하기 때문에 틈날 때마다 계속 보기 위해서 별도의 게시판에 만들었다. 2021. 7. 15. 이전 1 2 3 다음
