기록저장소

과제로 워밍업 1강. JavaScript의 기능들 2강. Math 정리노트 절대값(Absolute Number) : Math.abs(x) console.log(Math.abs(-10)); //10 console.log(Math.abs(10)); //10 최댓값(Maximum) : Math.max(a, b, c) console.log(Math.max(2, -1, 0); //2 최솟값(Minimum) : Math.min(a, b, c) console.log(Math.max(2, -1, 0); //-1 거듭제곱(Exponentiation) : Math.pow(x, y) console.log(Math.pow(2, 3); //8 제곱근(Square Root) : Math.sqrt(x) console.log(Mat..

HTML, CSS와의 콜라보레이션 1강. 환경설정 F12 - console 에서 임시적용 가능 2강. HTML의 해결사, 자바스크립트 Home Home Home //▽ Home Home //photo라는 id값을 가진 요소 가져오기 //src 변경 Home 3강. 코드를 함수로 빼기 Home Home //photo라는 id값을 가진 요소 가져오기 //src 변경 Home //clickSeoul이라는 함수 호출 //간략히 하기 Home Home //하나의 함수로 남기기 .......?? seoul tokyo 4강. 폰트 굵기 바꾸기 5강. jQuery jquery cdn 최신버전, minified Home Home //▽ 6강. jQuery 설치 정리 노트 1. 링크 사용하기 _ jQuery CDN 더 빠..

반응형 웹 1강. 반응형 웹 h1{font-size: 24px;} @media (min-width: 768px){ h1{font-size: 36px;} } @media (min-width: 992px){ h1{font-size: 48px;} } 2강. 반응형 그리드 3강. 이노 //세로정렬 .helper{ display:inline-block; vertical-align: middle; } .center{ display:inline-block; vertical-align: middle; } 부트스트랩 1강. 새로운 기술을 배우는 법 2강. 부트스트랩 소개 twitter 개발자 제공의 HTML, CSS, JS 프레임워크 css, js 스타일태그 가져오기 3강. 부트스트랩 그리드 container, row(..

포지셔닝 1강. relative 포지션 position: static default값으로 기본으로 있어야할 곳에 위치함 position: relative 상대적인, 요소의 원래 위치를 기준으로 이동, 위치를 옮겨도 기존 공간은 차지함 2강. 해변의 몽숭이 3강. 명언 4강. fixed 포지션 position: fixed 브라우저를 기준으로 고정된 위치, 기존 공간 상실 5강. absolute 포지션 포지셔닝이 안 된 요소 / 포지셔닝이 된 요소 static / relative, absolute, fixed relative : 원래 위치 기준 fixed : 브러우저 기준 absolue : 가장 가까운, 포지셔닝된 조상 요소 기준 6강. 우표 붙이기 float 1강. float float : 3d공간에서 위..

CSS 제대로 활용하기 1강. 선택자 정리 //태그이름 h1 {color: orange;} //클래스,아이디 .important {color: orange;} #favorite {color: blue;} //자식 .div1 i {color: orange;} //직속자식 .div1 > i {color: orange;} //복수선택 .two, .four {color: orange;} //여러조건 .outside.one {color: blue;} //가상클래스(pseudo-class) .div1 p:nth-child(3) {color: blue;} //.div1의 자식인 태그 중 3번째 .div1 p:first-child {color: red;} //.div1의 자식인 태그 중 첫 번째 .div1 p:last..

Box Model 1강. Box Model 소개 border, margin, padding 2강. margin, padding 3강. margin & padding 정리 padding : 위 우 아래 좌 margin : 위 우 아래 좌 margin-left : auto; margin-right : auto; margin : 0 auto; padding과 margin의 차이 내용(content), 패딩(padding), 테두리(border)로 이루어진 요소에서 내용과 테두리사이의 여유공간이 padding 요소 주위의 여백은 margin 4강. width, height 5강. width, height 정리 width, min-width, max-width height, min-height, max-heigh..

수업소개 1강. 서비스가 주도하는 시대에 살아남는 법 서비스가 주도하는 시대 _ 서비스를 통해 새로운 가치창출, 웹 왜 하필 '웹'일까? _ 연결고리, 모바일앱 -> Progressive Web Apps(PWAs) '프로그레시브 웹 앱'은 웹의 장점과 앱의장점을 결합한 것이며, 앱 수준과 같은 사용자 경험을 웹에서 제공하는것을 목적으로 함, All-in-One 어플리케이션 웹접근성은 https://www.w3.org/TR/WCAG21/ (한글 비공식 번역은 http://www.kwacc.or.kr/WAI/wcag21/) 웹표준은 https://www.w3.org/standards/ https://seulbinim.github.io/WSA/ 2강. 1분 안에 웹사이트 런칭하기 repl.it 온라인 프로그래..

과제로 복습하기 1강. 팩토리얼! 0! = 1 1! = 1 2! = 1 * 2 = 2 3! = 1 * 2 * 3 = 6 .. 을 구하는 함수 만들기 function factorial(n) { let result = 1; // 여기에 코드를 작성해 주세요. for(let i =1; i= 1; i--) { result = result * i; } return result; } // 테스트 코드 console.log(factorial(12)); console.log(factorial(6)); console.log(factorial(3)); console.log(factorial(0)); 2강. 거스름돈 구하기 function calculateChange(payment, cost) { // 코드를 작성해 주세요..

자료형 심화 1강. 다양한 숫자 표기법 //숫자 표기법 let millionaire = 100000000; let myNumber = 1e9; //지수표기법 1 * e의 9승 console.log(millionaire); //100000000 console.log(myNumber); //100000000 console.log(millionaire === myNumber); //true console.log(25e5 === 2500000); //true console.log(5.3e3 === 5300); //true console.log(-6.1e8 === -610000000); //true console.log(16e-5 === 0.0016); //true console.log(3.5e-3 === 0.0..

배열 1강. 배열 순서(위)가있는 값을 활용할 때 객체보다 유용 //배열(Array) let courseRanking = { '1st' : 'js기초', '2nd' : 'git', '3rd' : '컴퓨터개론', '4th' : '파이썬' } //▽ let courseRanking = [ 'js기초', //요소(element) 'git', '컴퓨터개론', '파이썬' ] //배열내 순서 index == propertyName(객체) //indexing : 원하는 배열의 요소를 가져올 때, 0~ //console.log(배열이름[index]); console.log(courseRanking[0]); //js기초 console.log(courseRanking[2]); //컴퓨터개론 console.log(cours..