[책] 생활코딩! HTML + CSS + 자바스크립트

[선택자]

웹 페이지를 구성하는 여러 요소에 효과를 효율적으로 준다.

선택자에는 클래스와 아이디가 있다.

<p><span id="first" class="js">JavaScript</span></p>

'JavaScript'라는 텍스트 태그에 id 값으로 'first'를 지정

.first는 웹 페이지에 있는 태그 중에서 클래스 값이 'first'인 태그를 가리킨다.

id 값이 'first'이기에 .대신 #을 붙여야 한다.

.이 붙어있으면 클래스를 의미하고 #은 id를 의미한다.

CSS에서 가장 중요한 문법 중 하나이다.

 

 

[클래스, 아이디]

클래스(class)는 무언가를 그루핑한다는 것이다.

아이디(id)라는 것은 어느 한 가지 대상을 식별한다는 것이다. 절대로 중복되지 않아야 한다.

클래스 선택자가 더 포괄적이고 id 선택자가 무엇인가를 정확하게 타깃팅한다.

클래스 선택자를 통해 어떤 효과를 주고 싶은 태그에 좀 더 광범위하게 효과를 주고 그중 일부 태그를 예외로 처리하고 싶을 때 id 선택자를 통해 예외적으로 디자인할 수 있다. 그래서 기본적으로 class 위에 id를 얹어서 디자인한다.

id 선택자가 가장 우선순위가 높다.

 

 

[객체]

서로 연관된 함수와 변수를 그루핑해서 정리 정돈하기 위한 수납상자

document도 객체이다.

document.querySelector()의 형태를 보면 querySelector()라는 것이 document라는 객체에 속한 함수이다. 그리고 객체에 속한 함수는 함수라 하지 않고 메서드라고 부른다.

배열은 정보를 담는 그릇이면서 동시에 정보가 순서대로 저장된다는 특징을 지닌다. 객체는 순서 없이 저장할 수 있는 정보이다.

 

coworkers.programmer에서 coworkers 다음에 있는 점(.)은 객체접근 연산자이다. 즉, ccoworkers라는 객체에 접근하라는 연산자라는 뜻이다. 코드에 공백이 들어간다면 점(.) 대신에 대괄호를 써서 문자열 형태로 넣어서 똑같은 효과를 가져올 수 있다.

 

객체에는 함수도 담을 수 있다.

함수가 소속된 객체를 가리키는 기호는 this이다.