꿈꾸는느티나무

스킨 뼈대 이해하기 이번 블로그는 스킨의 뼈대를 제작해 보겠습니다.스킨의 디자인을 결정했다면 이제 스킨의 구조를 파악해야 합니다. 예를 들어, 2단형의 기본 스킨의 디자인을 보면 크게 header, content, sideinfo, footer로 이루어져 있습니다. 각 영역은 아래와 같은 정보를 담고 있습니다. 1 header 블로그 제목, 설명, 블로그 메뉴 등 2 content 검색 결과, 위치로그, 태그, 방명록, 공지사항, 보호글, 페이징 등 3 sideinfo 카테고리, 최근글 리스트, 최근 댓글, 공지사항, 링크 등 4 footer 전체 블로그 메뉴, Copyright 등 skin.html step 1 structured Tip : 코드가 길어지면 헛갈릴 수 있으므로 닫는 태그에 주석을 달아줍..

Tistory 가입하기 티스토리는 회원가입이 자유롭지가 못합니다.기존 회원에게 초대장을 받아서 초대가 가능합니다.초대장이 필요하신 분들은 아래의 조건대로 비밀댓글을 달아주세요 0. 비밀댓글로 달아주세요.(공개댓글은 삭제합니다)1. 자신이 운영하는 주소나 홈페이지(없으면 생략)2. 티스토리를 시작하려는 이유3. 이메일 예제)1. dreamzelkova.tistory.com2. 열심히 공부한 내용을 공유하고 싶습니다.3. abcd@hanmail.net Tistory 연습할 블로그 만들기 우측상단에 '내블로그▼ '를 클릭하고 '내 블로그 만들기'를 클릭합니다. 블로그 제목과 블로그 주소를 적어넣고 완료합니다. 내 블로그 가기 클릭! 좌측상단에 아이디 클릭 -> 관리 클릭 HTML/CSS 편집을 클릭합니다. 아..

반복문 var arr=new Array("꼴카콘","감자칩","뇨쿠르트"); for( var 변수=초기값; 조건식;증/감값)실행동작;} do{실행동작;}while(조건);조건이 맞을 때 까지 실행 배열 자바스크립트에서는 배열로 객체로 인식하여 처리하고 동일타입의 여러 요소들을 일목요연하게 처리하기위한 방법으로 배열사용합니다. var 배열명 = new array();var 배열명 = new Array(배열요소);var 배열명 = [배열요소]; 배열 객체관련 속성과 메소드 종류 설명 length 배열의 총 개수 Reverse() 배열의 순서를 역순으로 바꾼 후 변환 Sort() 배열의 값을 순서대로 정렬 Join(구분자) 배열의 요소들을 구분자로 구분하여 하나의 문자열로 만든 후 반환 배열 관련 메소드eac..

