61일차~62일차 리뷰 및 CSS

웹 프로그래밍이란 ??

- 웹 브라우저를 통해서 구동되는 프로그램

- 웹 페이지에서 데이터를 이동시키는 프로그램

HTML

Hyper Text Markup Language (웹 페이지를 구성하는 것)

DOM Tree 로 구성되어 있습니다.

JavaScript나 jQuery

태그에 이벤트를 주는 것입니다.

CSS : Cascading Style Sheet 

위에서 아래로 흐르는 스타일 시트로, 다 상속관계로 이루어져 있습니다.

- id : 한 개

- class : 여러 개

CSS 셀렉터 우선순위에 따라 움직입니다.

(아래는 우선순위로 적용된 것이 아닙니다.)

1. 속성값 뒤에 !important 를 붙인 속성말합니다.

2. HTML에서 style을 직접 지정한 속성을 말합니다.

-> 태그에 inline으로 style 속성 지정(인라인스타일)합니다.

3. #id로 지정한 속성 으로, 한 개만 적용가능합니다.

4. .class 및 pseude(추상)클래스로 지정한 속성으로 한번에 여러 개가 적용가능합니다.

5. 요소 이름으로 지정한 속성을 말합니다.

6. 상속된 속성

단, 같은 우선순위에 있는 경우에는 나중에 선언되는 것이 우선 적용됩니다.

728x90

jQuery 선택자(Selector)

$(selector) or jQuery(selector) : jQuery() 보다 표현상 간단한 $()를 더 많이 사용합니다.

- $(this)는 자기 자신을 나타낼 때 씁니다.

- $("*")는 모든 엘리먼트 선택할 때 씁니다.

- $("#id")는 유니크 하게 엘리먼트 하나만 적용할 때 씁니다.

- $(".class name")는 Class Selector는 특정 요소 모두 가져올 때 씁니다.

- $("element name")는 문서안의 모든 특정 요소(element name)를 가져옵니다.

참고로, element는 계층구조를 가지고 있으며 배열 구조로 이루어져 있습니다.

부모, 자식, 형제 관계를 가지고 있습니다.

- $("s1,s2,s3...")는 다중 선택자로, 다중 요소를 가져올 때는 콤마(,)로 사용 구분합니다.

- $(":input")는 입력 요소 가져올 때 씁니다.

- $(":contains()")는 특정 요소의 내용에 포함된 요소를 가져올 때 씁니다.

단, 대소문자는 구분해서 가져옵니다.

-$(":even")는 짝수번째 요소 가져올 때 씁니다.

-$(":odd")는 홀수번째 요소 가져올 때 씁니다.

-$("요소:first-child")는 특정요소의 첫번째 자식 요소 반환됩니다.

-$("요소:last-child")는 특정요소의 마지막 자식 요소 반환됩니다.

-$("요소:only-child")는 특정요소를 기준으로 자식요소가 딱 하나있는 요소가 반환됩니다.

-$("요소:nth-child(n)")는 부모 요소를 기준으로 n번째 위치한 요소가 반환됩니다.

-$("요소:empty")는 부모 요소를 기준으로 자식을 갖지 않는 요소가 반환됩니다.

-$("요소:not(Selector)")는 다른 선택자를 제외한 요소가 반환됩니다.

CSS 스타일 시트 구성

프로퍼티:값; 프로퍼티:값;