선생님 강의를 다 듣고 한번 이미지를 목록 디자인에 넣어볼려고 시도를 해봤는데, 이미지 크기가 너무 커서 조절을 해볼려고 했습니다.
근데, 이미지 크기를 해볼려고 하다가 막혀서 여기저기 찾아봤는데 비슷한 구문인거 같은데 왜 안되는지를 몰라서 궁금한 마음에 질문드립니다.
클래스 menu로 설정한 경우 before 쪽하고 따로 들어가는거진...
<img src="https://cdn.inflearn.com/public/files/posts/9e7c1018-98f2-4df2-974f-cf755a525695/1.PNG" title="1.PNG" width="528" height="262" alt="" />
실패한 css - 배경이미지로 들어가버림
<img src="https://cdn.inflearn.com/public/files/posts/500998b3-8357-4144-a04e-364aeb623391/캡처.PNG" title="캡처.PNG" width="517" height="468" alt="" />
성공한 css
<img src="https://cdn.inflearn.com/public/files/posts/59503fe1-deee-4f3f-82b8-70b192f32505/2.PNG" title="2.PNG" width="57" height="91" alt="" />
의도한 이미지

.menu li:before에 이미지를 넣는 방법은 배경이미지로 넣는 방법 밖에 없습니다.
img 형태로는 들어가지 않습니다.
지금처럼 배경이미지로 들어간게 맞습니다.
참고로... 웹디자인기능사 실기시험에서 :before :after 이런 가상클래스를 사용하실 일은 전혀 없습니다.
시험관련으로는 오히려 혼돈만 주니까 아~ 이런게 있구나 정도로만 이해하고 넘어가시고, 실기시험 관련에 나오는 것들에 집중하시는게 좋습니다.

인프런 커뮤니티 질문&답변

CSS 목록 스타일 이미지 크기 조정