단비의 코딩 공부 blog

1. 페이드 효과 *{ padding: 0; margin: 0; } li{ list-style: none; } /* 갤러리 전체 */ #gallery{ margin: 50px; width: 500px; height: 280px; border: 3px solid black; position: relative; /* 원버튼 앱솔루트 기준을 현재 요소로 변경 */ } /* 갤러리 사진 파트 */ #gallery #photo{ width: 100%; height: 100%; position: relative; /* li의 앱솔루트 기준을 현재 요소로 변경 */ } #gallery #photo ul{ width: 100%; height: 100%; } /* 모든 li(사진)를 겹쳐보이게 처리 */ #gallery..

MINICOOPER GALLERY GRAY GREEN BLUE RED YELLOW @charset "utf-8"; /* base */ *{ padding: 0; margin: 0; } li{ list-style: none; } a{ text-decoration: none; color: #333; } /* title */ h3{ font-size: 24px; color: #333; margin: 20px; margin-bottom: 0; } /* tabbox */ .tabbox{ width: 600px; height: 450px; border: 3px solid #333; margin: 20px; margin-top: 10px; } .tabbox .tabbtn{ width: 100%; height: 50p..

1. 전체메뉴 탑메뉴1 탑메뉴2 탑메뉴3 탑메뉴4 로고 메인메뉴1 하위메뉴1_1 하위메뉴1_2 하위메뉴1_3 하위메뉴1_4 하위메뉴1_5 하위메뉴1_6 메인메뉴2 하위메뉴2_1 하위메뉴2_2 하위메뉴2_3 하위메뉴2_4 하위메뉴2_5 하위메뉴2_6 메인메뉴3 하위메뉴3_1 하위메뉴3_2 하위메뉴3_3 하위메뉴3_4 하위메뉴3_5 하위메뉴3_6 메인메뉴4 하위메뉴4_1 하위메뉴4_2 하위메뉴4_3 하위메뉴4_4 하위메뉴4_5 하위메뉴4_6 메인메뉴5 하위메뉴5_1 하위메뉴5_2 하위메뉴5_3 하위메뉴5_4 하위메뉴5_5 하위메뉴5_6 /* base */ *{ padding: 0; margin: 0; font-size: 12px; color: #666666; } li{ list-style: none; } a..

DOCTYPE html> Search/Filter Menu OSSAM Coffee 아메리카노 카페라떼 바닐라라떼 카라멜라떼 카페모카 푸라푸치노 주문 내역 커피 : 가격 : 원 *{ padding: 0; margin: 0; color: #fff; } li{ list-style: none; } a{ text-decoration: none; } .coffeeBox{ width: 500px; max-height: 350px; overflow: hidden; padding: 20px; box-sizing: border-box; background-color: #333; } .leftBox{ float: left; width: 50%; max-height: 350px; overflow: hidden; border-..

1. 아래로 떨어지는 유형 DOCTYPE html> 패밀리사이트 - 아래로 떨어지는 유형 FAMILYSITE 네이버 다음 네이트 구글 /* base */ *{ padding: 0; margin: 0; font-size: 12px; color: #666666; } li{ list-style: none; } a{ text-decoration: none; } /* layout */ header{ width: 1000px; height: 100px; margin: 0 auto; background-color: coral; } section{ width: 1000px; height: 700px; margin: 0 auto; background-color: antiquewhite; } footer{ width: 1..

1. 변수키워드 DOCTYPE html> ES6 문법 //1. var : 초기 변수 키워드 - 함수를 기준으로 전역변수와 지역변수로 나뉨 var test1 = 10; var test1 = 20; //재선언이 가능 test1 = 30; //재할당 가능 //2. let - 코드블록 { }을 기준으로 전역변수와 지역변수로 나뉨 let test2 = 10; //let test2 = 20; //재선언이 불가능 test2 = 30; //재할당 가능 //3. const - 코드블록 { }을 기준으로 전역변수와 지역변수로 나뉨 const test3 = 10; test3 = 30; //재선언, 재할당 불가능 2. 화살표 함수 DOCTYPE html> ES6 문법 //1. 선언적 함수 function test1(){ } ..

1. var 키워드 DOCTYPE html> JS - ES6 //var : 변수를 선언하는 키워드 //1. 재선언 허용 var cup = '물'; var cup = '콜라'; //에러가 없음 //2. 지역변수랑 전역변수를 함수를 기준으로 처리 var a = 10; //전역변수 function test(){ var b = 20; //지역변수 } if(a == 10){ var c = 30; //전역변수 } 2. let 키워드 DOCTYPE html> JS - ES6 //let : 변수를 선언하는 키워드 //1. 재선언시 에러 let cub = '물'; //let cub = '콜라'; //2. 전역변수와 지역변수의 기준은 {}코드블록 let a = 10; //전역변수 console.log(a); //호출잘됨 ..