[4] CSS 선택자 - 기본 선택자, 복합 선택자, 가상 클래스 선택자 , 가상 요소 선택자, 속성 선택자

minjeong·2023년 12월 29일
CSShtml가상요소클래스가상클래스선택자기본선택자복합선택자부트캠프선택자속성선택자코딩교육코딩온포스코프론트엔드
0

코딩온x포스코 - 나의 공부기록

목록 보기
6/55
post-thumbnail

참고 : 모든 주석처리의 단축키는
window : control + /
mac : command + / 누르면 적용된다.

1️⃣ 기본 선택자

css하려면 선택자가 필수적이다

(1) 전체 선택자

  • 모든 요소를 선택한다.

예시 코드

/* style은 <head>안에 써야한다!*/
<style>
*{
	 color : red;
}
</style>

<body>
  <div>
    <ul>
      <li>사과</li>
      <li>딸기</li>
      <li>오렌지</li>
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span>오렌지</span>
  </div>
  • 모든 글씨의 색상이 red로 변경된다.
  • css 파일에서 앞에 선택자가 *이면 전체 모든 요소의 색상을 red로 바꿔주는 것이다.
  • 보통 폰트 정의할 때 사용된다.
  • 전체 선택자 보다 다른 선택자들이 더 우선된다!
  • 전체 선택자 < 태그 선택자 < 클래스 선택자 < 아이디 선택자

(2) 클래스 선택자

  • HTML class 속성의 값이 ABC인 요소를 선택한다.

예시 코드

/* class 선택자는 css에서 온점(.)하고 시작한다 */
<style>
    .orange{
      color : orange;
    }
    .bgcolor{
      background-color: aqua;
    }
</style>

<body>
  <div>
    <ul>
      <li>사과</li>
      <li>딸기</li>
      <li class = "orange">오렌지</li>
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <!-- class가 중복해서 들어갈 수 있음 -->
    <span class = "orange bgcolor">오렌지</span>
  </div>

실행결과

  • 다른건 무시하고 오렌지의 글씨를 집중해서 보면 <span>태그의 class를 중복해서 넣었더니 배경색이 생긴 것을 확인할 수 있다.
  • 같은 이름을 가진 class들은 동일하게 적용된다. -> 폰트 색상은 오렌지
  • 여러개 중복해서 쓸 수 있다.

3) 태그 선택자

  • 태그 이름이 ABC인 요소 선택한다.

예시 코드

<style>
li{
	 color : red;
}
</style>
<body>
  <div>
    <ul>
      <li>사과</li>
      <li>딸기</li>
      <li>오렌지</li>
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span>오렌지</span>
  </div>
  • 예시코드에서 css에서 작성한 태그 <li>에 속하는 요소들이 모두 변경된다.

(4) 아이디 선택자

  • HTML id 속성의 값이 ABC인 요소 선택한다.

예시 코드

/* id 선택자는 css에서 # 하고 시작한다 */
<style>
    #orange{
      color : orange;
    }
</style>

<body>
  <div>
    <ul>
      <li>사과</li>
      <li>딸기</li>
      <!--이때 orange라는 값은 같지만 의미하는 아예 다르다 -->
      <li id = "orange" class = "orange">오렌지</li>
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span class = "orange">오렌지</span>
  </div>
  • id 속성과 class 속성은 다르다.
  • id, class 값이 같아도 의미하는 바는 다르다.
  • 딱 한번, 하나만 쓸 수 있어서 css에서 만들고 html에서도 한번만 쓰일 수 있다.
    그렇지 않으면 에러난다.

기본 선택자 실습코드

예시 코드

<!--연습코드-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!--css하는 부분-->
  <style>
    /* * 표시 : 전체선택자 */
    * {
      color : red;
    }
    /* 태그 선택자 
  만약 <div>를 태그 선택자로 두면 모든 글씨가 다 빨간색으로 변할 것. 왜냐면 부모가 그 속성을 가지고 가게 되니까 자식도 가져가게 되는 것
  여기선 <div>가 최상단에 있으니까 자식들이 다 물려가는 것--> */
    li{
      color : green;
    }
    /* 클래스 선택자 : 같은 이름을 가진 class들은 동일하게 적용된다. 밑에가 21행 */
    .orange{
      color : orange;
    }
    /* 밑에가 24행 */
    .bgcolor{
      background-color: aqua;
      color : black;
    }
    /* id선택자  */
    #orange{
      /* font-size : 글씨 크기 변경 */
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div>
    <ul>
      <li>사과</li>
      <li>딸기</li>
      <!-- id 속성의 orange와 class 속성의 orange는 아예 다른 것 -->
      <li id = "orange" class = "orange">오렌지</li>
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <!-- class가 중복해서 들어갈 수 있음 -->
    <!--class는 뒤에 있는게 적용된다
    그래서 21행에서 폰트를 오렌지로 했지만 24행에서 블랙으로(뒷순위) 했기 때문에 폰트가 블랙으로 적용된다.-->
    <span class = "orange bgcolor">오렌지</span>
  </div>
  
