가상 요소 종류, 반드시 기억해야하는 css 선택자

📌Language/HTML & CSS

가상 요소 종류, 반드시 기억해야하는 css 선택자

hellohailie 2022. 4. 18. 00:10

가상 요소는 가상 클래스와 비슷하다.

가상 요소(pseudo element)

가상 요소는 HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여할 수가 있습니다.

가상 요소도 가상 클래스처럼 문서 내에 보이지 않지만, 미리 정의한 위치에 삽입되도록 약속이 되어있습니다.

선언 방법은 가상 클래스와 같게 콜론을 사용하며,

CSS3부터는 가상 클래스와 가상 요소를 구분하기 위해 가상 요소에는 ::(더블 콜론) 기호를 사용하기로 했습니다.

하지만 하위 브라우저에서 :: 문법을 지원하지 않는 문제가 있으므로 상황에 따라 : 기호를 사용해야 한다.

:before : 가장 앞에 요소를 삽입 / 요소 내에 가장 첫 번째 자식으로 삽입이 되는 것.
:after : 가장 뒤에 요소를 삽입 / 요소 내에서 가장 마지막 자식으로 삽입이 되는 것.
:first-line : 요소의 첫 번째 줄에 있는 텍스트 / 요소의 첫 번째 줄에 있는 텍스트를 감싸는 요소가 삽입이 된다.
:first-letter : 블록 레벨 요소의 첫 번째 문자 / 요소 내에 블록 레벨 요소 중에 그 안에 첫 번째 문자를 감싸는 요소를 생성한다.

모두 가상 요소이기 때문에 HTML 구조에는 나타나지 않는다.

before와 after 가상 요소는 애초에 내용이 없는 상태로 생성되기 때문에 내용을 넣기 위해 content 속성을 이용해야 한다.

<head>
  <title>hi</title>
  <style>
    p:before {
        color: red;
        content:"#####"
    }

    p:after {
        color: yellow;
        content: "!!!!!!!!";
    }
    p:first-line {
        font-size: 3em;
    }

    p:first-letter {
        color: purple;
        text-decoration: underline;
    }
  </style>
</head>
<body>
  <p>
    I haven't been worried to see the dentist since I was younger.But over the last year, I got to know why people are worried to see the dentist.The first dental care was simply to fill the lower two teeth with resin filling when I felt like they hurt.One day about two months after the first dental care, while I was brushing my teeth, I chewed something weird !That was a tiny little resin tooth filling which was filled two months ago.I had to go to the dentist to be treated again and there was no extra charge for that because it has after-sales service for 1 year.But that was just a beginning. After that, I've gone there four times more.I promised myself not to go to THE dentist again.
  </p>
</body>

See the Pen Untitled by HelloHailie (@hellohailie) on CodePen.

👇더 자세한 가상 요소👇

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

반드시 기억해야 하는 CSS 선택자 30개

여러분은 id, class, descendant 기초를 알고 있겠죠. 과연 그게 전부일까요? 그렇다면, 여러분은 폭넓게 적용하지 못하고 있네요. 이 글에서 설명하는 선택자 중에 다수가 CSS3 명세서에 있으며 모던

code.tutsplus.com

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

의사 요소 - CSS: Cascading Style Sheets | MDN

CSS 의사 요소(가상 요소)는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있습니다. 예를 들어 ::first-line (en-US)을 사용하면 문단 첫 줄의 글씨체만 바꿀 수 있습니다.

developer.mozilla.org

저작자표시 비영리 변경금지

'📌Language > HTML & CSS' 카테고리의 다른 글

css 구체성 (0)	2022.04.19
visibility:hidden이랑 display:none의 차이점 (0)	2022.04.18
가상 클래스 (pseudo class) first-child (0)	2022.04.17
CSS 부모와 자식, 조상, 형제 관계 정리 (0)	2022.04.17
CSS 속성 선택자에 대해 공부해보자 (0)	2022.04.17

현재글가상 요소 종류, 반드시 기억해야하는 css 선택자

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Today Hailie Learned