728x90
<title>가상선택자 ::after ::before</title>
가상선택자 after, before 속성에 대해 알아봅시다!
기본적으로 after, befor 속성에다가는
content:"" 속성을 적용해야 합니다 " " <- 안에는 보일 내용이라고 생각하시면 편할 거 같아요
대부분 공란으로 두고 작업을 합니다. content 속성을 빼고 작업하시면 화면에 표시가 안됩니다!
::before
- before 가상선택자는 적용한 선택자 이전에 등장합니다. 해당 선택자에서 첫번째 자식으로 취급이 됩니다.
::after
- after 가상선택자는 적용한 선택자 이후에 등장합니다. 해당선택자에서 마지막번째 자식으로 취급이 됩니다.
이해하기 쉽게 화면으로 표시를 해봅시다!
화면 구성은
<body>
<div class="box1">블록</div>
<p class="box2">블록</p>
<span class="inline1">인라인</span>
</body>
이렇게 하고 가보도록 할게요 : )
div class 네임이 box1인 친구에게 css를 적용해 줍니다
.box1 { width:700px; height:150px; background-color: pink; }
화면상에서 box1은 pink 색상의 박스로 표시가 되어있습니다.
여기에서 after 속성을 적용해 봅시다.
.box1::after {content:""; width:200px; height:5px;
display:block;
margin-top:50px; margin-bottom:50px;
background-color:orange;}
작성은 적용하고자 할 태그 (여기서는 box1). box1::after로 작성해 주시면 됩니다
짠! 가로값이 200px이고 높이값이 5px인 오렌지 컬러의 선이 생겼습니다!
그럼 바로 ::before 값도 적용해 볼까요?
css는 이렇게 작성해 봅시다
.box1::before {content:""; width:100px; height:2px;
display: block;
background-color:aqua;}
가로값이 100px이고 높이값이 2px인 아쿠아색상의 선이 생겼습니다!
기본적인 after, befor속성 설명은 이걸로 마치겠습니다 :)
'HTML , CSS' 카테고리의 다른 글
| 08 - transition 속성 (0) | 2023.07.03 |
|---|---|
| 07 - 태그 모양을 변화시켜보자. transform 속성 (0) | 2023.06.28 |
| 05- background 속성 (0) | 2023.06.27 |
| 04 - 가상선택자 ? (0) | 2023.06.27 |
| 03 - flex 속성 (0) | 2023.06.27 |