[CSS] 가상요소 ::after, ::before에서 사용한 svg에 대하여 width, height를 통한 크기 조정이 안되는 원인

가상요소 ::after, ::before에서 사용한 svg에 대하여 크기 조정이 되지 않아 사용했던 방법이 'background'를 활용하는 것이었다.

 

(포스팅한 링크 참고)

• [CSS] 가상요소 ::after ::before와 svg를 이용하여 요소 꾸며주기 (content url)
• [CSS] 가상요소 ::after ::before와 svg를 이용하여 요소 꾸며주기 (background)

원인을 찾아보다가 svg 파일의 값에 width, height값이 고정적으로 설정되어 있는 것을 볼 수 있다.

svg 파일 값은 'vs-code'로 svg파일을 열면 확인이 가능하다.

다음은 크기 조정이 가능했던 svg파일과 크기 조정이 불가능했던 svg파일 설정 차이이다.

크기 조정이 가능했던 svg 파일 값

크기 조정이 불가능했던 svg 파일 값

 

고정 크기 값을 가지고 있는 svg를 'content'로 표현했을 시 다음과같이 공간 크기만 커질 뿐 이미지 크기는 변하지 않는다.

<style>
    .test-svg {

    }
    
    .test-svg::after {
        content: url("related-link-icon.svg");
        display:block;
        width: 100px;
        height: 100px;
        background-color: lightpink;
    }
</style>

<p class="test-svg">TEST</p>

하지만 다음과 같이 크기(width, height) 고정값을 지워주면 다음과 같이 css에서 설정한 크기값이 이미지에 적용된다.

고정 width, height 값 삭제

 

 

** 참고 **

이러한 현상은 가상요소 ::after, ::before의 content에 svg를 사용했을 경우 나타나는 문제이다.

'<img>'에 svg를 사용하면 svg파일의 고정크기 값과 상관없이 크기 조정을 할 수 있다.

<style>
    .test-svg {
        width: 30px;
        height: 30px;
        background-color: lightpink;
    }
</style>
    
<p>TEST<img class="test-svg" src="related-link-icon.svg"></img></p>