제2장 CSS

2. 선택자(기본 선택자)

작은 안드로이드 개발자 2023. 10. 19. 20:00

CSS에서 어떠한 속성을 선택해서 지정하도록 할수 있는 기능이 이를 선택자라고 한다.

선택자는 보면 엄청난 종류가 있는데 뭔.. 선택받은 아이들도 아니고.. 왜 이렇게 많이 선택되어야 하는지 이유를 모르겠네. 모든게 선택인듯.

무튼.. HTML에서는 그놈의 웹의 접근성이 있었다면. CSS는 선택자인것같다. 무튼 

그 많고 많은 선택자중 여기선 기본이 되는 선택자들을 알아보도록 하겠다.(사실 너무 간단한 개념이고 방대하므로 코드펜으로 작성하지는 않도록 하겠음.)

 

1. 전체 선택자.
말그대로 문서에 전체 적으로 적용되는 선택자이다.  어떻게 생겼냐면
*{속성:값;}이렇게 생겼다. 프로그래머라면 익숙한 별(*)이다. 반복문 배울때도 익숙하고 ~ import할대도 익숙한 별 대충 모두 포함한다 뭐 이런 것의미다. 왜 그런의미일까? .. 무튼 저 선택자로 스타일을 작성하면 모든 태그에 적용된다.  
ex)예를 들자면 *{color:red} 라고 스타일을 작성하면 모든 세상이 빨갱이로 변한다. 하.. 

그래도 코드는 보여줘야하니까 작성한 코드를 보여줌,

<!DOCTYPE html>
<head>
    <titla>내부 스타일 시트 사용하기.</titla>
    <style>
        *{
            color: red;
        }
    </style>
</head>
<body>
    <h1>우리는 모두 빨갱이다.</h1>
    <p>나도 빨갱이고</p>
</body>
</html>

이런식으로 사용하면된다. 실행해보면 모든것들이 빨간색으로 변해있다. 주의 할것은 보여지는 부분만 속성의 정의되었다 생각할수 있는데 html태그를 비롯해서 그의 모든 자식과 손주요소들까지 속성의 정의되어있음을 이해해야한다.

 

2.태그 선택자
태그로 선택자를 지정한다. 
예는 p{속성=값;} 으로 적용하면 p요소인 녀석들에게 전부 적용된다.
3. 아이디 선택자
아이디로 선택자를 지정한다 
예는  #id명{속성 =값;} 해당 아이디의 요소에 적용된다. 참고로 요소의 아이디는 중복될수없다 (안드로이드의 view id와 같은 개념)
4. Class 선택자
Class로 선택자를 지정한다.
예는 .class명{속성 = 값;} 해당 class를 가지는 녀석들에게 모두 적용된다.
5.기본속성 선택자
속성을 선택자로 지정하는것으로 
여러 예가 있지만 a[href]{속성 =값;}으로 정의된다. 그러면 a 태그중에 href의 속성을 가진 녀석들에게 적용된다. 선택자로 태그가 올수도 있으나 #id,.class와 같이 id와 class명도 선택자로 지정가능하다 
#id[href] {속성=값;} .class[href]{속성=값;} 과 같이 말이다. 그리고 이런식으로도 응용가능하다 . 만약에 a태그중에 tartget속성이  _blank인녀석들만을 지정하고 싶다면 명시해주면된다. a[target="_blank"]{속성=값}으로 정의하면 a태그중 tartget의 속성이 _blank 속성인 녀석들만 적용된다.
6.문자열 속성선택자
문자열 속성 선택자는 속성에 문자열을 검사해서 적용한다. 예를들어 div[class~=box]{속성=값;}와 같은 경우다. 해당 경우에 div이면서 class에 box문자열이 포함되어 있을경우 적용된다. 여러가지 연산으로 처리 가능한대 아래의 표를 참고하자. 
사용 정의 
속성~=문자열  속성에 해당 문자열이 포함되어있을경우 
속성|=문자열 1.속성값이 문자열과 같거나
2.속성값이 문자열과 같으면서 -(하이픈)으로 시작되는경우 적용  
속성^=문자열 속성값이 해당 문자열로 시작하면 적용.
속성$=문자열 속성값이 해당 문자열로 끝나면 적용.
속성*=문자열 속성값에 해당문자열이 포함되어있을경우 (?뭐야 이거 왜 ~=와 똑같아 )

느낀점.

이로써 기본선택자에대한 포스팅이 끝났다. 아니 근데 왜 ~=와 *=의 결과가같은거지 ? 내부적으로 다른건가 ? 아니면내가 모르는건가.

다음은 조합 선택자를 배워볼것같다.  끝!