[새싹x코딩온] 웹 개발자 부트캠프 과정 2주차 회고 | CSS 선택자

1. 서론

• CSS 선택자에 대해 알아보기

2. 본론

CSS 선택자(Selector)

CSS 선택자는 HTML 요소의 스타일을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지 브라우저에게 알려주는 CSS 규칙이다.

선택자 {속성명 : 속성값;} 형태로 작성한다.

p {
	color : red; 
    font-size : 10px;
}

위의 코드에서 p는 선택자(selector), color와 font-size는 속성명(property), red와 10px은 속성값(value)이다.

 

CSS 선택자의 종류

선택자를 이용해서 요소를 선택하는 방법에는 여러가지가 있다.

선택자의 종류에 대해 알아보자

종류	사용법
전체 선택자	*
유형 선택자	요소명
아이디 선택자	#아이디명
클래스 선택자	.클래스명
하위 선택자	띄어쓰기
직계자식 선택자	>
인접형제 선택자	+
일반형제 선택자	~
그룹 선택자	,
가상 클래스	:
가상 요소	::
속성 선택자	[]

 

 

1) 전체 선택자

전체 선택자는 HTML 문서의 모든 요소를 선택하는 선택자다.

* 을 사용해서 선택한다.

* { background-color : red; }

 

2) 태그 선택자(유형 선택자)

태그 선택자는 요소 이름을 사용해서 선택하는 선택자다.

div { color : black; }

 

3) 아이디 선택자

아이디 선택자는 id 속성값으로 선택하는 선택자다.

#을 사용하여 선택한다.

<div id="apple">사과</div>

#apple { color : red; }

 

 

4) 클래스 선택자

클래스 선택자는 class 속성값으로 선택하는 선택자다

.을 사용하여 선택한다.

<div class="fruits">사과</div>
<div class="fruits">딸기</div>
<div class="fruits">포도</div>
<div class="fruits">배</div>

.fruits { color : blue; }

 

5) 하위 선택자(자손 선택자)

하위 선택자는 특정 요소를 기준으로 그 안의 모든 하위요소를 선택한다. 

띄어쓰기를 사용한다.

<div>
 <div class="food">피자</div>
 <div class="food">
  <span class="food">치킨</span>
  <div class="food">푸딩</div>
 </div>
</div>

<ul>
 <li>원</li>
 <li>투</li>
 <li>쓰리</li>
</ul>

div .food { color : orange; }
/* div라는 요소 내에 food라는 클래스를 가진 모든 하위요소 선택 */
ul li { color : green }
/* ul 이라는 요소 내에 있는 모든 li 요소 선택 */

 

 

6) 직계자식 선택자

직계자식 선택자는 직계 자식 요소를 선택한다.

부등호 > 를 사용하여 선택한다.

<div>
 <span>div 직계 자식 span</span>
 <p>
  <span>div 자손 요소 span</span>
 </p>
</div>

div > span { color : skyblue; }
/* div 요소 내의 직계 자식 span 요소를 선택한다 */

 

7) 인접형제 선택자

인접형제 선택자는 인접한 형제요소를 선택하는 선택자다.

같은 부모를 공유하면서 바로 뒤에 오는 하나의 형제요소를 선택한다.

+를 사용하여 선택한다.

<ul>
 <li class="first">하나</li>
 <li>둘</li>
 <li>셋</li> 
</ul>

.first + li { color : hotpink; }
/* first클래스를 가진 li의 바로 뒤에 있는 형제 요소가 선택됨 */

 

8) 일반형제 선택자

일반형제 선택자는 같은 부모를 공유하면서 뒤에 오는 모든 형제요소를 선택하는 선택지다.

~을 사용하여 선택한다.

<ul>
 <li>고양이</li>
 <li>토끼</li> 
 <li class="dog">강아지</li>
 <li>햄스터</li>
 <li>도마뱀</li>
</ul>

.dog ~ li { color : violet; }

 

9) 그룹 선택자

그룹 선택자는 선택자 여러개를 그룹화 시킨다.

선택자 여러개를 한꺼번에 써서 같은 스타일을 적용시킬고 싶을 때 사용한다.

,을 사용하여 선택한다.

<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>

h1, h2, h3 { color : red;}

 

10) 가상클래스 선택자

사용자의 행동에 따라 변화하는 가상 상황에 따라서 요소 선택 시 사용하는 선택자

선택한 요소가 특별한 상태일 때 만족할 수 있다. 예를 들면 마우스 포인터를 올려 놓거나 웹 요소에 초점이 맞춰졌을때 해당한다.

가상클래스는 콜론(:)을 사용한다.

종류	설명
:hover	마우스 포인터를 올려놓을 때 스타일 적용
:active	마우스로 클릭하고 있을 때 스타일 적용
:focus	요소가 포커싱이 되었을 때 스타일 적용
:visited	방문했던 링크에 스타일 적용
checked	선택한 요소의 스타일 적용

 

    <div class="test-hover">마우스를 올려보세요</div>
    <button class="test-active">클릭해보세요</button><br>
    <input type="text" id="test-focus" placeholder="클릭해서 포커싱해보세요"><br>
    <a href="https://www.naver.com/" class="test-visited" target="_blank">방문해보세요</a><br>
    <input type="checkbox" id="test-check">
    <label for="test-check">체크해보세요</label>

        .test-hover:hover {
            background-color: pink;
        }

        .test-active:active {
            background-color: green;
            color: white;
        }

        #test-focus:focus {
            background-color: hotpink;
        }

        .test-visited:visited {
            color: orangered;
        }

        #test-check:checked + label {
            background-color: yellow;
        }

