HTML5+CSS3 - 스타일시트 선택자

선택자는 지정한 속성이 어디에 적용되는지를 나타내는 값이다.

<style>

  p {

    color:blue;

  }

</style>

위 사황에서 p가 선태자이며, 웹 문서 내의 p 태그에 적용된다.

전체 선택자 - 모든 요소에 스타일 적용하기

페이지에 있는 모든 요소를 대상으로 스타일을 적용할 때 사용한다.

다른 선택자와 함께 모든 하위 요소에 한꺼번에 스타일을 적용할 때도 사용한다.

선택자로 * 을 사용한다.

* {

  속성:속성값;

  ...

}

태그 선택자 - 특정 태그에 스타일 적용하기

선택자로 원하는 태그 명을 사용하고, 문서 안의 해당 태그에 모두 스타일이 적용된다.

태그 {

  속성:속성값;

  ...

}

클래스 선택자 - 특정 부분에 스타일 적용하기

태그에 속성을 적용하면 해당 태그에 모두 적용되지만, 특정 태그에 대해서 다른 스타일을 적용하고 싶을 때 사용한다.

클래스 이름은 임의로 지정하여도 되고, 클래스명 앞에 마침표(.) 을 써줘야한다.

.클래스이름 {

  속성:속성값;

  ...

}

클래스 스타일을 사용할 때는 태그 안에 class 속성을 사용한다.

<p class="클래스이름"> 내용 </p>

클래스 선택자를 요소 전체가 아니라 태그 내의 일부 내용에만 적용하고 싶으면 <span> 태그를 사용한다.

<p> 일부에만 <span class="클래스명"> 클래스 속성 </span>을 사용한다. </p>

id 선택자 - 특정 부분에 스타일 적용하기

클래스 선택자 처럼 특정 부분에 스타일을 적용한다. id 앞에 마침표(.) 대신 샾(#) 기호를 사용한다.

해당 id를 가지는 태그에 속성이 적용된다.

요소의 크기나 위치 등 레이아웃을 지정할 때 주로 사용된다.

#id이름 {

  속성:속성값;

  ...

}

하위 선택자 - 모든 하위 요소에 스타일 적용하기

적용 대상을 한정시키고자 할 때 사용하는 선택자이다.

상위 요소와 하위요소를 함께 명시하며, 상위요소 안에 있는 하위요소에만 스타일이 적용된다.

상위요소에는 태그뿐만 아니라 다른 선택자도 사용 가능하다. (ex. #id ul)

하위 선택자는 말 그대로 상위요소의 하위에 포함하는 모든 곳에 스타일이 적용된다.

자식요소, 손자요소, 더 밑 요소들까지 적용된다는 얘기다.

상위요소 하위요소 {

  속성:속성값;

  ...

}

자식 선택자 - 자식 요소에만 스타일 적용하기

하위 선택자와는 다르게 자식요소에만 스타일이 적용된다.

부모요소와 자식요소 사이에 > 기호를 사용한다.

부모요소 > 자식요소 {

  속성:속성값;

  ...

}

인접 형제 선택자 - 첫 번째 동생 요소에 스타일 적용하기

같은 부모를 가지는 형제요소 중 첫번째 동생요소에만 스타일을 적용한다.

첫번째 지정하는 요소가 형요소, 두번째 지정하는 요소가 동생요소이다.

형요소 다음에 나오는 첫 번째 동생요소에만 스타일을 적용한다.

요소 사이에 + 기호를 사용한다.

요소1 + 요소2 {

  속성:속성값;

  ...

}

형제 선택자 - 형제 요소에 스타일 적용하기

인접 형제 선택자와 다른점은 모든 형제요소에 적용된다는 점이다.

요소1 다음에 나오는 모든 요소2에 스타일을 적용한다는 얘기다.

요소 사이에 ~ 기호를 사용한다.

요소1 ~ 요소2 {

  속성:속성값;

  ...

}

그룹 선택자 - 스타일 한꺼번에 정의하기

여러 선택자에 같은 속성을 적용해야 할 때 묶어서 정의할 수 있다.

요소1, 요소2, ... {

  속성:속성값;

  ...

}