단비의 코딩 공부 blog

1. 쿠키생성 DOCTYPE html> JS - Cookie //쿠키 : 사용자의 컴퓨터에 저장되는 작은 텍스트파일 데이터 //웹서버가 웹페이지를 브라우저로 보내면 연결이 종료되고, 서버는 자용자에 대한 정보는 기억하지 않음 //쿠키는 사용자에 대한 정보를 기억하는 방법으로 활용 //쿠키 데이터 : 이름=값 => 쌍으로 저장됨 document.cookie = "username=test; userpass=1234"; 2. 쿠키데이터 읽기 DOCTYPE html> JS - Cookie //쿠키 : 사용자의 컴퓨터에 저장되는 작은 텍스트파일 데이터 //웹서버가 웹페이지를 브라우저로 보내면 연결이 종료되고, 서버는 자용자에 대한 정보는 기억하지 않음 //쿠키는 사용자에 대한 정보를 기억하는 방법으로 활용 //쿠..

1. 유튜브영상 가지고 오기 2. 유튜브영상컨트롤 3.유튜브 아이프레임 재생 멈춤 일시정지

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