20210119_웹 프론트엔드 기초04 , CSS 선택자 정리

웹 프론트엔드 기초 04

1. CSS 선택자 공부

반드시 기억해야 하는 CSS 선택자 30개 by Jeffrey Way 를 정리해 보았다.

기본적으로 id , class, descendant 를 알고 있어야 한다.

기본 선택자 "Basic Selecotrs"

1) *

• The star symbol
• 페이지의 전체 요소를 선택
• TEST 용 권장 "margin , padding 값 0으로 보고 싶을 경우"
• 실무에서는 비권장 -> 불필요하고, 브라우저 과부화

2) #X

• id 선택자
• 비권장 : 유연성 낮음 "요소 1개만 지정 가능해 재사용이 불가하여"
• 정말로 필요한지 생각해봐야 함

3) .X

• class 선택자
• 여러 요소를 지정 가능해 중복 사용 가능

4) X

• type 선택자
• 일정한 타입이 있게 요소를 만들고 싶은 경우
• ex) ul , a , p 등.. 여러 기본 태그

관계(짝) 선택자 "Combinator Selectors"

5) X Y

• descendant 선택자
• 상세히 작업시 사용
• 단, 너무 난발하지 말고 특징을 잘 그룹화 할 것(X Y Z A B.error-> 잘못된 사용임)

5-1) 선택자_공백, ,, 붙임 사용

• 선택자 끼리 붙임 : AND연산 (1 태그#아이디 2 태그.클래스 3 .클래스#아이디)
• 선택자 끼리 , : OR연산 (1 #아이디, .클래스명 2 태그, .클래스명)
• 선택자 끼리 : 자식 관계 선택 (1 태그 태그 2 태그 .클래스)

6) X > Y

• X Y 와는 다르게 직접 자손만 선택함
• 예를 들어 자손의 자손 관계(X-Y-Z)에서 중복된 type 선택자 등을 사용(Y, Z에 모두 ul요소 사용)하게 됬을 때 -> > 를 통해서 Y의 ul 만 선택하게 됨

7) X + Y

• 인접(adjacent) 선택자
• 전에 있던 요소 바로 앞의 요소만 선택함(Y 요소 중에서 제일 앞)

8) X ~ Y

• 형제(sibling) 선택자
• X + Y와는 다르게 덜 제한적으로 포괄적으로 선택(앞의 Y요소들 모두를 선택)

속성 선택자 "Attribute Selectors"

9) X[title]

• title을 가지는 X 요소 선택 (아직 특정 스타일이 없는 상태)

10) X[href="주소"]

• 보통 앵커 태그 사용하므로 해당 주소를 가지는 앵커 태그 선택
• 주소는 웹주소, 로컬 주소도 상관 없음
• 완전히 값은 값을 찾는 것임
• 간단한 주소 사용시에는 정규 표현식을 사용해서 사용

11) X[href *="주소"]

• * : 값을 포함하고있는 요소들을 선택
• ex) "raccooncode" 이면 raccooncode.com , code.raccooncode.com, 등 모두 선택 됨

12) X[href ~="주소"]

• ~표시 -> 특정 주소 값이 깔끔하게 앞뒤에 공백 문자 외에 없어야 선택

13) X[href |="주소"]

• |표시 -> "주소"로 시작해서 뒤에 -(하이픈)이 붙은 경우 포함

14) X[href^="http"]

• ^표시 -> http 로 시작하는 값 선택

15) X[href$=".jpg"]

• $표시 -> .jpg로 끝나는 값을 선택
• 사이트 모두 적용할 거니까 http로 지정한 것

16) X[data-*="foo"]

• html에서 X태그 속성에 data-something="something1" 지정시 css 선택자 속성에서 사용가능
• 보통 data-type="image"로 지정시 편함

위와 같이 다양한 CSS 속성 선택자와 정규 표현식의 조합을 통해 더욱 효율적으로 가능

가상 선택자 "Pseudo Selectors"

17) X:가상 이벤트

• X:visited : 클릭 및 방문했던 앵커태그(<a>) 선택시 ex) 주로 color 건드림
• X:link : 방문 , 클릭전 앵커태그(<a>) 선택시 ex) 주로 color 건드림
• X:checked : 라디오 버튼, 체크박스처럼 체크 인터페이스 요소 선택
• X:hover : 마우스를 위에 올렸을 때
• X:focus : 포커스 되었을 때 (input 태그 등 )
• X:active : 마우스로 클릭했을 때
• X:first : 첫번째 요소
• X:last : 마지막 요소
• X:first-child : 첫번째 자식
• X:last-child : 마지막 자식
• X:nth-child(2n+1) : 홀수 번째 자식
• X:only-child : 단하나의 자식만 갖는 X요소 선택
• X:only-of-type : X요소를 1개만 갖는 상위 요소 선택

18) X:after , X:before(X::after , X::before), X:first-line

• 가상 클래스, 요소로서 앞 뒤에 내용을 생성
• ::after, ::before : 본문에 추가적인 내용을 덧붙이는 경우에 많이 씀(content속성 사용, 인라인을 기본값으로 가짐)
• 보통 버튼 만들기 또는 inline-block를 활용하여 같은 간격으로 정렬시 사용
• X:first-line : 요소의 첫번째 줄에만 스타일 적용

19) X:nth-of-type(n)

• 자식 요소가 아닌 현재 요소들 중에서 특정 순서에 있는 요소에 스타일 지정시 사용

20) X:nth-last-of-type(n)

• 목록 선택자의 끝부터 시작해 n 번째 요소를 대상에 스타일 지정

다음 시간에는 선택자에 대한 속성을 알아보자

추가적으로 ::before after를 이용한 버튼 만들기 등은 조금더 찾아보자