Dev-Tino 6주차(2):: CSS 선택자란? 선택자 문법.

CSS란?

CSS(Cascading Style Sheet), 웹 페이지를 꾸미기 위해 작성하는 코드. 이는 프로그래밍 언어(*컴퓨터에서 작동하는 소프트웨어를 만들기 위한 도구, 파이썬 등이 있다)나 마크업 언어(*태그<>를 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지, html이 대표적 예시이다.)는 아니다. 이는 Style sheet 언어이다. 이것은 HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있도록 하는 언어이다. 어떤 선택자를 사용함에 따라 특정 요소만 꾸미는 등의 행동도 할 수 있다.

선택자(selector): rule set의 맨 앞에 있는 HTML 요소의 이름이다. 이것으로 꾸밀 요소를 선택하게 만든다. 이를 바꾸면 적용되는 범위를 바꿀 수 있다. 여기엔 ‘태그명’, ‘클래스’, ‘아이디’를 넣을 수도 있다. (이에 대해서는 후술한다.)

선언(Declaration): { } 안의 내용. 선택자에 따라 지정된 요소를 어떻게 꾸밀지를 이 곳에 정의한다. (꾸미기 원하는 요소의 속성 명시)

속성(property): 주어진 HTML 요소를 꾸밀 수 있는 방법이다. (위 예시에서는 color이 p 요소의 속성이다.) CSS rule 내에서 영향을 줄 속성을 선택한다.

속성 값(property value): 속성의 오른쪽, 콜론 뒤에 주어진 속성을 위한 많은 가능한 결과 중 하나를 선택하기 위해 속성 값을 가진다. (위 예시의 경우 red가 그것이다.)

이 때 신경써야 할 점은 다음과 같다::

- 각각의 rule set(선택자로 구분)은 반드시 { } (중괄호) 로 감싸야 한다.

- 각각의 선언 안에, 각 속성을 해당 값과 구분하기 위해 콜론(:)을 사용해야만 한다.

- 각각의 rule set 안에, 각 선언을 그 다음 선언으로부터 구분하기 위해 세미콜론(;)을 사용해야 한다.

만약 한 선택자에 여러가지 속성 값을 부여하여 한 번에 수정하기 위해서는, 다음과 같이 작성한 후 세미콜론을 넣어 구분한다.

다음 코드를 실행하면 다음과 같이 나온다 ▼▼

선택자

우리는 아까 ‘선택자’에 대해 배웠다. 이 선택자를 통해 우리는 어떤 HTML 요소를, 어떤 태그를 꾸밈 대상으로 선택할 수 있을지 정할 수 있다. 바로 위의 예시의 경우에는 p를 선택자로 택하였다. 이 경우, 그 문서의 모든 p 요소가 꾸밈 대상으로 선택되며 꾸며진다. 그러나 이런 ‘태그만을 선택하는 선택자’가 밖에 없다면 문서를 예쁘게 꾸미기 어려울 것이다. 다른 맥락의 paragraph라, p 태그로 감싸더라도 다른 모양으로 꾸며야 할 때에는 p를 선택자로 선택할 수 없다.

전체 선택자:: 모든 요소를 선택하나, 이 때 네임스페이스의 제한을 둘 수 있다. 구문 *, ns|*, *|*… 등이다. *은 문서 내의 모든 요소를 포함한다.

요소 선택자:: 이는 아까 이야기한 p 선택자를 포함하는 선택자이다. 요소 선택자- 태그, 또는 타입 선택자라고도 불리는 이것은 ‘특정 타입의 모든 HTML 요소를 선택’한다. 위와 같이 p를 선택하면 모든 <p> 태그에 적용된다.

아이디 선택자:: 이는 특정 아이디를 가진 페이지의 요소를 선택한다. 주어진 HTML 페이지에서, 아이디는 아이디당 딱 하나의 요소에만 허용된다. (회원가입 시 고유한 아이디를 요구하는 것과 비슷하겠다.) 이 때에는 ‘#아이디’의 형식으로 지정한다. 이 때 <태그 id=“아이디”> 의 요소를 선택해준다.

