기록저장소

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..

객체 1강. 객체와 프로퍼티 객체(Object) : 연관된 여러 값을 한번에 저장 '자바스크립트의 모든 것이 객체다!' { brandName : '코드잇', bornYear : 2017, isVeryNice : true, worstCourse : null, bestCourse: { title :'자바스크립트', language : 'javascript' } //(property)key : (property)value = property(객체의 속성) // └ string 문자열이지만 └ 문자열, 숫자, 불린, null 가능, 객체내 객체 가능 // 따옴표 생략가능, 생략시 1,2,3 // 1. 첫글자는 반드시 문자, 밑줄(_), 달러기호($) 중 하나로 시작 // 2. 띄어쓰기 x // 3. 하이픈 - ..

제어문 1강. if문 (if statement) //if문 (if statement) if(조건부분){ 동작부분 } let temperature = 0; if(temperature = LIMIT) { console.log(passMessage); } else { console.log(failMessage); } } 유지보수를 위해 140을 변수화해주기 3강. else if문 //if문 (if statement) let temperature = -105; if(temperature = B_SCORE){ console.log('B'); } else if ( totalScore >= C_SCORE){ console.log('C'); } else if ( totalScore >= D_SCORE){ console..

추상화 1강. 할당 연산자 //할당 연산자 (Assignment operators) let name = '코드잇'; let x = 5; x = x - 2; console.log(x); //3 2. 복합 할당 연산자 복합 할당 연산자(Compound assignment operators) : 할당 연산자와 결합하여 더 간략하게 사용가능 //같은 식 x = x + 1; x += 1; 증가(increment), 감소(decrement) 연산자 : 1씩 증가, 감소시킬 때 더 간략히 사용가능 //모두 같은 식 x = x + 1; x += 1; x++; 3. 함수의 실행 순서 //함수정의 function sayHello(){ console.log('Hello'); console.log('Welcome to Cod..

자료형 1강. 숫자형 //덧셈 console.log(1 + 8); //9 //뺄셈 console.log(6 - 7); //-1 //곱셈 console.log(2 * 2); //4 //나눗셈 console.log(5 / 2); //2.5 //나머지 console.log(7 % 3); //1 //참고: 몫 구하기 const a = Math.trunc(4/3) console.log(typeof a, a) //거듭제곱 console.log(2 ** 3); //8 (= 2의 3승); //사칙연산 순서 console.log(2 + 3 * 2); //8 console.log((2+3) * 2); //10 2강. 숫자 연산 익히기 우선순위 () > ** > *, / > +, - 3강. 문자열 기본 console.log..