Selector + blockquote + JavaScript 기초

셀렉터(Selector)

HTML에서 작성된 요소에 style을 적용하려면 적용하고자하는 요소가 정확하고 분명해야한다. Selector는 html에 작성된 요소중 style을 적용할 요소를 특정하는것이다. Selector는 복수지정이 가능하다. Selector에 대해서는 아래 이미지를 참고하면 이해가 더욱 빠를 것이다. 크게 사용하는 몇가지 Selector들을 정리하고자한다.

 

 

 

이미지출처 : poiemaweb

 

 

 

 

1. 전체 셀렉터 (Universal Selector)

: html에 존재하는 모든 요소를 선택한다. 모든요소에는 head까지도 포함된다. *로 사용한다.

 

 

2. 태그 셀렉터 (Type Selector)

: 지정된 태그명을 선택한다. class, id가 아닌 태그 이름 자체를 Selector로 사용하는 것이다.

 

 

3. ID 셀렉터 (ID Selector)

: id 값을 지정하여 일치하는 요소를 선택한다. id는 문서내에서 1회만 사용이 가능하므로 중복 Selector는 불가능하다.

 

 

4. 클래스 셀렉터 (Class Selector)

: class 값을 지정하여 일치하는 모든 요소를 선택한다. class는 id와 다르게 중복 사용이 가능하다. 코드의 재사용면에서 아주 용이하다.

 

 

5. 어트리뷰트 셀렉터 (Attribute Selector)

: 지정된 어트리뷰트의 값을 선택한다. 값의 지정은 다양하며 값에 따라 선언방식도 달라진다. 

 

※ 어트리뷰트(Attribute)란 속성, 즉, 요소의 성질이다. 어트리뷰트는 시작 태그에 위치해야 하며 이름과 값의 쌍을 이룬다.

 

 

 

---

 

 

blockquote, q, cite?

 

<q>    선언법 <q cite=”URL”>짧은 인용문</q> 

: 짧은 인용을 할때 사용하는 태그.
단락구분이나 줄바꿈없이 앞뒤에 쌍따옴표만 표시된다. 인용문이므로 인용출처를 나타내는 cite 속성이 사용가능하다. 속성값은 출처를 나타내는 url을 써주면 된다.


<blockquote>    선언법 <blockquote cite=”URL”>긴 인용문</blockquote> 

: 어떤 섹션을 통째로 인용할때 쓰는 태그. 따옴표없이 들여쓰기가 되고 인용문이 아닌 부분과 줄간격이 넓어진다.
한줄이 넘어간다면 <blockquote>, 한줄만에 끝낼 수 있다면 <q>를 사용하자.

 

<cite>

: cite는 속성뿐만 아니라 태그도 존재한다. cite는 인용문이 아닌 책, 시, 노래, 그림, 영화 등 예술작품의 이름을 나타낼때 사용하는 태그이다. 작가같은 사람이름에는 사용하지 않는다. 브라우러에서 기울어진 이탤릭체로 보여진다.

 

 

 

---

 

 

JavaScript 기초

repl.it을 진행하면서 제대로 다져지지 않는 기초 문법들을 따로 정리하고자 한다.

 

 

let, const 

: let 태그를 사용하면 변수 값을 수정할 수 있고, const 태그를 사용한 변수는 수정할 수없다.  변수를 영원히 수정하지 않는 고정값일때만 const를 사용한다. 두가지 구분을 하지 않는 var를 사용해도 괜찮지만 최신 버전에 맞는 문법을 위해 위 태그를 사용하는것이 좋다.

 

매개변수(parameter)와 인자(argument)

: 매개변수는 변하는 값이 들어가는 공간이며 함수선언식 ()안에 들어가는 변수명을 뜻한다. 인자는 매개변수의 공간에 들어가는 값을 의미한다. 

 

 

length 속성

: 문자열의 길이를 변환하는 속성이다.

 

 

unshift & push 속성

: 배열의 구조에서 사용하는 속성으로, unshift는 배열의 맨처음을 기준으로 배열을 추가하며, push는 배열의 맨마지막을 기준으로 배열을 추가한다.

 

 

pop 속성

: 지정한 요소를 배열에서 제거할 수 있는 속성이다.

 

 

데이터 타입과 typeof 연산자

: typeof 연산자는 지정된 값의 데이터 타입을 알 수 있는 연산자이다. 데이터타입은 boolean(참/거짓), String(문자), Number(문자), Object(객체), null(빈객체), undefined(자료형정해지지않음) 등이 존재한다.

 

 

※ undefined와 null?

 

undefiend : 이름 그대로 정해지지 않은 상태다. 변수는 존재하나 어떤 값도 할당되지 않아 자료형태가 정해지지않은 상태.null : 이미 빈공간(null)으로 자료형이 정해진 상태. 변수는 존재하나 이미 null로 지정되어 있어 빈객체로 데이터 타입을 확인하면 object가 나온다.

 

 

 

 

indexOf와 slice

: slice는 지정 위치만큼 잘라내는 함수로 slice(잘릴 시작위치, 잘릴 끝위치)로 선언합니다. indexOf는 원하는 문자열을 찾거나 배열의 값을 찾는 함수다. 두개의 함수를 응용하면 특정부분을 텍스트에서 자동으로 잘라내는것이 가능하다.