+슬라이드(좌우) 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..
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..
(1) 시멘틱 요소(SEMENTIC) 공간 분할에 사용하는 요소는 공간을 분할하는 것 외에는 아무런 의미가 없었다. 그래서 HTML5에서는 의미를 전달하는 새로운 요소를 만들어 사용하기 시작했고, 이를 시멘틱(의미론적) 요소라고 한다. (2) 시멘틱 요소의 종류와 이해 요소명 설명 header 사이트 소개, 정보, 메뉴, 로고 등을 포함하는 공간. 하나의 문서에 여러개의 헤더를 만들 수 있다. nav 웹 사이트의 탐색 링크의 집합 공간 main 웹 문서 전체의 주요 컨텐츠가 위치하는 공간요소. 문서에서 단 한개만 사용이 가능하다. aside 주요 컨텐츠 '외'의 내용을 정의하는 공간. section 한 주제에 대한 '영역'을 지정하는 공간요소. 반드시 제목 요소가 포함되어야 한다. section 과 ar..
(1-1) position:absolute 또는 fixed; top:50% left 50% / margin-top:-height/2 margin-left: -width/2 See the Pen 가운데 정렬 (position) by ++EXP (@pp_exp) on CodePen. position 속성을 이용해 top, left 속성을 적용하고, margin-top/left로 대상 요소의 정 중앙을 맞추어 중앙정렬을 실시. 만약 부모 개체가 존재한다면, position:relative를 사용하여 배열할 수 있다. (1-2) transform: translate(-50%, -50%); See the Pen 가운데 정렬 (position) (2) by ++EXP (@pp_exp) on CodePen. 위 방법..
FLOAT 속성의 설명 : 띄우기 1. 이미지의 형태에 맞는 텍스트 요소 붙이기 See the Pen float 속성의 사용(1) by ++EXP (@pp_exp) on CodePen. 2. block 요소의 좌우 배열에 사용한다. See the Pen block 요소의 좌우 배열에 사용하기 by ++EXP (@pp_exp) on CodePen. 3. float와 clear 속성의 사용. 레이아웃 배치시 사용되는 방법들. See the Pen float 속성 : 분할배열하기(1) by ++EXP (@pp_exp) on CodePen. - float:속성에 사용할 수 있는 값들 - left / right - flaoat:속성 뒤에 맞는 clear 속성 만들기 :left :right :both See the..
