1. 태그 선택 방법
HTML 코드의 태그를 CSS에서 선택하는 방법은 크게 두가지로 방법이 존재하는데요. 첫번째는 HTML 파일의 특정 태그를 선택하는 선택자(Selector)와 해당 선택자에게 속성(Property)과 속성 값(Property value)을 부여하는 선언(Declaration)이 두가지로 구성이 되어 있습니다.
2. 기본 선택자
기본 선택자는 대표적으로 아스타리크 기호(*), 태그, 클래스, id 선택자가 있으며 각각의 선택자 설명은 다음과 같습니다.
전체 선택자(*): HTML 문서 내의 컨텐츠 전부를 선택하는 선택자 입니다. 특별한 경우를 제외하고는 사용하지 않습니다.
태그 선택자: HTML내의 스타일을 적용 할 태그의 이름을 작성 하는 방법입니다. 하지만 이 선택자 또한 특별한 경우를 제외하고는 사용을 지양하는 편입니다.
클래스 선택자: 특정 태그 내에 선언 된 클래스를 선택하는 방법입니다. 이때 클래스명 앞에 점 (.)을 붙여주어 사용합니다. 이때 클래스는 특징 상 여러 태그에 적용이 설정이 가능합니다.4.
아이디 선택자: 특정 태그 내에 선언 된 아이디를 선택하는 방법입니다. 이때 아이디명 앞에 #을 붙여주어 사용합니다. 또한 아이디의 특징 상 특정 아이디명은 하나의 태그에만 적용이 가능합니다.
3. 복합 선택자
기본 선택자 끼리 조합하여 선택하는 방법입니다.
나열식: 기본적으로 붙여 사용 할 때에는 해당하는 여러 선택자를 같이 포함하는 태그를 선택합니다.
4. 직계 선택자
상위 및 하위 태그로 포함되는 관계를 이용하여 태그를 선택하는 방법입니다.
자식 선택자: 태그 중에서 자식에 해당하는 요소를 선택하는 방법이며 닫는 꺽쇠가로(>)를 이용하여 해당 태그를 선택합니다.
하위 선택자(자손) : 선택자 간 공백(space)을 주면서 하위 요소를 찾는 방식입니다. 자식 선택자와의 차이점은 자식 선택자의 경우 부모와 자식 사이에 다른 요소가 있다면 그 요소들을 무시하고 딱 자식만 선택을 하는 반면, 하위 선택자의 경우 다른 요소까지 포함하여 지정합니다.
형제 선택자: 특정 태그와 같은 위치에 있는 형제 태그들을 선택하는 방법이며 플러스 기호(+)를 사용하면 해당 태그 바로 아래의 태그를 선택 하고, 물결 기호(~)를 사용하면 해당 태그 바로 아래부터 모든 형제 태그를 선택하는 방법입니다.
5. 가상 선택자
가상 선택자(Virtual Selector)는 HTML 문서 내의 특정 상태나 조건에 따라 요소를 선택하는 데 사용되는 CSS 선택자의 한 유형입니다. 이러한 가상 선택자는 요소의 상태에 따라 스타일을 지정하거나 특정 위치의 요소를 선택하여 사용자가 특정 행동을 했을때 속성을 변화 시키거나 없는 요소를 만들어내는 용도로 사용됩니다.
- 기본적으로 hover(마우스를 올릴 때), active(마우스로 클릭을 하는 동안), focus(요소가 포커스 되어 있는 동안) 등이 존재합니다.
이러한 가상 클래스 선택자는 비단 행위를 위한 선택 뿐만 아니라 특정 태그를 지정 할떄도 활용 됩니다. 이때 축약형 네이밍 키워드인 nth을 사용하면서 현재 태그 요소를 지칭하는 역할로 사용을 합니다.
parent 자식:first-child→ 부모 태그의 자식들 중 첫번째 태그를 선택합니다. 이때 첫번째 태그와 태그명이 일치 한다면 속성을 부여하는데 주의할 점은 부모 태그의 첫번째 자식과 태그명이 동일해야 한다는 것입니다. 만약 부모 태그의 첫번째 자식이 div이고, 선택자 태그명이 span이면 태그의 불일치로 속성이 부여되지 않습니다.
parent 자식:last-child→ 부모 태그의 자식들 중 마지막 태그를 선택합니다. 이하 설명은 first-child와 동일합니다.
parent 자식:nth-child(n)→ 부모 태그의 자식들 중 자식 태그의 n번째 태그를 선택합니다. 이때의 n은 0부터 시작하며 이는 컴퓨터의 계산 절차상 0번부터 시작 하므로 만약 자식 태그가 다섯개라면 0부터 4까지의 값이 생성이 되는 것입니다.
parent 자식:nth-child(2n)→ 짝수 형제를 선택하는 방법입니다. n은 0부터 시작하므로 0, 2, 4, 8ㆍㆍㆍ 번째 형제들을 선택합니다.
parent 자식:nth-child(2n+1)→ 홀수 형제를 선택하는 방법입니다. 1, 3, 5, 7, 9ㆍㆍㆍ 번째 형제들을 선택합니다.
parent 자식:nth-child(n+2)→ 2번째 형제부터 차례대로 선택합니다. 즉 n이 0부터 시작 할때 첫번째 값은 2, 두번째 값은 3, 세번째 값은4 처럼 계속 시작 지점인 2부터 연속적으로 형제 요소를 선택 할 수 있는 방법입니다.
parent *:not(자식)→ 부모 요소의 자식들 전체중에서 자식 태그가 아닌 나머지 태그들에 속성을 지정하는 방법입니다.또한 of-type 네이밍을 사용해 현재 선택된 태그의 순서를 지정하는 작업 또한 가능합니다.
parent 자식:first-of-type: 부모 요소 안에 있는 자식 태그들 중 첫번째 태그 요소를 선택합니다. 이때 태그가 정해지지 않는다면 각각의 태그들의 첫번째 태그 요소를 선택합니다.
parent 자식:last-of-type: 부모 요소 안에 있는 자식 태그들 중 마지막 태그 요소를 선택합니다. 이하 설명은 first-of-type과 동일합니다.parent 자식:nth-of-type(n): 부모 요소 안에 있는 자식 태그들 중 n번째 태그를 선택합니다. nth-child와 사용 방법이 거의 흡사하며 계산식 적용 또한 가능합니다.parent 자식:only-of-type: 부모 요소 안에 유일하게 존재하는 단일 태그를 선택합니다. 즉 부모 요소 안에 div라는 태그가 하나 밖에 없을 경우 이 태그를 선택한다는 의미이며, 두 개 이상이 존재할 경우 해당 효과는 무효화 됩니다.parent 자식:only-child: 부모 요소 안에 유일하게 존재하는 단 하나의 태그를 선택합니다. 즉 부모 요소 안에 종류를 불문하고 태그가 딱 하나 밖에 없을 경우에만 적용이 가능합니다.
6. 가상 요소 선택자
가상 클래스는 위의 예시들 처럼 다양하게 선택이 가능하지만 콜론을 두개 써서 해당 선택된 태그의 앞, 또는 뒤의 요소를 삽입하는 가상 요소 선택자 또한 존재 합니다.
tag::before: 해당 태그의 앞에 요소를 삽입합니다. 이때 넣을 값으로 content 속성을 사용하고 더블쿼리(””)를 이용해 삽입할 컨텐츠를 입력합니다.
tag::after: 해당 태그의 뒤에 요소를 삽입합니다. 이때 넣을 값으로 content 속성을 사용하고 더블쿼리(””)를 이용해 삽입할 컨텐츠를 입력합니다.⭐ 참고로 이 두 기능은 inline 속성을 가집니다. 그래서 만약 마진과 마찬가지로 높이와 너비를 주고 싶다면 display를 block 속성이나 inline-block으로 변경 해주어야 적용이 가능합니다.
텍스트 이외의 컨텐츠를 삽입하고 싶다면 더블쿼리(””)의 안쪽을 빈칸으로 만들어주면 됩니다.
추가로 해당 위치에 기호를 불러와 만들고 싶다면 background-image와 size 속성을, display, margin, width, height 등의 속성들 또한 사용이 가능합니다.
7. 속성 선택자
속성 선택자는 특정 태그에서 인라인 형식으로 정의된 속성을 선택하는 방법입니다. bracket 기호([])를 사용합니다.
input[disabled]: input 태그 중 인라인 속성이 disabled인 태그를 선택합니다.
input[type]: input 태그 중 type 속성이 정의 된 태그를 선택합니다. input은 기본적으로 type 속성이 들어가기 때문에 전체 input을 선택하게 되는 것입니다.
input[type=“text”]: input 태그의 type 속성이 “text”인 태그를 선택합니다. 이렇게 선택할 경우 type이 text인 input만 선택이 가능합니다.⭐ 특히 속성이 여러 태그에 있을 경우 구별을 위해 꼭 태그와 bracket 기호를 같이 작성해 주어야 하며 특정 속성이 HTML 코드 상에 하나의 한 종류의 태그에만 지정이 가능한 경우와 유니크한 속성인 경우 앞에 태그 이름을 붙일 필요 없이 bracket만을 사용해 해당 속성, 혹은 속성과 밸류 값을 작성해줍니다.