</body>
</html>

실행 결과

  • class는 뒤에 있는게 적용된다.
  • 그래서 21행에서 폰트를 오렌지로 했지만 24행에서 블랙으로(뒷순위) 했기 때문에 폰트가 블랙으로 적용된다.

2️⃣ 복합 선택자

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

(1) 일치 선택자

  • 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택한다.

  • <span> 태그에 있는 클래스 or 아이디를 선택하겠다는 의미이다.

(2) 자식 선택자

  • 선택자 ABC의 자식 요소 XYZ 선택한다.
  • <ul> 에 있는 모든 자식요소 중에 해당되는 <list>를 선택해서 쓴다.(해당 class 이름을 쓰면된다.
  • 바로 아래 있는 것만 적용된다.

(3) 하위 선택자

  • 선택자 ABC의 모든 하위요소 XYZ 선택한다.

  • 띄어쓰기가 선택자의 기호이다.

  • 자식 뿐만 아니라 자손까지. 계층으로도 쭈욱 내려가서 해당되는거 다 적용된다.

(4) 인접 형제 선택자

  • 선택자 ABC의 순서상 다음 형제 요소 XYZ 하나를선택한다.

  • 사용빈도는 굉장히 적다.

(5) 일반 형제 선택자

  • 선택자 ABC의 순서상 다음 형제 요소 XYZ 모두 선택한다.

복합 선택자 실습 코드

실습조건
• 야생의 사자만 선택, 배경을 빨간색
• 사파리 안의 사자만 선택- 배경을 greenyellow
• 호랑이만 선택, 배경을 노란색
• 사자를 전부 선택, 글자를 sienna 색
• 동물원 안의 사자만 선택, 폰트를 두껍게
• 호랑이 뒤에 있는 팬더를 선택, 배경을 하늘색(skyblue)
• 사파리 사자 뒤에 있는 사육사를 모두 선택, 배경을 오렌지색

p.lion{
  background-color: red;
}
ul > .lion{
  background-color: greenyellow;
}

#tiger{
  background-color: yellow;
}
.lion{
  color: sienna;
}
ul > .lion{
  /* font-weight : 글씨 굵기 조절 */
  font-weight: bold;
}
/* ul > .lion == .zoo .lion 해도 동일한 결과 나온다. */
#tiger + li{
  background-color: skyblue;
}
li.lion ~ li {
  background-color: orange;
}


<!--Combinator Selectors(복합연산자) 실습-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel = "stylesheet" href="index.css" />
  <title>Document</title>
</head>
<body>
  <h1>복합선택자 사용 연습</h1>
  <p>동물원에 왔어요</p>
  <div class = "zoo">
    <ul>
      <span>여긴 사파리!</span>
      <li>곰</li>
      <li id = "tiger">호랑이</li>
      <li>팬더</li>
      <span class = "lion">사자1</span>
      <li class = "lion">사자2</li>
      <li>사육사 sarah</li>
      <li>사육사 세령</li>
    </ul>
    <span class = "lion">사파리 밖의 사자</span>
  </div>
  <p class = "lion">야생의 사자</p>
</body>
</html>

실행 결과

3️⃣ 가상 클래스 선택자

  • 사용자의 행동에 따라 변화하는 가상 상황에 따라서 요소 선택 시 각 요소의 상황에 따라 사용자가 원하는 요소를 선택할 때 사용한다.
  • 특정 요소를 부정할 때도 사용된다.

(1) ABC:hover

  • 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택된다.

(2) ABC:active

  • 선택자 ABC 요소에 마우스 커서가 클릭하고 있는 동안 선택된다.
  • 마우스로 클릭하게 되면 순간 적용된다.

(3) ABC:focus

  • 선택자 ABC 요소가 포커스되면 선택된다.

  • input 창을 클릭하는 순간 적용된다.

➡️ 1,2,3번은 사용자의 행동에 따라 변화하는 선택자이다.

예시코드

