CSS 셀렉터, 태그, 폰트

1. CSS

• CSS(Cascading Style Sheets)
• HTML, XHTML, XML과 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어
• HTML은 CSS가 있기 전에 있었던 언어, CSS는 HTML이 있은 후에 CSS를 입힌다.

2. 기본 셀렉터

• CSS에서 셀렉터를 작성하는 방법은 기본적으로 HTML의 태그 이름, 클래스 속성, id 속성에 대한 명시가 있다.

• 태그 이름

  selector{...css코드...}

  : 특정 태그를 가리킨다. HTML 내의 동일 태그가 존재할 경우, 모든 태그 요소를 일괄 처리한다.

- 클래스 셀렉터

   .selector{...css코드...}
   

: 셀렉터 이름 앞에 점을 붙여 표시하고, HTML 태그의 class 속성에 점을 제외한 이름을 명시하여 지정한다. 태그의 종류를 가리지 않고 여러 요소에 복수 지정이 가능하다(재사용 목적). 이 경우 selector의 이름은 자유롭게 지정한다.

- id 셀렉터

	#selector{...css코드...}

: 셀렉터 이름 앞에 (#)을 붙여서 표시하고, HTML태그의 id속성에 (#)을 제외한 이름을 명시하여 지정한다. id속성의 값은 HTML페이지 내에서 중복 사용할 수 없다(고유특성 명시). 이 경우 selector의 이름은 자유롭게 지정한다.

3. 조합형 셀렉터

• id값이나 class값을 태그 이름과 함께 명시하여 적용하는 형태
• 셀렉터가 지정하는 대상을 자세하게 명시할 수 있다.
• 태그, 클래스, 아이디를 독립적으로 명시할 때보다 우선적으로 적용된다.

4. 여러 개의 요소를 일괄 지정

• 여러 개의 요소에 동일한 CSS 내용을 적용하기 위해 셀렉터를 콤마(,)로 구분하여 일괄 처리할 수 있다.

• 태그, class, id등 모든 형태의 CSS셀렉터가 가능하다.

  	selector1, selector2{
  		....css 코드...
  	}

5. 특정 상황에 따라 반응하는 가상 클래스
5-1. 가상 클래스

• HTML태그에서 특정 상황이 발생했을 경우에만 적용되는 CSS셀렉터
• 가상 클래스는 CSS의 셀렉터 이름 뒤에
  ":상황"의 형식으로 명시한다.
  

6. 복잡한 형태의 셀렉터
6-1. 다양한 CSS 조합 방식

• CSS의 셀렉터를 표현하기 위한 조합방식은 jQuery에서 요소에 접근하기 위한 방법으로도 사용

6-2. CSS셀렉터의 주요 조합 형태

• 앞서 살펴본 조합 방식
  -> 복수 지정 셀렉터: 콤마(,)로 구분
• 이 단원에서 살펴볼 조합
  -> 자식 셀렉터 : ">" 로 구분
  -> 자손 셀렉터 : 공백("")으로 구분
  -> 속성 셀렉터 : HTML태그 속성에 따른 구분

6-3. 자식 셀렉터

• ">"는 HTML의 계층 구조의 표현을 의미한다.
• A > B일 경우 B요소는 반드시 A의 1depth안에 존재해야 한다.
  

7-4 자손 셀렉터

• 자식 셀렉터가 반드시 1depth안에 존재해야 했다면, 자손 셀렉터는 depth를 제한하지 않는다.
• p div #pwd 라고 명시할 경우, p 태그 안의 div 태그 안의 pwd라는 id값을 갖는 요소라는 의미가 되어 두번째 fieldset을 가리키게 된다.
• 명시 과정에서 중간 단계를 생략해도 된다.
• 몇 depth를 더 내려가던, 지정한 태그의 범위 안에 존재하기만 하면 된다.

7-5. 태그의 속성에 따른 표현

• 스타일시트의 셀렉터가 적용되는 대상에게 특정 속성이 있는지 여부와 특정 속성의 값이 적용되어있는지 여부에 따라 태그 요소를 좀 더 구체적으로 가리킬 수 있다.
  

8. Font

• 글꼴의 크기를 지정
• px, em, rem

9. text=align

• left
• right
• center
• justify

10. text-shadow

• 그림자 추가
• text-shadow : x y blur color;
• x : 본체와 그림자의 가로축 거리(pixel)
• y : 본체와 그림자의 세로축 거리(pixel)
• blur : 그림자의 번짐 정도(px)
• color : 그림자의 색상