본문 바로가기
LEARN/HTML | CSS

[부스트코스] 4-2 CSS 이해하기

by 아이엠제니 2022. 3. 16.

 

 

 

4. CSS 이해하기

7) 가상 선택자 1

  • 가상 클래스(pseudo class)
  • 가상 요소(pseudo element)

 

가상 클래스

미리 정의해놓은 상황에 적용이 되도록 약속되어있는 보이지 않는 클래스

:pseudo=class {
  property: value;
}

 

문서 구조와 관련된 가상 클래스

  • :first-child: 첫 번째 자식 요소 선택
  • :last-child: 마지막 자식 요소 선택

 

li:first-child { color: red; }
li:last-child { color: blue; }

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      li:first-child {
        color: red;
      }
      li:last-child {
        color: blue;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JS</li>
    </ul>
  </body>
</html>

 

링크 관련된 가상 클래스

  • :link: 하이퍼링크이면서 아직 방문하지 않은 앵커
  • :visited: 이미 방문한 하이퍼링크를 의미

 

a:link { color: blue; }
a:visited { color: gray; }

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      a:link {
        color: blue;
      }
      a:visited {
        color: gray;
      }
    </style>
  </head>
  <body>
    <a href="http://www.naver.com">네이버</a>
    <a href="http://google.com">구글</a>
    <a href="http://daum.net">다음</a>
  </body>
</html>

 

사용자 동작 관련 가상 클래스

  • :focus: 현재 입력 포커스를 갖고 있는 요소에 적용
  • :hover: 마우스 포인터가 위치해 있는 요소에 적용
  • :active: 사용자 입력에 의해 활성화된 요소에 적용
a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      a:focus {
        background-color: yellow;
      }
      a:hover {
        font-weight: bold;
      }
      a:active {
        color: red;
      }
    </style>
  </head>
  <body>
    <a href="http://www.naver.com">네이버</a>
    <a href="http://google.com">구글</a>
    <a href="http://daum.net">다음</a>
  </body>
</html>

네이버 위에 마우스를 올리면, bold

초점이 맞춰져 있고, 사용자에 의해 사용되어질?

요소에 빨간 글씨와 노란 배경이 나타나짐.

 

reference
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes

 

 

 

8) 가상 선택자 2

가상 요소

미리 정의해놓은 위치에 삽입이 되도록 약속되어있는 보이지 않는 요소

  • :before: 가장 앞에 요소를 삽입
  • :after: 가장 뒤에 요소를 삽입
  • :first-line: 요소의 첫 번째 줄에 있는 텍스트
  • first-letter: 블록 레벨 요소의 첫 번째 문자

 

:befor :after

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      p:before {
        color: red;
        content: "before 가상 요소를 활용한 내용";
      }
      p:after {
        color: blue;
        content: "after 가상 요소를 활용한 내용";
      }
    </style>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam ad soluta
      autem ratione, fugiat assumenda aliquid animi facilis eveniet explicabo
      distinctio ipsa cum, quas in blanditiis dignissimos magni. Labore,
      corporis.
    </p>
  </body>
</html>

 

:first-line :first-letter

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      p:first-line {
        color: violet;
      }
      p:first-letter {
        color: green;
      }
    </style>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam ad soluta
      autem ratione, fugiat assumenda aliquid animi facilis eveniet explicabo
      distinctio ipsa cum, quas in blanditiis dignissimos magni. Labore,
      corporis.
    </p>
  </body>
</html>

 

reference
https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048

 

 

 

9) 구체성 (명시도)

어떤 스타일이 적용 되는 것인가?

h1 { color: red;}
body h1 { color: green; }

h2.grape { color: purple; }
h2 { color: silver; }
  • 구체성은 선택자를 얼마나 명시적으로 선언했느냐는 수치화 한 것

 

0,0,0,0

좌측의 값부터 비교

좌측 부분의 숫자가 클수록 높은 구체성을 가짐

  • 0,1,0,0: 선택자에 있는 모든 id 속성값
  • 0,0,1,0: 선택자에 있는 모든 class 속성값, 기타 속성,  가상 클래스
  • 0,0,0,1: 선택자에 있는 모든 요소, 가상 요소
  • 전체 선택자는 0,0,0,0,을 갖음
  • 조합자는 구체성에 영향을 주지 않음

 