클래스 선택자:: 특정 클래스를 가진 페이지의 요소를 선택해준다. 아이디와 다른 부분이라면 이것은 특정 클래스를 가진 페이지의 요소(이 때, 클래스는 중복으로 부여될 수 있다.)를 가리킬 수 있다. ‘.my-class’를 선택하면, 클래스가 my-class인 모든 클래스를 택한다.

속성 선택자:: 이는 특정 속성을 가지는 페이지의 요소들을 모두 선택한다. img[src]로 선택할 경우, <img src=“css.png”>는 선택하나 <img> 태그는 선택하지 않는다.

수도(Pseudo) 클래스 선택자:: 특정 요소가 특정 상태에 있을 때에만 선택하는 요소이다. 예를 들어 hover라는 상태가 있다. 마우스 등이 그 요소의 위에 커서를 올리고 있을 때를 의미한다. 이런 경우에만 특정 디자인을 적용하도록 하는 요소가 수도(Pseudo) 클래스 선택자이다.

그룹 선택자:: 그룹 선택자는 ‘,’ 를 이용해 선택자 그룹을 생성하는 방법이다. 나열한 모든 일치하는 노드를 선택한다. A,B..의 식인데, 만약 div, span{/*디자인속성나열*/} 시, 모든 span, div 태그가 디자인 대상으로 선택된다.

이를 실행하면 다음과 같이 나온다::

결합자

결합자는 ‘여러 선택자들을 결합하여 사용할 수 있는 방법’이다. 자속 결합자(“ ”), 자식 결합자(“<”)등을 이용해 구현 가능하다.

후손 결합자:: 일반적으로 단일 공백(“ ”)문자로 표시된다. (자손 결합자 라고도 한다.) 첫 번째 선택자와 일치하는 조상(부모, 부모의 부모, 부모의 부모의 부모 등) 요소가 있는 경우 두 번째 선택자와 일치하는 요소가 선택되도록 두 선택자를 결합한다. 후손 결합자를 활용하는 선택자를 하위 선택자라고 한다.

자식 결합자:: (>)는 두 CSS 선택자 사이에 배치된다. 첫 번째와 일치하는 요소의 직계 자식인 두 번째 선택자와 일치하는 요소만 일치된다. 계층 구조에서 더 아래에 있는 하위 요소는 포함되지 않는다. 예를 들어, <article> 요소의 직계 자식 <p> 요소만 선택하려면 article > p 라고 쓰면 된다.

인접 형제 결합자:: (+) 두 CSS 선택자 사이에 배치된다. 첫 번째 선택자의 다음 형제 요소인, 두 번째 선택자와 일치하는 요소만을 꾸민다. 예를 들어 <p> 요소 바로 앞에 있는 <img> 요소를 선택하려면 p + img 라고 쓰면 된다. 그러나 이 경우, p와 img 사이에 h1과 같은, 다른 태그를 사용하면 더 이상 ‘인접 형제’가 아니므로 선택기가 인식하지 못하고, 디자인 역시 적용되지 못한다.

열 결합자:: || 결합자는 같은 열에 있는 노드를 선택한다. A||B와 같은 식이다. coll||td라고 치면 col(*부모 요소로 표현되는 열 그룹에서 하나 이상의 열을 정의한다.)의 범위에 속하는 모든 td(*데이터가 포함된 표의 셀을 정의하며 요소의 자식으로 사용된다.) 요소와 일치한다.

의사 클래스/요소

의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태일 때만을 포함함을 보여주는 키워드이다. 예를 들어 :hover(*사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 선택한다, 대개 사용자의 커서-마우스 포인터-가 요소 위에 올라가 있으면 선택된다.)

의사 클래스:: ‘:’ 는 문서 트리가 포함하지 않는 상태 정보에 기반해 요소를 선택할 수 있다. a:visited는 사용자가 방문한 모든 <a> 요소와 일치한다.

의사 요소:: 이는 HTML이 포함하지 않는 개체를 선택한다. 예를 들어 p::first-line은 <p>요소의 모든 첫 번째 줄을 이야기한다.

최근에 이 선택자를 사용할 일이 좀 있었다. 잘 사용했다고는 할 수 없다. 시간이 될 때 이 곳에 그 예제 코드를 가져와 한 번 어떻게 사용했는지를 보일 생각이다.

[참고 자료]

-https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/CSS_basics

-https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors

-https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Selectors/Combinators

-https://ssocoit.tistory.com/274

-https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes