+슬라이드(좌우) 1단계 : 가로 html, css초기화, 가로 css See the Pen b-1 1단계 by ++EXP (@pp_exp) on CodePen. 2단계 : 세로 html, css 헤더, 이미지 슬라이드, 메인, 푸터 영역 사이즈 지정 및 배열 See the Pen b-1 2단계 by ++EXP (@pp_exp) on CodePen. 3단계 : 가로 html 작성 및 html 구조 완성 css 구조 완성 See the Pen b-1 3단계 by ++EXP (@pp_exp) on CodePen. 4단계 : jquery 작성 및 기능 테스트 See the Pen b-1 4단계 by ++EXP (@pp_exp) on CodePen. 5단계 : a태그 삽입 및 디자인 요소 삽입(h2, p, ta..
+슬라이드(fade) 1단계 : 가로 html, css초기화, 가로 css See the Pen a-4 1단계 by ++EXP (@pp_exp) on CodePen. 2단계 : 세로 html, css 헤더, 이미지 슬라이드, 메인, 푸터 영역 사이즈 지정 및 배열 See the Pen a-4 2단계 by ++EXP (@pp_exp) on CodePen. 3단계 : 가로 html 작성 및 html 구조 완성 css 구조 완성 See the Pen a-4 3단계 by ++EXP (@pp_exp) on CodePen. 4단계 : jquery 작성 및 기능 테스트 See the Pen a-4 4단계 by ++EXP (@pp_exp) on CodePen. 5단계 : a태그 삽입 및 디자인 요소 삽입(h2, p, ..
+슬라이드(fade) 1단계 : 가로 html, css초기화, 가로 css See the Pen a-3 1단계 by ++EXP (@pp_exp) on CodePen. 2단계 : 세로 html, css 헤더, 이미지 슬라이드, 메인, 푸터 영역 사이즈 지정 및 배열 See the Pen a-3 2단계 by ++EXP (@pp_exp) on CodePen. 3단계 : 가로 html 작성 및 html 구조 완성 css 구조 완성 See the Pen a-3 3단계 by ++EXP (@pp_exp) on CodePen. 4단계 : jquery 작성 및 기능 테스트 See the Pen a-3 4단계 by ++EXP (@pp_exp) on CodePen. 5단계 : a태그 삽입 및 디자인 요소 삽입(h2, p, ..
+슬라이드(좌우) 1단계 : 가로 html, css초기화, 가로 css See the Pen a-2 1단계 by ++EXP (@pp_exp) on CodePen. 2단계 : 세로 html, css 헤더, 이미지 슬라이드, 메인, 푸터 영역 사이즈 지정 및 배열 See the Pen a-2 2단계 by ++EXP (@pp_exp) on CodePen. 3단계 : 가로 html 작성 및 html 구조 완성 css 구조 완성 See the Pen a-2 3단계 by ++EXP (@pp_exp) on CodePen. 4단계 : jquery 작성 및 기능 테스트 See the Pen a-2 4단계 by ++EXP (@pp_exp) on CodePen. 5단계 : a태그 삽입 및 디자인 요소 삽입(h2, p, ta..
+슬라이드(상하) 1단계 : 가로 html, css초기화, 가로 css See the Pen a-1 1단계 by ++EXP (@pp_exp) on CodePen. 2단계 : 세로 html, css 헤더, 이미지 슬라이드, 메인, 푸터 영역 사이즈 지정 및 배열 See the Pen a-1 2단계 by ++EXP (@pp_exp) on CodePen. 3단계 : 가로 html 작성 및 html 구조 완성 css 구조 완성 See the Pen a-1 3단계 by ++EXP (@pp_exp) on CodePen. 4단계 : jquery 작성 및 기능 테스트 See the Pen a-1 4단계 by ++EXP (@pp_exp) on CodePen. 5단계 : a태그 삽입 및 디자인 요소 삽입(h2, p, ta..
1. 경로에 맞도록 파일 생성하기 [본인 이름 폴더] [실습 날짜] → index.html [css] - style.css [img] - [logo] - 이미지 파일 저장 경로, 로고와 이미지 슬라이드용을 분리한다. [javascript] - jquery.1.12.3.js 2.index.html / style.css / script.js 생성한 문서 기본형 맞추기 - index.html 기본형 - style.css의 기본형 @charset "utf-8"; /* CSS Document */ - script.js의 기본형 // JavaScript Document 3. 외부 링크로 연결짓기 - 최종 index.html 3-2 상대 주소로 jquery 연결하기 (로컬) - 시험장에서는 이것을 써야 함. (1) ..
0) javascript 기초 코드 변수와 함수 - var 변수명; // 변수 선언 - 변수명 = 0; //변수에 데이터 대입 혹은 초기화 - function(){} //함수 실행 조건문 - if (조건문) { 실행문 } // 참일 때 실행 - else if (조건문) { 실행문 } // 거짓일 때 조건에 맞으면 실행 - else { 실행문 } //거짓일 때 실행 - switch { case 1 : 실행문 1 break; } //결과값이 케이스와 일치했을 때 실행문, 조건문을 빠져나올 수 있도록 break 선언. 반복문 - while (조건문) {} //조건문이 참일때만 반복 - for( i=0; i >= <
jQuery는 문서 객체 또는 이벤트 접근을 도와주는 자바스크립트 라이브러리이다. (1) jQuery 라이브러리 불러오기 jquery 라이브러리는 태그의 src 값을 통해 불러올 수 있다. 이때 src 속성에 불러올 수 있는 주소는 절대 주소와 상대 주소가 있다. 절대 주소로 불러오는 것을 CDN(Content Delivery Network)라고 하여, 웹 사이트의 접속자가 서버 자동으로 가장 가까운 서버에서 다운받도록 한다. 반면, 상대 주소는 jQuery를 서버에 저장시킨 후, 사용자가 제공된 서버에서 다운받도록 지정한다. (2) jQuery의 실행 1) 기본 문법 : $(document).ready(function{ }); 문서 전체가 로드 된 후 실행합니다. 2) 짧은 문법 : $(function..
(1) 기본 레이아웃 만들기 1단계 See the Pen 레이아웃 만들기 1단계 by ++EXP (@pp_exp) on CodePen. - 가장 큰 형태의 크기 부여 - HEADER / IMGSLIDER / MAIN / SECTION / FOOTER 순서대로 사이즈 및 영역 지정. (2)기본 레이아웃 만들기 2단계 See the Pen 레이아웃 만들기 2단계 by ++EXP (@pp_exp) on CodePen. - 세부 리스트 제작 및 서브 메뉴 작성 (3)기본 레이아웃 만들기 3단계 See the Pen 레이아웃 만들기 3단계 by ++EXP (@pp_exp) on CodePen. - FLOAT 속성으로 좌우 배열 실시 (4)기본 레이아웃 만들기 4단계 See the Pen 레이아웃 만들기 4단계 b..
1. 레이아웃 작성 순서의 요령 (1) html요소는 부모부터 자식 순서로 만든다. (계층 구조에 주의!) (main 메뉴 혹은 submenu)- - list&컨텐츠 - a태그로 마무리 1단계 2단계 3단계 4단계 5단계 시멘틱 태그 & id 내부 class (main menu) 내부 class (sub menu) 컨텐츠 (이미지와 텍스트) a태그 (2) css는 크기&넓이, - 배치 속성 - 세부 조정 순서로 만든다. 단, 제작시 초기화 하는 요소에 주의한다. 작성 순서 : 폭과 높이 / 배치 속성(float,position) / 세부 조정 1단계 2단계 3단계 4단계 width&height float & clear margin&padding position : absolute top & left ma..
