[CSS Selector] ::after ::before 가상요소 선택하기

728x90

CSS 선택자는 다양한 방법이 있다. 그러한 종류들은아래 링크에서 볼 수 있다.

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

CSS Selectors Reference

CSS Selector Reference CSS Selectors In CSS, selectors are patterns used to select the element(s) you want to style. Use our CSS Selector Tester to demonstrate the different selectors. Selector Example Example description .class .intro Selects all elements

www.w3schools.com

그 중에서 특히 남의 사이트를 분석해보면 자주 나오는 선택자 중 하나인 ::after와 ::before

맨처음엔 이게 대체 무슨 선택자인가 싶었다. A > B나 A.B A B같은 선택자는 감으로라도 알았는데 ::after와 ::before는 감도 못잡겠었다.

::before, ::after은 가상요소를 선택해서 스타일을 줄 때 사용되는 선택자이다.

::before	내용 앞에 생성되는 내부 엘리먼트
::after	내용 뒤에 생성되는 내부 엘리먼트

가상요소를 생성하려면 content라는 속성이 꼭 포함되어야 하는데, 예시를 한번 짜보겠다.(내용이 없을 시 content:"";로 비워둔다)

<style type="text/css">
        #cont{
            font-size:50px; text-align: center;
        }
    
        #cont::before{
            content:"before";
            margin:30px;
            color:blue
        }
        #cont::after{
            content:"after";
            margin:30px;
            color:red;
        }
    </style>
</head>
<body>
 <p id ="cont">cont</p>
    
</body>

이렇게 cont의 앞에 before가, 뒤에 after가 생긴다.

이 기능은 이런식으로 웹폰트 형식의 아이콘을 불러와서 버튼에 글자와 아이콘을 적용시킬 때 쓸 수 있다.

또한! ★★★★★★중요★★★★★

::after을 이용한 clearfix로 float을 쓴 후 형제 엘리먼트가 있을 때 틀어지는 현상을 방지 할 수 있다.

div::after{content:"";display:block;clear:both;}

이런식으로 주는데 주의할 점은 float이 적용된 태그의 부모태그에게 줘야한다는것이다.

하지만 나는 업무시 width, height에 overflow:hidden 을 주는 방법을 주로 사용하긴 한다.

::after, ::before 선택자는 다른 웹페이지 코드들을 보면 알 수 있듯이 정말 많이 쓰이는 선택자이니 최대한 활용해서 코드를 짜보자.

이것만 활용하면 각자의 개체를 가진 div 3개를 쓰는게 아닌 하나의 div만으로 3가지 효과를 주는 객체들을 position:absolute로 겹쳐서 쓸 수 있다. html 코드는 최대한 간결하면 간결할 수록 좋다. 최소한의 필요한 정보만을 전달하는것이 html이다. 디자인요소는 최대한 css에서 하자.

728x90

'CSS' 카테고리의 다른 글

반응형 웹 디자인의 9가지 기본 원칙 (0)	2020.11.02
[CSS] 반응형 박스설정을 위한 display : flex (0)	2020.08.10
[CSS] 반응형을 위한 미디어 쿼리(media query) (0)	2020.08.07
[CSS] Animation 동작효과 주기 (0)	2020.08.06
[CSS Selector] ::first-letter(첫글자 선택) ::first-line(첫 줄 선택) (0)	2020.08.06