일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- 팝업레이어
- github
- SQLD후기
- 바닐라자바스크립트
- TweenMax.js
- sqld52회차
- Slide
- 기초
- JS
- VANILLA
- 마우스커서
- 로또 회차
- 애니메이션
- 웹표준
- asp
- CSS
- 텍스트조절
- JSP
- IP차단
- git
- jQuery
- SQL
- 웹개발키워드
- Python
- 웹접근성
- 프론트앤드키워드
- 바닐라스크립트
- 코딩공부
- sqld
- 바닐라 자바스크립트
- Today
- Total
목록전체보기 (61)
단비의 코딩 공부 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-..
DOCTYPE html> JS - 보드프리뷰 공지사항 07월 토요영화상영이 있는 날입니다. 어린이들과 함께 방문해 주세요 2020-06-16 2020년 어린이 허준교실(접수06/15~) 2020-06-15 제8기 문화시민봉사단(대학생) 모집 2020-06-14 "Merry 한방 떡케이크 만들기" 2020-06-13 더보기 /* base */ *{ padding: 0; margin: 0; } li{ list-style: none; } a{ text-decoration: none; } body{ background-color: #ededed; } /* 공지사항 */ .notice{ position: relative; width: 500px; height: 40px; margin: 50px; padding: ..
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); //호출잘됨 ..