CSS 선택자의 종류와 활용방법

CSS 선택자의 종류와 활용방법

---

---

 

CSS 표만들기 및 테두리 꾸미는 방법

 

CSS 표꾸미기, 정렬하는 방법

 

CSS 테이블 꾸미기, 표 크기 설정하는 방법

1. 전체 선택자

- 전체 선택자는 모든 html 요소를 선택합니다. 별표 ( * )로 나타냅니다.

- 예를 들자면 다음은 모든 요소의 색상을 파란색으로 만듭니다.

 

* {   color: blue; }

- 다른 선택자와 같이 사용을 할때에는 생략할 수 있습니다. 즉, 다음 두줄은 같은 결과를 만듭니다.

*.abc { color: blue; } .abc { color: blue; }

 

2. 타입 선택자

- 타입 선택자는 h1, p, span, div 등의 html 요소를 선택하는 선택자입니다.

- 예를 들자면 다음은 html 문서 안에 있는 모든 p요소의 내용을 파란색상으로 만듭니다.

p {   color: blue; }

 

3. 속성 선택자

- 속성 선택자는 특정 속성을 가지고 있거나 특정 속성이 특정 값 등을 갖고 있는 요소를 선택합니다.

1)attributename(속성 선택자)

- attributename 속성을 가진 요소를 선택합니다.

- 예를 들어 다음은 title 속성을 가진 h1 요소를 선택합니다.

h1[title]

 

2)attributename="value"

- attributename 속성의 값이 value인 요소를 선택합니다.

- 예를 들자면 다음은 title 속성의 값이 abc 인 h1 요소를 선택합니다.

h1[title="abc"]

- 주의할 사항은 속성값이 정확하게 일치하여야 한다는 것입니다.

- 예를 들어 다음은 선택이 되지만,

<h1 title="abc">Lorem</h1>

- 다음은 선택되지 않습니다.

<h1 title="abc xyz">Lorem</h1>

 

3)attributename~="value"

- attributename 속성의 값이 value를 포함한 요소를 선택합니다.

- 예를 들어서 다음은 title 속성의 값이 abc를 포함한 h1 요소를 선택합니다.

h1[title~="abc"]

- 포함 여부는 단어 기준으로 판단합니다.

- 예를 들자면 다음은 선택되지만,

<h1 title="abc xyz">Lorem</h1>

- 다음은 선택되지 않았습니다.

<h1 title="abcxyz">Lorem</h1>

 

4) attributename l ="value"

- attributename 속성의 값이 value 이거나 value-로 시작하는 요소를 선택합니다.

- 예를 들어서 다음은 title 속성의 값이 abc 이거나 abc-로 시작하는 h1요소를 선택합니다.

h1[title|="abc"]

 

- 다음은 선택되고

<h1 title="abc">Lorem</h1> <h1 title="abc-xyz">Lorem</h1>

-다음은 선택이 되지 않습니다.

<h1 title="abc xyz">Lorem</h1>

 

5) attributename^="value"

- attributename 속성의 값이 value로 시작하는 요소를 선택합니다.

- 예를 들어서 다음은 title 속성의 값이 abc로 시작하는 h1요소를 선택합니다.

h1[title^="abc"]

- 단어 기준이 아니라 문자열 기준입니다. 그래서 다음 모두 선택이 됩니다.

<h1 title="xyz abc">Lorem</h1> <h1 title="xyz-abc">Lorem</h1>

 

6) attributename*="value"

- attributename 속성의 값이 value를 포함한 요소를 선택합니다.

- 예를 들어서 다음은 title 속성의 값이 abc를 포함한 h1요소를 선택합니다.

h1[title*="abc"]

- 포함 여보는 문자열을 기준으로 판단합니다. 따라서 다음 모두 선택됩니다.

<h1 title="abc xyz">Lorem</h1> <h1 title="abcxyz">Lorem</h1> <h1 title="lmn abc-xyz">Lorem</h1>

 

CSS를 HTML에 적용하는 방법 및 설명

 

css 기초 여러가지 문법 만들기

 

css 상속에 대한 정의와 속성