/* 마우스 커서가 올라가있는 동안 색이 변함 */
a:hover{
  color:red;
   /* cursor : 마우스 모양을 바꿀 때 사용한다. */
  cursor: pointer;
}
/* 마우스 커서로 클릭하면 순간 색이 변하고 링크가 이동된다. */
a:active{
  color: yellow;
}
/* 마우스커서로 클릭하는 순간 색이 변함, 
커서가 있는 순간을 포커스가 잡혔다고 함 */
input:focus{
  background-color: orange;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel = "stylesheet" href="index2.css" />
  <title>가상 클래스 선택자_1 연습</title>
</head>
<body>
  <div>
    <a href="https://www.naver.com/" >링크이동</a>
  </div>
  <div>
    <input type = "text" placeholder="포커스" />
  </div>
  
</body>
</html>

실행결과

  • 마우스 커서를 '링크이동'에 놓으면 색이 빨간색으로 변한다.
  • input 창도 클릭하면 배경색이 변하게 된다.
  • '링크이동'을 누르면 노란색으로 변하고 네이버로 이동하게 된다.

(4) ABC:first-child

  • 선택자 ABC가 형제 요소 중 첫째라면 선택한다.

  • 맞는 class에 해당하는 태그의 첫번째에 해당하는 거에 적용하라는 의미이다.

(5) ABC:last-child

  • 선택자 ABC가 형제 요소 중 막내라면 선택한다.
  • <h3>에 있는 것 중 가장 마지막에 있는 요소에 적용한다는 의미이다.

(6) ABC:nth-child(n)

  • 선택자 ABC가 형제 요소 중 (n)째라면 선택한다.
  • 그림의 예시를 보면 fruits이라는 클래스에 2번째에 있는 요소를 선택하라는 의미이다.

  • 짝수만 선택하려면 2n, 홀수만 선택하려면 2n+1 (n은 0부터 시작)

(7) ABC:not(XYZ)

  • 부정 선택자로, 선택자 XYZ가 아닌 ABC 요소 선택한다.
  • 현업에선 거의 쓸일 없다.

가상 클래스 선택자 실습문제

줄무늬 모양 만들기

실행 결과

실습 코드

.stripes :nth-child(2n){
  color : black;
  background-color: yellow;
}
.stripes :nth-child(2n+1){
  color : white;
  background-color: navy;
}

<!-- 줄무늬 모양 만들기 실습! -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>줄무늬 모양 만들기</title>
  <link rel="stylesheet" href="css_prac_4.css">
</head>
<body>
  <div class = "stripes">
    <div>navy</div>
    <div>yellow</div>
    <div>navy</div>
    <div>yellow</div>
    <div>navy</div>
    <div>yellow</div>
    <div>navy</nav></div>
    <div>yellow</div>
    <div>navy</div>
    <div>yellow</div>
  </div>
  
</body>
</html>

4️⃣ 가상 요소 선택자

  • 선택 된 요소의 앞, 뒤에 별도의 content를 삽입하는 선택자
  • 반드시! content라는 속성을 사용해야한다.
  • 빈 값("")이라도 넣어줘야 적용이 된다.
  • 실제로 의미 없는 HTML 태그를 만들지 않고 요소 삽입이 가능하여 자주 사용된다!
    EX) 쇼핑몰 페이지에 메뉴에 Hot, 추천 등을 넣기 위해 별도의 태그를 삽입 하는 것이 아니라 가상 요소 선택자를 활용하여 처리하면 편리함!

(1) ABC::before

  • 선택자 ABC 요소의 내부 앞에 내용을 삽입한다.

(2) ABC::after

  • 선택자 ABC 요소의 내부 뒤에 내용을 삽입한다.

5️⃣ 속성 선택자

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

(1) [ABC]

  • 속성 ABC를 포함한 요소를 선택한다.

(2) [ABC = "XYZ"]

  • 속성 ABC가 포함하고 있는 값인 XYZ인 요소를 선택한다.

예시 코드

<!-- 속성 선택자 실습 -->
<!-- 조건 
• Disabled 속성을 가진 태그 선택 à배경 빨간색
• placeholder 속성이 “이름” 값을 가 지는 태그 선택à배경 오렌지
• placeholder 속성을 가지지 않는 태그 선택à배경 파란색 -->
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>속성 선택자 실습</title>
  <style>
    [disabled]{
      background-color: red;
    }
    [placeholder = "이름"]{
      background-color: orange;
      
    }
    /* placeholder나 type은 속성이니까 []로 해야하는 것. */
    [type]:not([placeholder]){
      background-color: blue;
    }
    /* 위아래 코드가 동일하게 속성이 placeholder가 아닌 태그만 선택함 */
    input:not([placeholder]){
      background-color: blue;
    }
  </style>
</head>
<body>
  <input type="text" placeholder="이름" /><br />
  <input type="password" value="pw" /><br />
  <input type="text" value = "000-0000-0000" /><br />
  <input type="text" placeholder="핸드폰" /><br />
  <input type="text" placeholder = "주민번호" disabled />
  
</body>
</html>

실행 결과

마무리

오늘은 뭔가 양이 많다.. 실습 코드도 많고 배운 이론도 많으니 잘 정리해서 내껄로 만들어야겠다!
css 실력을 향상시키려면 하나의 웹사이트를 그대로 만들어보는 연습을 하면 된다고 한다. 차근차근 스택을 쌓아나가보자!

profile
minjeong
중요한 건 꺾여도 다시 일어서는 마음
이전 포스트

[3-1] [CSS 참조방식] 참조방식끼리 겹치게 되면?! 인라인방식, 내장방식, 링크방식

다음 포스트

[5] CSS의 속성 - font, 박스모델(inline, block요소), 문자, margin, padding

0개의 댓글