
[CSS] ::before 와 ::after 알아보기(:first-child,:last-child)
·
개발💻/CSS
오늘은 ::before 와 ::after에 대해 알아보겠다 before는 한글 번역이 잘 안돼서 이렇게 가져왔다 쨌든 before는 after는 말 그대로 어떤 요소 앞뒤에 content를 추가한다고 생각하면 되겠다 아주 간단한 예를 들어보겠다 첫번째 두번째 세번째 이렇게 코드를 작성하였고 지금은 이러한 모습이다 여기서 글자앞에는 🤜 이 이모티콘을 넣고 글자 뒤에는 🤛이 이모티콘을 넣는다고 해보자 물론 그냥 div태그마다 글자를 추가하는 🤜첫번째🤛 이런 식으로 넣어주는 방법도 있다 근데 만약 저 박스가 엄청 많고 하나하나 다 넣어줘야 한다면?? (물론 option+ ⌘+ F 로 바꿀 수야 있지만 쨌든) 이걸 해결할 수 있는 방법이 ::before 와 ::after를 활용하는 방법이다! .wrap div:..