CSS HTML HOME ABOUT Entertain view search Board
참고 URL : webberstudy.com/html-css/css-2/multi-column-layout/ 다단 레이아웃 만들기 float 속성을 이용해, 실제로 CSS 다단 레이아웃을 만들어 봅니다. 이를 통해서 기본 HTML 문서를 제작할 때, 기본 레이아웃을 어떻게 잡는지 알아보고, 중급 쳅터에서 다뤘던 스타일 속성들을 다시 webberstudy.com CSS body { font: sans-serif; } .frame { width: 85%; margin: 0 auto; border: 1px solid blue; } header { padding: 40px 10px; text-align: center; border: 1px solid darksalmon; /*background-color: da..
CSS 부분 BODY 부분 Header Nav Link 1 Link 2 Link 3 Content 영역 111111 222222 Footer 결과 화면
Promise : 비동기 처리 방식으로 실행된 결과의 성공과 실패를 관리한는 객체 Promise는 비동기 작업을 여러 개 수행할 때 더욱 진가가 나타난다. 그 이유는 비동기 작업이 순서대로 수행되어야 할 때가 많기 때문이다. 장점 - 콜백 지옥의 문제점 해결 : 비동기 처리를 순서대로 처리할 때 콜백함수처럼 중첩할 필요가 없다. 즉, 소스를 간결하고 직관적으로 작성할 수 있다. - 비동기 처리를 완료한 후 반환값 관리가 쉬움 : 비동기 처리를 종료한 후 반환값을 성공과 실패 모두 then()과 catch()에 전달된 함수를 통해 관리할 수 있다. const promise = new Promise((resolve, reject) => { console.log('doing something...'); set..
1. File - Preference - Setting 2. Extension - Live Server Config 의 Custom Browser에서 원하는 걸 선택한다.
JSON (JavaScript Object Notation) 사용법 stringify : Javascript 객체를 텍스트로 변환할 때 사용 parse : 텍스트를 객체로 바꾸는 작업 1. Object to JSON (stringify) let json = JSON.stringify(true); console.log(json); // true // 배열 -> json json = JSON.stringify(['apple', 'banana']); console.log(json); // ["apple","banana"] //객체 선언 const rabbit = { name : 'tori', color : 'white', size : null, birthDate : new Date(), symbol : Sym..
배열 1. 선언(Declaration) const arr1 = new Array(); const arr2 = [1,2]; 2. Index Position const fruits = ['AA', 'BB']; console.log(fruits); // ["AA", "BB"] console.log(fruits[0]); // AA 3. 순회 및 검색 (Looping over an array) // for for(let i = 0; i < fruits.length; i++) { console.log(fruits[i]); } // of for(let fruit of fruits){ console.log(fruit); } // forEach fruits.forEach(function(fruit, index, arra..
콜백함수(CallBack function) 매개변수로 전달하는 함수 실습 - 매개변수로 들어온 함수를 10번 실행 function callTenTimes(callback) { for(var i = 0; i < 10; i++){ callback(); } } //선언적 함수 function testA() { console.log('testA() 함수입니다. '); } //이름이 없는 함수 = 익명함수 var testB = function () { console.log('testB() 함수입니다. '); }; //함수 호출 callTenTimes(testA); callTenTimes(testB); //함수를 선언하며 바로 매개변수로 전달 callTenTimes(function () { console.log('..
1. Property value shorthand / Constructor function // 3. Property value shorthand const person1 = {name : 'aa', age : 2}; const person2 = new Person('bb',11); console.log(person1); // {name: "aa", age: 2} console.log(person2); // Person {name: "bb", age: 11} // 4. Constructor function function Person(name, age) { this.name = name; this.age = age; } 2. key 값이 있는지 체크 (in operator: property existen..
문서모드 설정방법 쿼크모드 : IE7 : IE8 : IE9 : 최신 IE :
h1 , TextNode를 생성하여 body 연결 테스트 결과
window.onload 실행순서 Process-1 Process-2 실행결과를 확인해보면 HTML부분을 다 읽고나서 onload함수가 실행되는 것을 알 수 있다. 순서 : Process -1 ---> Process -2 ---> onload function()