● ::before : content영역 앞에 표시할 스타일
● ::after : content영역 뒤에 표시할 스타일
글씨 앞의 작은 박스 안에 그림을 넣기 위해 ::before 태그를 사용하여 사진의 주소를 받아 url로 지정해줬다.
또한, 글씨 뒤에 아이콘을 넣어주기 위해 ::after태그를 사용하여 지정해줬다.
<실행화면>
출처 : 강아지사진(https://img.freepik.com/premium-photo/picture-of-a-cute-puppy-world-animal-day_944128-5890.jpg)
'IT수업 > HTML+CSS' 카테고리의 다른 글
| it 수업 3주차 (33) selector 자식요소 (0) | 2024.01.10 |
|---|---|
| it 수업 3주차 (32) menu after (0) | 2024.01.10 |
| it 수업 3주차 (30) 의사선택자 (0) | 2024.01.10 |
| it 수업 3주차 (29) 체크박스 (0) | 2024.01.10 |
| it 수업 3주차 (28) 동위선택자 (0) | 2024.01.10 |