CSS 고급 기능 익히기

1. 선택자를 잘 알아야 하는 이유

CSS는 선택자의 조합으로 구성

1) 먼저 선택자의 이름을 지정. HTML 태그 중에 하나가 될수도 있고, 직접 이름을 지어서 입력하는 경우도 있음.

2) '{'로 시작 '}'로 끝

3) 선언 구간안에 속성 이름(Property) 선언, :(콜론),  값(value), ;(세미콜론) 순으로 작성한다.

4) ;(세미콜론)은 마침을 의미하고 다시 속성 이름을 추가하고 동일한 방식으로 계속 작성 가능하다.

2.태그 선택자

HTML 태그에다가 직접 스타일을 지정하는 방식

HTML 엘레먼트에 직접 스타일을 지정하여 표시하며, 페이지안에 있는 모든 엘레멘트에 영향을 주어 스타일이 적용되어 표시된다.

예: h1, body, p

h1{

color: red;

text-align : center;

}

3.클래스 선택자

정의한 스타일을 여러 엘리먼트에 적용하여 사용하기 위함.

클래스 선택자는 맨앞에 .(마침표)를 붙이고 영문 으로 클래스 이름을 작성한다.

선택자 이름 / 선언 구간

.myclass / {font-szie:10px;color:red;}

ex> .align_center {text-align:center;}

{...}

<p calss='align-center'>p tag에 적용된 가운데 정렬 </p> 

특징

클래스를 만들어 서로 다른 엘리먼트에 여러번 적용해서 사용 할수 있다.

클래스 이름은 반드시 영문자로 시작해야 하며, 숫자로 시작하면 안된다.

원하는 엘리멘트를 정밀하게 제어할수 있다.

4.아이디 선택자

페이지 안에서 하나밖에 없는 고유한 엘리먼트를 나타내기 위해서 사용한다.

ID 선택자는  # 기호 다음 영어로 시작하는 선택자 이름을 지어준다.

#myid {font-size:10px; color:red;}

#style_param{ text-align:center;}

(...)

<p id='style_param'>

특징

앞에 #을 붙이고 영문으로 시작하는 이름을 부여

같은 페이지 내에 한 번만 적용하는것이 원칙

자바 스크립트 프로그램에서 값을 얻거나 수정할때 사용

다른페이지 중복 사용 가능

5.하위 선택자

 선택자들 간의 관계를 동시에 고려한 선택자라 할 수 있다,

ex> 엘레먼트의 클래스가 style_div 로 적용된 하위에 p 태그가 존재 할때, 해당 변경 사항을 적용한다.

p{

...

}

.style_div {

...

}

.style_div p {

...

}

특징

선택자의 자식 선택자에 스타일을 적용 할수 있다

ID나 클래스 선택자를 통해 직접 특정 태그 하나만 스타일을 주지 않고 기준태그를 정한 뒤 자동으로 그 안에 있는 태그에 적용시키고자 할때 많이 이용한다.

6.그룹선택자

선택자 이름만 다르고 스타일 내용이 동일시에 같은 내용을 반복하는 경우

,(콤마)로 구분 후 동일한 스타일을 선언한다.

 h1 {font-family:sans-serif} 

 h2 {font-family:sans-serif}

 h3 {font-family:sans-serif}

h1,,h2,h3 {font-family:sans-serif}

7.전체선택자

*(에스터리스크)를 선택자 이름으로 대신 사용한다.

웹문서에 있는 모든 엘레멘트를 선택하여 간략히 표현하고 싶을 때 사용한다.

하위 선택자의 역활로도 사용할수 있다.

ex> ID가 content 인 하위 아래의 모든 엘레먼트들은 ... 스타일로 적용한다.

#content *{ ... }

8.하이퍼링크사용법 : 앵커 유사 클래스 선택자

마침표(.)찍고 그 다음에 선택자 이름을 적은 것을 '클래스 선택자'라고 앞에서 배웠다.

콜론(:)을 사용하면 클래스 선택자와 유사(pseudo) 라 하며, 유사 클래스 라 한다.

예) : 유사 클래스 {속성 이름 : 값}

유사클래스를 알아두어야 하는 이유는 하이퍼링크에 스타일을 주기 위해서이다.

그러기 위해서는 :link, :visited, :hover, :active으 ㅣ네 가지 유사 클래스 선택자를 알아야 한다.

일반적인 글자 글꼴 종류등에 영향을 받지 않기 때문이다.

하이퍼 링크와  유사 클래스 선택자

:link  - 한번도 방문하지 않은 a 엘리먼트의 링크 선택

:visited - 한번 이상 방문한 a 엘리먼트 링크 선택

:hover - 마우스 커서가 a엘리먼트 링크 위에 올려졋을때 선택

:active - 마우스 버튼 a 엘리먼트의 링크 위에서 클릭했을 때의 순간을 선택

단독으로 사용되지 않고 a 엘리먼트를 붙여서 함께 사용한다. 혹 앵커(anchor)유사 클래스 라고 한다.

ex> a:link , a:visited, a:hover, a:active

유의사항은 a:link > a:visited > a:hover > a:active 순서를 지켜야 한다.