h1 {...} - 0,0,0,1
body h1 {...} - 0,0,0,2
.grape {...} - 0,0,1,0
*.bright {...} - 0,0,1,0
p.bright em.dark - 0,0,2,2
#page {...} - 0,1,0,0
div#page {...} - 0,1,0,1

 

인라인 스타일

/* css */
p#page { color:red; } - 0,1,0,1
<!-- html -->
<p id="page" style="color:blue">Lorem ipsum dolor sit.</p>
  • 이때는 blue로 나온다
  • 인라인 스타일은 1,0,0,0 <= 제일 높은 구체성을 가지고 있음

 

!IMPORTANT

/* CSS */
p#page { color: red !important; }
<!-- html -->
<p id="page" style="color: blue"> Lorem ipsum dolor sit. </p>
  • red로 나온다
  • !important는 구체성을 모두 무시하고 우선권을 갖는다.

 

 

10) 상속

<!-- css -->
h1 { color: gray }

<!-- html -->
<h1> Hello, <em>CSS</em></h1>

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      h1 {
        color: gray;
      }
    </style>
  </head>
  <body>
    <h1>Hello, <em>CSS</em></h1>
  </body>
</html>

  • 박스 모델 관련 속성들은 상속되지 않는다. 
    • margin, padding, background, border

 

상속된 값의 구체성은?

<!-- css -->
* {color: red; } - 0,0,0,0
h1#page { color: gray; } - 0,1,0,1

<!-- html -->
<h1 id="page"> Hello, <em>CSS</em></h1>

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      * {
        color: red;
      }
      h1#page {
        color: gray;
      }
    </style>
  </head>
  <body>
    <h1 id="page">Hello, <em>CSS</em></h1>
  </body>
</html>

  • em 요소는 회색으로 나타날까?
    • 상속된 값은 아무런 구체성을 가지지 않으며, 심지어 0,0,0,0도 아니다.

 

 

 

11) 캐스케이딩

  • 스타일 규칙들이 어떠한 기준으로 요소에 적용되는지를 정한 규칙
  • 폭포가 내려오는 모양처럼 단계적인이라는 의미를 지니며, 모든 스타일 규칙들은 cascading의 단계적인 규칙에 따라 요소에 적용됨

 

구체성이 같은 두 규칙이 동일한 요소에 적용된다면?

/* css */
h1 { color: red; }
h1 { color: blue; }

 

캐스케이드 규칙

  1. 중요도(!important) & 출처
  2. 구체성
  3. 선언순서

 

중요도 & 출처

  • 기본적으로 !important로 선언된 모든 규칙은 그렇지 않은 규칙보다 우선함
  • 출처는 제작자, 사용자, 사용자 에이전트(User Agent)로 구분함
  • 우선순위
    • 5. 사용자 에이전트 스타일
    • 4. 사용자 스타일
    • 3. 제작자 스타일
    • 2. 제작자 !important 스타일
    • 1. 사용자 !important 스타일

 

구체성

<!-- css -->
p#bright { color: silver; }

<!-- html -->
<p id="bright"> Hello, CSS </p>
  • silver

 

선언 순서

p { color: silver; }
p { color: red; }
  • 나중에 선언된 게 더 우선하게 됨
  • red

 

 

 

12) 선택자 정리

reference
https://www.w3schools.com/cssref/css_selectors.asp

 

 

 

 

 

 

부스트코스 [비전공자를 위한 HTML/CSS] 강의 공부 기록

 

 

 

300x250

'LEARN > HTML | CSS' 카테고리의 다른 글

[부스트코스] 5-2 CSS 단위, 배경, 박스모델  (0) 2022.03.18
[부스트코스] 5-1 CSS 단위, 배경, 박스모델  (0) 2022.03.17
[부스트코스] 4-1 CSS 이해하기  (0) 2022.03.15
[부스트코스] 3 HTML 콘텐츠모델, 시멘틱마크업, 블록  (0) 2022.03.14
[부스트코스] 2-2 HTML 태그  (0) 2022.03.13

관련글

티스토리툴바