jQuery 함수 생성한 함수는 불러다 재사용할 수 있으므로 반복작업을 줄일 수 있습니다. 이제까지 사용해 왔던 function() 입니다.이제까지 배워왔던함수는 익명의 함수 입니다. 익명의 함수란?익명의 함수 – jquery에서 기본적으로 우리가 지금껏 써왔던 이 함수는 이름이 특징되지 않아서 우리가 다른 작업에서 이와 똑같은 동작을 수행할경우 이 함수를 사용할 수 없게됩니다. 그래서, 함수명을 명시적으로 지정해주면 해당 함수를 호출하여 재사용할 수 있게 됩니다. 함수의 선언방법function 함수명([인수]){실행할 코드} 함수의 호출방법1$(document).ready(function(){function test(){$(".a").append(" 당일 조리한 메뉴입니다.");}$("button")...

jQuery의 이벤트 처리 이벤트 처리기(event handler), 매핑, Listher 이라고도 불리는 과정입니다. 사용자의 어떤 동작에 의해서 발생하는 사건을 처리하는 것을 의미합니다.사용자가 마우스를 클릭하거나, 마우스를 대상에 올려두거나, 키보드를 입력할때 처리하는 과정이라고 생각하쉬면 이해하기 쉬울 것 입니다. 메소드 기능 bind( ‘이벤트명’,’개체명’,함수명) 요소에 이벤트를 등록하는 작업. unbind( 이벤트명, 함수명 ) 요소에서 지정된 이벤트와 매핑된 모든 처리기들을 제거 one( 이벤트명,개체명,함수명 ) 요소에 오직 한번만 실행되는 이벤트 처리기를 바인딩 trigger( 이벤트명,개체명) 요소의 특정 이벤트를 트리거한다. 올래 이제까지 이벤트 제어는 아래와 같이 했을 겁니다.$..

제어 메소드 메소드 기능 eq(인덱스) 요소집합 중 index에 해당하는 요소만을 탐색하여 표시 Not(표현식) 요소집합 중 표현식과 일치하지 않는 요소만을 탐색하여 표시 Is(표현식) 요소집합 중 표현식을 만족하는 요소가 있으면 “true”, 요소가 없으면 “false”값을 반환 First( ) 요소집합 중 첫 번째 요소만 표시 Last( ) 요소집합 중 마지막 요소만 표시 Slice(인덱스1,인덱스2) 요소집합 중 인덱스1~인덱스2 사이에 있는 요소만 표시 Filter(표현식) 지정된 표현식과 일치하는 요소를 조회 Example 내가 좋아하는 것!내가 싫어하는 것음료 추가하기 과자쪼코파이코칼콘냥파링아이스크림보썩뽜누구봐우주컵메롱바음료 replacewidth() 선택한 요소를 다른 요소로 쉽게 치환 메소..

탐색메소드 알아보기 메소드 기능 parent() 선택한 요소 바로 위에 있는 요소를 선택 Children() 선택한 요소 아래에 있는 요소를 선택 Siblings([표현식]) 선택한 요소의 모든 형제자매 요소 선택 (표현식) 기술시 해당 표현식에 만족하는 형제자매요소만 선택 Prev( ) 선택한 요소 위치한 왼쪽(이전)에 있는 요소를 선택 Next() 선택한 요소 위치한 오른쪽(이후)에 있는 요소를 선택 Example 아래의 예제의 dom 구조는 이와 같습니다. dom구조를 숙지하고 살펴보면 이해하기가 더 쉽습니다. 고양이 강아지 다람쥐

jQuery의 변수 값을 임시로 저장하기 위해서 다른 언어처럼 jquery도 변수를 사용합니다 변수 선언방법은 자바스크립트와 같으나 각가의 DOM 엘리먼트를 저장할때는 약간 다릅니다. ※변수(variable)프로그램 실행시 처리대상이 되는 값이나 처리된 결과를 기억시킬 임시 저장 공간을 의미 일반변수 선언방법var a=0;a=Math.random()*100;//0~99까지의 랜덤값을 계산하여 a변수에 저장한다. 요소변수 저장벙법$a=$("div").siblings('input:text');//p의 같은 계층 중 input type의 text요소들을 a에 저장시킨다. Exameple 고양이고양이는 야옹하고 울지요 강아지강아지는 낑낑하고 울지요 다람쥐다람쥐는 찍찍하고 울까나?

DOM에 대한 기본적 이해 앞서 기술했듯이 DOM은 동적인 웹 페이지를 제작하는 것을 목적으로 개발하였습니다.이를 위하여 HTML 페이지와 XML 페이지 처리를 위한 DOM API를 제공하고 있습니다.DOM은 요소(ELEMENT)의 추가,변경, 삭제를 통해 HTML 페이지 구조를 제어할 수 있음. DOM을 제어하는데 주로 사용하는 메소드 메소드 기능 Html( ) 선택된 요소의 html 내용을 가져옴= .InnerHtml Text( ) 선택요소의 html태그 제외한 내용을 표시 Val( ) Input태그의 value속성 값을 표시 Append(값) 선택요소 내용 뒤에 값을 추가 appendTo(선택자) 선택요소를 선택자로 선택된 요소의 내용 뒤에 추가 Prepend(값) 선택요소 내용 앞에 값을 추가 p..

메소드란? 객체 : 김숙희메소드 : 행동 김숙희야 밥해라밥해라 -> 메소드 김숙희야 밥해라밥해라 -> 메소드 이런식으로 객체는 주체 메소드는 동적인 행동이라 생각하면 쉽습니다.프로그래밍 언어로 생각해 보자면 $(#name).css(border:0px solid #000000);$(#name) 은 객체.css(border:0px solid #000000);은 메소드입니다. jQuery는 동적으로 제공하기 위하여 DOM API구조를 만들었습니다.즉 body, head와 같은 태그들을 객체화 했다고 생각하면 됩니다. html 요소의 속성 관련 메소드 요소의 color 속성을 제어할 수 있는 attr메소드를 먼저 알아보겠습니다.속성 값을 지정할 수도 있고 그 값을 나타낼 수 있습니다. 선택된 요소의 속성값을 조..