before와 after는 css3의 가상요소이다.
- content를 꼭 사용해야한다..!
::before / ::after 는 선택한 요소 앞, 혹은 위에 가상 콘텐츠를 삽입한다.
아래 사진은 spring_season_blend_page 클래스의 앞과 뒤에 가상 콘텐츠로 꽃 배경을 넣어 주었다.
여기서 content는 before와 after를 사용할 때 꼭 사용하는 속성이다!
HTML에는 존재하지 않고 css에서만 존재하는 가상 콘텐츠이기 때문에 자바스크립트로 제어하기 어렵다.
content: ""; 를 안써주면 추가가 되지않는다..!
background로 이미지를 주고 width값과 height를 주어야 이미지가 제대로 나온다..!
+ 수정..!!!!!
위에 처럼해도 잘 나오는데
background 속성을 사용하지말고 content에다 이미지를 직접 넣으면 width와 height를 안써줘도 이쁘게 잘 나온다..!
처음에 했던 것 처럼 background속성을 사용하면 가로 세로 값을 구해야 하고 사진도 반복이 되어서 no-repeat해줬는데ㅎㅎ
이 방법으로 하는게 훨씬 좋을 듯 하다!!
'CSS' 카테고리의 다른 글
| Flex VS Grid (0) | 2022.10.13 |
|---|---|
| [ css ] background - position과 size (0) | 2022.04.16 |
| [CSS] alignment - position과 transform으로 가운데 정렬 (0) | 2022.02.22 |
| [CSS] alignment - 가운데 정렬 하기 (0) | 2022.02.22 |
| background (0) | 2022.02.22 |