마우스를 올려보세요

방문한 뒤에 색의 변화를 봐보세요
체크해보세요

 

가상클래스는 웹 문서 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 적용할 때도 사용한다.

주로 특정 위치의 자식 요소를 사용할 때 사용하며 이를 구조 가상 클래스라고 한다.

종류	설명
:first-child	자식 요소 중 첫번째 자식 요소 선택
:last-child	자식 요소 중 마지막 자식 요소 선택
:nth-child(n)	자식 요소 중 n번째 자식 요소 선택

    <ul class="test-child">
        <li>나는 첫째</li>
        <li>나는 둘째</li>
        <li>나는 셋째</li>
        <li>나는 넷째</li>
        <li>나는 막내</li>
    </ul>

 

        .test-child li:first-child {
            color : hotpink
        }
        .test-child li:last-child {
            color : blue
        }

        .test-child li:nth-child(4) {
            background-color: lightgreen;
        }

 

 

특정 요소를 제외하고 스타일을 적용해주는 가상 클래스 선택자도 있다.

:not 가상 클래스 선택자를 사용하면 된다.

    <div class="food">
        <div>피자</div>
        <p>쿠키</p>
        <div>치킨</div>
        <h5>밤양갱</h5>
        <h2>만두</h2>
        <div>찐빵</div>
        <span>감자칩</span>
    </div>

        .food > :not(div) {
            color : skyblue;
        }

 

11) 가상요소 선택자

문서 안의 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가, 선택된 요소의 앞 혹은 뒤에 content를 삽입하는 선택자다. 콜론 2개를 사용한다.(::)

::before는 요소의 뒤에 내용을 삽입하고

::after는 요소의 앞에 내용을 삽입한다.

주로 의미없는 HTML 태그를 만들지 않고 요소 삽입이 가능해서 자주 사용한다.

<div class="box"> 여기요 ! </div>

        .box::before {
            content: '택시~';
            color: red;
        }

        .box::after {
            content: '빨리빨리';
            color: blue;
        }

12) 속성 선택자

지정한 특정 속성을 가지고 있는 태그를 선택하는 선택자다.

대괄호([]) 사이에 원하는 속성을 입력해서 사용한다.

    <input type="text">
    <input type="password">
    <input type="text">

        input[type="text"] {
            background-color: blueviolet;
        }

CSS 우선순위

지난번에 CSS는 가장 밑에 입력된 값이 우선으로 적용된다고 했다.

선택자들 사이에서는 어떤 것이 우선 순위가 높을까?

우선 순위는 다음과 같다

이미지 출처 : 코딩온 강의 자료

 

만약 한 태그내에서 아이디와 클래스를 둘 다 부여했을때, 스타일은 아이디 선택자를 사용해서 준 스타일이 우선으로 적용된다.

<div class="happy" id="sad">나의 기분</div>

        #sad {
            color: blue;
        }

        .happy {
            color : pink;
        }

나의 기분

위의 예시와 같이 클래스 선택자로 지정한 스타일이 더 아래에 있음에도 아이디 선택자의 우선 순위가 더 높기 때문에

아이디 선택자를 사용해서 준 스타일이 우선으로 적용된 것이다. 

나중가면 적용되는 css 파일도 여러개고 태그도 복잡해지고 코드도 복잡해지기 때문에 우선순위를 꼭 기억해서 코딩을 해야한다!

 

※ CSS 색상

CSS 에서 색상을 표기하는 방법으로는 크게 3가지가 있다.

 

1)  색상키워드

red, blue, white, black, pink 등 css 에서 기본으로 지정된 색상을 사용한다.

2)  16진수 코드

0~9 , a~f를 활용한 16진수 코드를 사용한다.

#xxxxxx 처럼 #6자리숫자로 표기한다

       ex)#efefef, #ffffff, #000000
       - #ffffff : red(ff), green(ff), blue(ff)
       - #000000 : red(00), green(00), blue(00)

3) RGB코드

rgb(red, green, blue) 로 표기한다.

0~255 숫자중 사용한다.

        ex) rgb(255,255,255), rgb(0,0,0), rgb(141, 214, 36)

 

 

3. 결론

선택자 부분은 기본중의 기본이지만 원래 기본이 제일 어려운 법인지 몇번을 해도 헷갈린다.

선택하는 방법은 여러개가 있어서 우선순위를 잘 생각하면서 선택을 해야겠다는 생각을 다시 한 번 했다.

어떤 선택자를 선탹해서 스타일을 적용시킬지애 대한 정답을 없다고 했다.

그래도 더 효율적인 코드 작성을 위해 지금 개념을 잘 잡아둬서 적용시켜야겠다.

원래 하위 선택자나 자식 선택자는 많이 썼었는데 형제 선택자는 헷갈려서 잘 쓰지 않았다. 

이번에 실습을 많이 하면서 덜 헷갈리게 되어서 다행이다.

 

 

4. Reference

 

1. 코딩온 강의 자료

 

2. Do it! HTML+CSS+자바스크립트 웹 표준의 정석

https://product.kyobobook.co.kr/detail/S000001818002

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 | 고경희 - 교보문고

 

 

3.

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

CSS 선택자 - Web 개발 학습하기 | MDN