[2일차] DO IT 웹사이트 따라 만들기/p108~170/가상요소 활용 ,콘텐츠 영역 표시하기 , 자바스크립트

시맨틱 레이아웃

 

Header 영역

<header></header> 태그를 사용

웹 페이지를 나타내는 로고 또는 소개글이 들어감

 

Navigation 영역<nav></nav> 태그를 사용웹 페이지에서 다른 페이지로 이동하는 메뉴 바 (Menu Bar) 가 들어감

 

Content 영역<section></section> 태그와 <article></article> 태그를 사용웹 페이지의 내용이 들어감

 

Footer 영역<footer></footer> 태그를 사용웹 페이지와 관련된 정보가 들어감

 

 

 

Jquery 선택자

 

1) 전체 선택자 $('*')

- 페이지에 있는 모든 객체를 선택

 

2) 태그 선택자 $('태그명')

- 해당 태그를 선택

 

3) ID 선택자 $('#ID명')

- 해당 ID를 선택

 

4) 클래스 선택자 $('.클래스명')

- 해당 클래스를 선택

 

5) 자손 선택자 $('부모요소 > 자손요소')

- 부모요소의 자손요소를 선택(인접 하위 요소)

- 예시

$('body > div') body의 하위에 위치한 div 태그만 선택

 

6) 후손 선택자 $('부모요소 후손요소')

- 부모요소의 후손요소를 선택(모든 하위 요소)

- 예시

$('body > div') : body의 하위에 위치한 모든 div 태그 선택

 

7) 속성 선택자

- 요소의 속성 조건에 맞는 요소를 선택

- 기본형태: 요소[속성=값]

- 예시

$('input[type="text"]') : input태그 중 type이 text인 요소만 선택

- 속성 선택 조건

[속성=A] : 값이 A인 경우

[속성|=A] : 값이 A로 시작하는 경우(- 하이픈으로 구분)

[속성~=A] : 값이 A로 시작하는 경우(띄어쓰기로 구분)

*위의 두 선택자는 하이픈 혹은 띄어쓰기가 없으면 선택되지 않음

[속성^=A] : 값이 A로 시작하는 모든 경우

[속성$=A] : 값이 A로 끝나는 경우

[속성*=A] : 값에 A가 포함되는 모든 경우

 

8) 입력 양식(form) 필터 선택자

- 입력 양식의 속성을 선택

- 형식: $(':input 타입or타입속성')

- 기본 타입: button checkbox, file, image, password, radio, reset, submit, text

- 타입 속성

checked 체크되어있는 입력 양식 선택

disabled: 비활성화된 입력 양식 선택

enabled: 활성화된 입력 양식 선택

focus: 초점이 맞춰진 입력 양식 선택

input: 모든 입력양식 선택

selected: option 객체 중 선택된 객체를를 선택

- 예시

$(':text').css('color', 'red') input 태그 중 type이 text인 요소의 색깔을 빨간색으로 변경

$(':selected').css('color', 'red') option 객체 중 선택된 객체를 빨간색으로 변경

 

9) 위치 필터 선택자

- 위치에 맞는 요소 선택

- 형식: $('요소:형태')

- 형태

odd: 홀수 객체 선택

even: 짝수 객체 선택

first: 첫 번째 객체 선택

last: 마지막 객체 선택

- 예시

$('tr:even').css('color', 'red') tr태그 중 짝수인 태그만 빨간색으로 변경

 

10) 함수 필터 선택자

- 함수를 이용해서 요소 선택

- 형태 $('요소:형태')

- 형태

contains(문자열) : 특정 문자열을 포함하는 객체 선택

eq(n) : n번째에 위치한 객체 선택

gt(n) : n번째 초과에 위치한 객체 선택

has(요소) : 요소를 가진 객체 선택

lt(n) : n번째 미만에 위치한 객체 선택

not(선택자) : 선택자를 제외하고 모든 선택

nth-child(3n+1) : 3n+1번째에 위치한 객체 선택(상황에 맞게 매개변수 수정 가능)

 

 

$("선택자").bind(); // 이벤트 묶기

$("선택자").unbind(); // 이벤트 해제

$("선택자").click(); // 버튼클릭 = onclick

$("선택자").change(); // 텍스트박스의 값이 변결될때 = onchange

$("선택자").dbclick(); //더블클릭

$("선택자").focus(); //포커스가 주어질 때

$("선택자").keydown(); //키보드가 눌려 있을때

$("선택자").keyup(); //키보드가 눌렀다 떼었을때

$("선택자").keypress(); //키보드가 눌리는 순간

$("선택자").load(); //페이지를 전부 다 읽어들인 후에

$("선택자").hover( 오버시 실행함수, 아웃시 실행함수); //롤로버 이벤트핸들러

$("선택자").mousedown(); //마우스버튼 눌렀을때

$("선택자").mouseenter(); //객체영역에 마우스가 위치했을때

$("선택자").mouseleave(); //객체영역에서 마우스가 벗어났을때

$("선택자").mousemouse(); //

$("선택자").mouseout(); //마우스 커서가 올려놓았다가 밖으로 나갈때

$("선택자").mouseover(); //마우스 커서를 올려놓았을때

$("선택자").mouseup(); //마우스버튼 눌렀다 떼었을때

$("선택자").scroll(); //스크롤바가 스클로될때

$("선택자").trigger();

$("선택자").live();

 

$("선택자").rotate({

'duration' : '1000', //이동속도

'interval' : 2000, //1000 = 1초

'stopButton' : '#stopButton', //스톱버튼 (객체명)

'playButton' : '#playButton', //재생버튼 (객체명)

'prevButton' : '#prevButton', //이전버튼 (객체명)

'nextButton' : '#nextButton', //다음버튼 (객체명)

'movement' : 'top', // left, top , opacity

'autoStart' : true // 시작시 자동재생

});

 

 

$("선택자").attr("속성명","속성값"); //속성 값을 지정할때

$("선택자").attr("속성명"); //속성 값을 불러올때

$("선택자").removeAttr("속성명"); //속성을 삭제할때

$("선택자").val(); //객체의 값(value)을 가져올때

$("선택자").val("50"); //객체에 값(value)을 을 50으로 적용

$("선택자").text(); //객체의 텍스트를 가져온다.

$("선택자").html(); //객체의 HTML태그를 가져온다.

$("선택자").html("<p>나는 천재다.</p>"); //HTML태그를 삽입한다.

$("선택자").addClass("클래스명"); //객체에 클래스를 추가한다.

$("선택자").removeClass("클래스명"); //객체의 클래스를 삭제한다.

$("선택자").toggleClass("클래스명"); //객체에 해당클래스가 있으면 삭제, 없으면 추가 

$("선택자").css("스타일 속성 명","스타일 속성 값"); //CSS의 속성값을 지정

$("선택자").css({"background":"yellow","height":"400px"}); //CSS 다중 지정

$("선택자").css("스타일 속성 명"); //CSS 속성 값을 불러옴.

$("선택자").width();

$("선택자").index(this); //배열객체중 현재 선택된 인덱스 값 

 

 

 

속성 : $("선택자").attr("속성명","속성값");

 

메소드 : $("선택자").click( function(){ 액션1; 액션2; ... } );

 

 

 

 

$("*")

$("태그명")

$(".클래스명")

$("태그명.클래스명")

$("#ID명")

$("#ID명 종속태그명") = $("#ID명").find("종속태그명")

$("#ID명, .클래스명, 태그명")

 

 

 

 

$("선택자1 선택자2") 

선택자1의 자손이면서 선택자2와 일치하는 모든 엘리먼트에 적용

 

$("선택자1 > 선택자2")

선택자1의 바로 아래 자손이면서 선택자2와 일치하는 엘리먼트에 적용

 

$("선택자1 + 선택자2") 

선택자1의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 선택자2와 일치하는 엘리먼트에 적용

 

$("선택자1 ~ 선택자2")

선택자1의 형제 엘리먼트중에 선택자2와 일치하는 다음에 나오는 모든 엘리먼트에 적용

 

$("선택자1:has("선택자2")")

선택자2인 자손을 1개이상 가진 선택자1인 모든 엘리먼트에 적용

 

$("선택자:first")

선택자과 일치하는 것중 페이지에서 처음으로 일치하는 엘리먼트

 

$("선택자:last")

선택자과 일치하는 것중 페이지에서 마지막으로 일치하는 엘리먼트

 

$("선택자:first-child")

선택자과 일치하는 것중 첫번째 자식 엘리먼트

 

$("선택자:last-child")

선택자과 일치하는 것중 마지막 자식 엘리먼트

 

$("선택자:only-child")

선택자과 일치하는 것중 형제가 없는 모든 엘리먼트

 

$("선택자:nth-child(n)") //1~10

선택자과 일치하는 것중 n번째 자식 엘리먼트

 

$("선택자:nth-child(even | odd)")

선택자과 일치하는 것중 짝수 또는 홀수 자식 엘리먼트

 

$("선택자:nth-child(Xn+Y)") 

전달된 공식에 따른 n번째 자식 엘리먼트, Y는 0인 경우 생략

 

$("선택자:even/odd")

페이지 전체의 짝수/홀수 번째 엘리먼트

 

$("선택자:eq(n)") // 0~9

n번째로 일치하는 엘리먼트

 

$("선택자:gt(n)")

n번째로 엘리먼트(포함되지 않음) 이후의 엘리먼트

 

$("선택자:lt(n)")

n번째로 엘리먼트(포함되지 않음) 이전의 엘리먼트

 

