[포스코x코딩온] 웹개발자 입문 과정 1주차 회고-12 | CSS 선택자

1. CSS 작성법:

  선택자 { 프로퍼티 : 값;}을 순서로 작성한다.

p { color: red;}

  ● 선택자:

   - CSS는 HTML요소의 style을 정의해야 하므로 스타일을 적용하고자 하는  HTML 요소를 선택할 수 있어야 한다.

   - 선택자는 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CSS에서 제공하는 수단이다.

   - 선택자로 HTML 요소를 선택하고 {} 내에 속성 값을 지정하여 다양한 style을 정의 가능하다.

   - 여러개의 프로퍼티를 연속해서 지정할 수 있으며 '세미콜론(;)'으로 구분 한다.

p { color: red; padding: 5px;}

  ● 속성:

   - 속성(ex, color, padding)은 표준 스펙으로 이미 지정되어 있는 것을 사용하기때문에 사용자가 임의로 정의할 수 없다.

 

  ● 값: 

   - 값(ex. red, 5px)은 해당 속성에 사용할 수 있는 값을 키워드 나 크기 단위 또는 색상 단위 등의 특정 단위로 지정한다.

 

 

2. CSS 선택자:

 CSS 선택자에는 1) 기본 선택자 2) 복합 선택자 3) 가상 클래스 선택자 4) 가상 요소 선택자 5) 속성 선택자가 있다.

각각에 대해서 알아보도록 하자.

 

  1) 기본 선택자:

   기본 선택자는 별도의 테크닉 없이 순수하게 무언가를 호출할 때 사용한다.

   종류에는 전체 선택자, 태그 선택자, Class 선택자, ID 선택자가 있다.

    ●  전체 선택자: 모든 요소를 선택

* { color: red;}

    ●  태그 선택자: 태그 이름이 동일한 요소들을 선택

li { color: red;}

    ●  Class 선택자: class의 이름이 동일한 요소들을 선택

.orange { color: red;}

    ●  ID 선택자: id의 속성 값이 동일한 요소들을 선택

#orange{ color: red;}

 

  2) 복합 선택자: 

   특수한 요소를 호출하고 싶을 때, 기본 선택자로는 선택이 불가능한 경우에 사용된다.

   종류에는 일치 선택자. 자식 선택자, 후손 선택자, 인접형제 선택자, 일반 형제 선택자가 있다.

 

   예를 들어 이런 HTML이 존재한다고 할 때 

 

<div>
	<ul>
		<li class="orange">오렌지1</li>
		<li>사과</li>
		<li>딸기</li>
	</ul>
	<div>당근</div>
	<p>토마토</p>
	<span class="orange">오렌지2</span>
</div>

    ●  일치 선택자: (붙여쓰기) 선택자와 특정 태그 속성을 동시에 만족하는 요소를 선택 -  '오렌지 2' 선택 코드

span.orange { color: red;}

    ●  자식 선택자: (>) 선택자의 자식요소 선택 -  '오렌지 1' 선택 코드

ul > .orange { color: red;}

    ●  후손 선택자: (띄어쓰기) 선택자의 하위 요소 선택 -  '오렌지 1,2' 선택 코드

div .orange{ color: red;}

    ●  인접형제 선택자: (+)선택자의 다음 형제 요소 '하나'를 선택 -  '사과' 선택 코드

.orange + li { color: red;}

    ●  일반 형제 선택자: (~)선택자의 다음 형제 요소를 '모두' 선택 - '사과','딸기' 선택 코드

. orange ~ li { color: red;}

 

  3) 가상 클래스 선택자: 

   - 사용자 행동에 따라 변화하는 '가상 상황'에 따라서 요소 선택 시 사용한다.

   - 각 '요소의 상황'에 따라 사용자가 원하는 요소를 선택할 때 사용한다.

   - '특정 요소를 부정'할 때 사용한다.

 

   A. 사용자 행동에 따라 변화하는(가상상황) 선택자: 

      ● hover: 선택자에 마우스 커서가 올라가 있는 동안 선택

a:hover {color: red;}

      ● active: 선택자에 마우스 클릭을 하고 있는 동안 선택

a:active {color: red;}

      ● focus: 선택자에 포커스되면 선택

input:focus {background-color: red;}

   B. 요소의 상황에 따른 선택자: 

    예를 들어 이런 HTML이 존재한다고 할 때 

<div class="fruits">
    <span>딸기</span>
    <span>수박</span>
    <div>오렌지</div>
    <p>망고</p>
    <h3>사과</H3>
</div>

      ● first-child: 선택자가 형제 요소 중 첫째라면 선택  -  '딸기' 선택 코드

.fruits span:first-child {color: red;}

      (*주의*) 만약  fruits div:first-child {color: red;} 를 사용해서 오렌지를 선택하고자 하여도 div가 fruits의 첫번째 자식이

                   아니라서 사용이 불가하다.

 

      ● last-child: 선택자가 형제 요소 중 막내라면 선택 -  '사과' 선택 코드

.fruits h3:last-child{color: red;}

      ● nth-child:  선택자가 형제 요소 중 n째라면 선택 -  '수박' 선택 코드

.fruits *:nth-child(2): {color: red;}

 

   C. 부정 선택자: 

      - not: 선택자가 아닌 요소 선택- '오렌지','망고', '사과' 선택 코드

.fruits *:not(span){color: red;}

  4) 가상 요소 선택자: 

   - 선택된 요소의 앞, 뒤에 별도로 content를 삽입하는 선택자이다.

   - 반드시 content라는 속성을 사용한다.

   - 빈값이라도 넣어주어야 적용이 된다.

   - 실제로 의미없는 HTML 태그를 만들지 않고 요소 삽입이 가능하여 자주 사용된다.

   - 예를 들어 쇼핑몰 페이지에 메뉴에 Hot, 추천 등을 넣기 위해 별도의 태그를 넣기보다는

     가상요소 선택자를 활용하여 처리하면 편리하다. 

    ●  before: 요소의 앞에 내용(content)을 삽입한다.

.box::before{ content: "앞";}

    ●  after: 요소의 뒤에 내용(content)을 삽입한다.

.box::after{ content : "뒤"}

 

  5) 속성 선택자:

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

    ●  특정 속성만 지정하는 선택자:([속성]) 속성을 포함한 요소를 선택

#html
<input type="text" value="ABCD" disabled>
#css
[disabled] { color: red;}

    ●  속성과 속성의 값을 지정하는 선택자:([속성="값"]) 속성을 포함하고 특정 값을 포함한 요소를 선택

 

#html
<input type="text" value="ABCD" disabled>
#css
[type="text"]{color: red;}

 

 

css의 다양한 선택자에 대해서 배울 수 있었다.

복합 선택자와 가상 클래스 선택자의 상황에 따른 선택자가 개인적으로 헷갈려서 

많은 연습이 필요할 것 같다.