Why selector?
예전부터 학교에서 간단한 프로그래밍은 했지만, 웹 개발은 좀 나중에 시작했습니다. 웹 개발을 시작하면서 배운 'Select'이란 개념이 처음에 굉장히 낯설고 적응되지 않았습니다.
왜냐면 예전에 작성한 프로그램에서는 변수를 선언하고, 변수들의 상호작용으로 이뤄진 결과를 그냥 print를 통해 내보내는 식으로 작성했기 때문입니다.
public static void main(String[] args){
int a = 10;
int b = 20;
System.out.println(a + b); // GUI 없이 콘솔에 결과만 출력하는 것에 익숙
}자바의 예시
이후에 웹개발을 접하면서 웹에서 'select'이란 개념을 처음 배웠습니다.
'select'이란 개념에 대한 제 생각은 'DOM에 있는 어떤 엘리먼트에 코드를 주입하기 위해 DOM 내부의 엘리먼트를 선택 해주는 역할'입니다.
생각해보면 DOM 내부의 엘리먼트들은 따로 JS에서 변수로 지정되어 있지도 않습니다. 다만, 브라우저 자바스크립트에 내장된 API를 통해 내용을 변형할 수 있을 뿐이죠.
일반적인 콘솔 프로그램에서 어떤 변수를 활용할 때는 a면 a, b면 b와 같이 간단하게 그 변수의 이름만 알면 되는데, 웹 프로그래밍에서는 내가 원하는 변수 격이 될 DOM 엘리먼트를 사용하기 위해서 정확한 'select'을 해주어야 합니다.
DOM 엘리먼트는 일반적으로 우리가 정해놓은 이름이 아닌 HTML에 정해진 스펙대로 이름을 갖고 있으며, 각 엘리먼트는 자신만의 속성(attributes)들을 가지고 있습니다.
이러한 DOM 엘리먼트를 자유자재로 다루려면 '선택'이 정말 중요합니다. 가장 간단하게 시작하면 특정 엘리먼트가 가지고 있는 고유한 id를 지정하여 선택할 수도 있고, 엘리먼트의 이름을 지정하여 선택할 수도 있고, class를 지정하여 선택할 수도 있고, 어떤 id 엘리먼트의 자식 엘리먼트들을 선택할 수도 있고, 어떤 class 엘리먼트의 부모 엘리먼트들을 선택할 수도 있습니다.
내가 선택하고 싶은 엘리먼트를 선택하는 것은 웹 프로그래밍 코딩 중 가장 기본이라고 생각합니다. 이러한 맥락에서 'select'를 제대로 알고가는 것은 매우 도움이 될 것이라 생각해 정리해봅니다.
모든 요소를 선택하는 경우
* 키워드를 이용하면 됩니다.
* {
color: blue;
}해당 Stylesheet이 적용되면, 모든 글씨색이 파란색이 될 것입니다.
특정 엘리먼트(태그) 이름을 선택하는 경우
tag를 직접 입력하면 된다.
div {
border: 1px solid black;
}모든 div 태그의 태두리가 1px 검은색 실선으로 지정됩니다.
특정 id를 가진 엘리먼트를 선택하는 경우
#id를 입력하면 된다.
#redFont {
color: red;
}redFont라는 아이디를 가진 엘리먼트의 글씨색이 빨간색이 됩니다.
특정 클래스를 가진 엘리먼트를 선택하는 경우
.class를 입력하면 된다.
.my-class {
color: yellow;
}my-class란 클래스명을 가진 엘리먼트의 글씨색이 노란색이 됩니다.
특정 속성이 있는 엘리먼트를 선택하는 경우
selector[attribute] 와 같이 선택하면 됩니다.
#abc[class] {
color: "red";
}id가 abc인 엘리먼트이면서 class 속성이 존재한다면, 글씨 색을 빨간색으로 지정
특정 속성의 값이 지정 값과 일치하는 엘리먼트를 선택하는 경우
selector[attribute="value"] 와 같이 선택하면 됩니다.
#abc[class="my-class"] {
color: "red";
}id가 abc이면서 class로 "my-class"라는 값을 가진 엘리먼트의 글씨 색이 빨간색이 됩니다.
특정 속성의 값이 띄어쓰기로 구분되었을 때 특정 글자를 포함하는 엘리먼트를 선택하는 경우 '~'
selector[attribute~="value"] 와 같이 선택하면 되는데, 유의점은 특정 값이 띄어쓰기로 나뉜 경우만 적용됩니다.
<div class="my class"></div>인 경우에 적용되고
<div class="my-class"></div>인 경우에 적용되지 않습니다.
div[class~="my"] {
color: blue;
}div 엘리먼트 중 띄어쓰기로 나누었을 때 my라는 글자를 포함한 클래스를 가진 엘리먼트에 파란색 글씨를 부여합니다.
특정 속성의 값이 하이픈(-)로 구분되었을 때 특정 글자를 포함하는 엘리먼트를 선택하는 경우 '|'
selector[attribute|="value"] 와 같이 선택하면 되는데, 유의점은 특정 값이 하이픈으로 나뉜 경우에 적용됩니다.
<div class="my class"></div>인 경우에 적용되지 않고
<div class="my-class"></div>인 경우에 적용됩니다.
div[class|="my] {
color: blue;
}div 엘리먼트 중 하이픈으로 나누었을 때 my라는 글자를 포함한 클래스를 가진 엘리먼트에 파란색 글씨를 부여합니다.
특정 속성의 값이 지정 문자로 시작하는 엘리먼트를 선택하는 경우 '^'
selector[attribute^="value"] 와 같이 선택하면 됩니다.
div[class^="my"] {
color: blue;
}특정 속성의 값이 지정 문자로 끝나는 엘리먼트를 선택하는 경우 '$'
selector[attribute$="value"] 와 같이 선택하면 됩니다.
div[class$="class"] {
color: blue;
}특정 속성의 값이 지정 문자를 포함하는 엘리먼트를 선택하는 경우 '*'
selector[attribute*="value"] 와 같이 선택하면 됩니다.
div[class*="my-c"] {
color: blue;
}자식 엘리먼트 선택하는 경우
selector selector 와 같은 형식으로 입력하면 자식요소를 선택할 수 있습니다.
div span {
color: blue;
}<div><span></span></div> 이런식으로 자식엘리먼트가 영향을 받는다.
직계 자식 엘리먼트 선택하는 경우
직계 자식이란 것은 모든 자식이 아니라 해당 엘리먼트보다 딱 1 depth 밑에 있는 자식만을 말합니다.
selector > selector
div > span {
color: green;
}인접 형제 엘리먼트 선택하는 경우
<div>
</div>
<span>
</span>위와 같은 상황을 말합니다.
selector + selector
div + span {
color: green;
}참고로, 위의 경우에 div에는 적용 안되고 span에만 적용이 된다는 것을 알아둡시다.
일반 형제 엘리먼트 선택하는 경우
아까는 인접한 것 하나만 선택했다면, 이번에는 해당하는 모든 형제를 선택합니다.
<div>
</div>
<p>
</p>
<span>
</span>
<a>
</a>
<span>
</span>위와 같은 상황에서 div와 형제인 모든 span을 선택하고 싶을 때 사용합니다.
selector ~ selector
div ~ span {
color: white;
}가상 클래스(pseudo-class)를 선택하는 경우
가상클래스를 선택할 때는 아래에서 필요한 키워드를 골라 사용하면 됩니다.
링크 셀렉터, 동적 셀렉터
link: 방문하지 않은 링크일 때visited: 방문한 링크일 때hover: 마우스가 올라와 있을 때active: 클릭된 상태일 때focus: 포커스가 잡혔을 때
엘리먼트 상태에 대한 셀렉터
checked: 체크된 상태일 때enabled: 사용 가능한 상태일 때disabled: 사용 불가능한 상태일 때
자식 순서에 따른 셀렉터
first-child: 첫번째 자식인 요소last-child: 마지막 자식인 요소nth-child(n): n번째 자식인 요소nth-last-child(n): 뒤에서 n번째 자식인 요소nth-child(2n-1): 홀수번째 자식인 요소nth-child(2n): 짝수번째 자식인 요소
엘리먼트 순서에 따른 셀렉터
first-of-type: 해당 태그의 엘리먼트 중 처음으로 등장한 것 선택last-of-type: 해당 태그의 엘리먼트 중 마지막으로 등장한 것 선택nth-of-type(n): 해당 태그의 엘리먼트 중 앞에서 n번째로 등장한 것 선택nth-last-of-type(n): 해당 태그의 엘리먼트 중 뒤에서 n번째로 등장한 것 선택
아닌 것을 선택하는 셀렉터
not(selector): selector가 아닌 것을 선택
div:not([id="thisId"])id가 thisId가 아닌 것을 선택
검증을 기준으로 선택하는 셀렉터
valid(selector): 검증 성공한 input 또는 form 엘리먼트invalid(selector): 검증 실패한 input 또는 form 엘리먼트
사용할 때는 위의 가상 클래스들을 아래와 같은 형식으로 사용하면 됩니다.
selector:pseudo-class와 같은 형식으로 선택이 가능합니다.
div:hover {
color: yellow
}위의 예제는 마우스를 올렸을 때 글씨 색이 노란색으로 변하는 예제입니다.
가상 엘리먼트 셀렉터 (Pseudo-Element Selector)
엘리먼트의 특정 부분에 스타일을 적용할 때 사용된다.
first-letter: 콘텐츠의 첫 글자first-line: 콘텐츠의 첫 줄after: 콘텐츠 뒤에 위치하는 공간before: 콘텐츠 앞에 위치하는 공간selection: 드래그한 콘텐츠를 선택, IOS safari등 일부 브라우저에선 동작 X
selector::pseudo-element-selector와 같은 형식으로 선택이 가능합니다.
p::first-letter {
color: yellow
}첫번째 글자만 노란색이 됩니다.
레퍼런스
