웹디자인기능사-5일차

[ contents안에 있는 ul은 class이름 지정 ]

- ul 이름이 같으면 구조가 헷갈릴 수 있다.

- notice에 커스텀 되는 tab-body랑 garllery에 커스텀되는 tab-body랑 다르기 때문에 각각 다른 이름으로 class 이름을 지정한다

ㄴnotice -> notice-tab-body

ㄴgallery -> gallery- tab-body

 

 

[그리드 계산법]

총 너비 - 양 옆 여백값 - 거터 값 = n값/오브젝트 총 갯수

300 - ( 10+10 ) - ( 20+20 ) = 240 /3 = 80

 

[img태그와 absolute]

-img태그는 닫는 태그가 없어 absolute의 부모역할을 할 수가 없다

 

[제이쿼리 기초]

바로가기

 

- 목적

.box를 클릭하면 너비높이가 300px*300px로 변경

 

---

// (코드펜에서만 사용) 바로 렌더링 되는 코드펜 특징 때문에 사용한다. 콘솔창 깨끗하게 사용하기
console.clear();

// $ -> 제이쿼리를 시작하겠다.
// ()첫번째 소괄호 -> 선택자를 작성하는 공간
// .이벤트 -> 사용하고 싶은 이벤트 작성(*앞쪽에 반드시 점(.)을 찍어야 한다)
// ()두번째 소괄호 -> ★이벤트에 따라서 구조가 달라지는 실행문 작성 공간
// ; -> 식이 끝나면 실행문은 세미콜론으로 마무리해야 된다.

// 두번째 소괄호에는 ""가 포함된 문자, 함수명 등이 들어갈 수 있다. 제이쿼리 식 자체를 두번째 소괄호에 사용할 수 없다.

// 문자는 쌍따옴표""안에 작성하고, 숫자는 쌍따옴표를 작성하지 않는다.
// 변수명, 함수명, this는 쌍따옴표 없이 사용한다.

// 클릭이벤트를 실행할 수 있는 제이쿼리 식
// $().click();

// * html에 있는 태그에 클래스 선택자를 넣는 식 *
// C는 대문자로 작성하고 나머지는 소문자로 작성한다
// $().addClass();

// 함수선언
// $().addClass();제이쿼리 식을 클릭이벤트 두번째 소괄호에 넣어야 하는데 두번째 소괄호 안에는 제이쿼리식을 넣을 수 없기 때문에 함수라는 것을 만들어서 그 안에 제이쿼리식을 넣고 함수 이름을 두번째 소괄호에 넣는다
// 함수는 선언과 호출이 있다. 선언만 하면 함수는 실행되지 않고 호출까지 시켜야 식이 실행된다.
// 함수 선언 function 함수명(){}
// 함수 호출 함수명();
// 생략 $(선택자).이벤트(함수명); -> 함수를 생략형태로 사용할 경우 소괄호() 없이 작성해야 된다.

// 함수는 실행문이 아니기 때문에 끝에 세미콜론(;)을 사용하지 않는다. 같은 함수명을 사용할 수 없다
// 사용할 수 없는 함수명이 있기 때문에 안전하게 이름을 문자_숫자 or 문자 형태로 사용하면 좋다
// (예시) add_box
// 함수명은 대시(-)를 사용할 수 없다. 이름 지을 때 언더바(_)를 사용해야 한다

/*
$(".box").click(this_box);

function this_box() {
  $(".box").addClass("active");
}
*/

// 함수를 생략해서 특정 이벤트 안에 작성할 경우 함수 선언시 함수명이 생략된다.
$(".box").click(function(){
  $(".box").addClass("active");
});

---

ㅇㅇㅇㅇ

1.zip

0.00MB