$(this).parent().next()

현재객체의 부모로부터 다음번째 엘리먼트...

 

$(this).parent().prev()

현재 객체의 부모로부터 이전번째 엘리먼트..

 

$(this).​children()

현재객체의 자식노드

 

$(this).children().each(function(index, elem){

//현재객체의 자식노드들이 각각 실행하는 함수, 마치 for( value in key){ ...} 와 비슷.

console.log(index +":"+elem.tagName);​

}

 

 

 

$(Selector[attr])

attr 속성(attribute)값을 가지는 Selector 요소와 일치

 

$(Selector[attr = ”value”])

attr 속성의 값이 value와 동일한 값인 Selector 요소와 일치

 

$(Selector[attr != ”value”])

attr 속성의 값이 value와 같지 않은 값인 Selector 요소와 일치

 

$(Selector[attr ^= ”value”])

attr 속성의 값이 value 값으로 시작하는 Selector 요소와 일치

 

$(Selector[attr$=”value”])

attr 속성의 값이 value 값으로 끝나는 Selector 요소와 일치

 

$(Selector[attr *= ”value”]) 

attr 속성의 값이 value 값을 포함하는 Selector 요소와 일치

 

$(Selector[attr ~= ”value”]) 

attr 속성의 값이 공백과 함께 value 값을 포함하는 Selector 요소와 일치

 

$("선택자1").add("선택자2").css("background-color","yellow"); //선택자1,선택자2 추가하여 css 공통 선언

$("선택자").ready(function(){...}); //페이지를 읽어들인 후에 함수 실행

$("선택자").hide(); //감추기

$("선택자").show();  //보이기

$("선택자").toggle(); //감추어진것은 보이고, 보여진것은 감추는 토글모드

$("선택자").fadeOut(); //서서히 감춰지기

$("선택자").slideDown(100); //0.1초 동안 슬라이드로 내려오면서 보이기

$("선택자").slideUp(100); //0.1초 동안 슬라이드로 올라가면서 감추기

$("선택자").slideToggle(); //감추어진것은 내려오면서 보이고, 보여진것은 올라가면서 감추어지기 (토글모드)

 

$(선택자1).prepend(선택자2) -> 선택자1 자식요소 앞에 선택자2를 넣어라.

$(선택자2).prependTo(선택자1) -> 선택자2를 선택자1 자식요소 앞에 넣어라.

 

$(선택자1).append(선택자2) -> 선택자1 자식요소 뒤에 선택자2를 넣어라.

$(선택자2).appendTo(선택자1) -> 선택자2를 선택자1 자식요소 뒤에 넣어라.

 

 

$(선택자1).before(선택자2) -> 선택자1 요소 앞에 선택자2를 넣어라.

$(선택자2).insertBefore(선택자1) -> 선택자2를 선택자1 요소 앞에 넣어라.

 

$(선택자1).after(선택자2) -> 선택자1 요소 뒤에 선택자2를 넣어라.

$(선택자2).insertAfter(선택자1) -> 선택자2를 선택자1 요소 뒤에 넣어라.

 

 

$("선택자").animate();

$("선택자").animate({"width":"300px"},500); //0.5초간 폭을 300px로 변환 애니.

$("선택자").is();

$("선택자").prevAll();

$("선택자").next();

 

$("div").filter(".abc"); //div요소 중에서 ".abc"인 것만 걸러서 선택.

$("#grp").find(".abc"); //#grp 자손에서 ".abc"인 요소만 찾는다.

 

$("선택자").hasClass("클래스명"); //객체가 해당클래스을 포함하고 있는지 체크 (Boolean)

​$("선택자").addClass("클래스명"); //해당 클래스 추가하기

$("선택자").removeClass("클래스명"); //해당 클래스 제거하기

$("선택자").toggleClass("클래스명"); //토글모드로 클래스 포함하기, 제거하기

$("선택자").ajax();

$("선택자").load();

$("선택자").get();

$("선택자").get("result.php",{"code":"a110"}); //result.php?code=a110

$("선택자").getJSON();

$("선택자").post();

$("선택자").post("send.php",{foo:"bar"},

function(response){

alert(response);

});

 

$("선택자").prevAll( [ selector ] ); //선택자 이전의 모든 요소

//[selector] 요소를 선택하기 위해 필요한 선택자 문자열

$("선택자").prev(); //선택자 이전 요소.

$("선택자").next(); //선택자 다음 요소.

$("선택자").parent(); //선택자 부모 요소.

$(document).ready(function(){

          $(document).on("click","#요소id",function(event){

            // 동적으로 여러 태그가 생성된 경우라면 이런식으로 클릭된 객체를 this 키워드를 이용해서 잡아올 수 있다.

            alert($(this).text());

          });

}); 

 

 

ui.css

0.01MB

ui.js

0.00MB

index.html

0.01MB