[CSS] CSS PART.4(선택자_4)

형태구조선택자 종류.(동위 관계)

:first-of-type =형제 관계 중에서 첫번째로 등장하는 특정 태그를 선택

:last-of-type =관계 중에서 마지막으로 등장하는 특정 태그를 선택.

:nth-of-type() = ()번째로 등장하는 특정 태그를 선택.

:nth-last-of-type() = 뒤에서 ()번째로 등장하는 특정 태그를 선택.

 

(*) 활용 형태구조 선택자

Body 태그의 자식 중 첫번째 등장하는 모든 형태의 태그를 선택합니다.

 

 

 

문자선택자

 

1) 문자 가상요소 선택자 : 태그 내부의 특정한 조건의 문자를 선택하는 선택자

= 첫번쨰 글자 first-letter

= 첫번쨰 줄 first-line

= 기호 표준은 (::) 이지만 (:)으로 작성해도 브라우저가 호환성 있게 제공.

*em : default 값의 배수 크기를 의미하는 단위로 사용

 

 

2) 전후문자선택자 : 특정 태그의 전후에 위치하는 공간을 선택하는 선택자.

- content 스타일 속성을 입력할 수 있다(전후문자선택자에서만 사용할 수 있습니다)

 

 

*문자 선택자 활용

 

 

3) 반응문자선택자

: 사용자가 문자와 반응해서 생기는 영역을 선택하는 선택자(사용자가 드래그한 글자를 선택)

기호 : ( :: ) + selection

 

 

 

링크선택자

 

- href 속성을 가지고 있는 a태그에 적용되는 선택자.

- 한 번 이상 다녀온 링크를 선택할 수 있는 선택자.

- 사용도(빈도)는 낮습니다.

 

 

 

부정선택자

- 선택자를 모두 반대로 적용할 수 있게 만드는 선택자.

- 지금까지 사용하던 모든 선택자와 함께 사용 가능.

- 기호 = ( :not ) 사용

 

● 일반적으로 CSS는 또 다른 파일로 만들어서 정리한 이후 import 하는 형태로 사용합니다.

 

Html 은 html 만 css 는 css 만 입력한 파일을 만들어서 import 시켜 사용하며, 이렇게 했을 때, css의 코드가 노출 되지 않는 추가적인 이점을 가질 수 있습니다.

 

● 추가적으로 css를 html에 직접 넣어 기능 수행

 

내용이 적을 때는 편하게 보이지만 내용이 많아지게 되면 각각의 태그에 적용할 때는 좋은 것 같지만 똑같은 요소의 기능을 넣고 싶은 대상이 일반적으로 많이 있습니다. 또한 기능을 수정할 때, 일일이 수정해야하기 때문에 수정 보완의 시간과 노력이 필요합니다. 그러한 이유로 막바지에 이르러 수정포인트가 필요할 때 잠깐 적용할 때만 사용하고, 일반적인 상황에서는 지합니다.  

 

HTML과 CSS를 분리시키고, 수정 포인트가 생겼을 때 빠른 수행을 할 수 있도록 각자의 파일을 만들어 Import 하는 형태로 사용하는 것이 일반적이며 유용합니다.