🟡

img 태그 혹은 백그라운드 이미지

기술

HTML

상태

In progress

작업

프로필_이미지_설정

고민 이유

처음에는 아래 코드와 같이 프로필 이미지를 백그라운드로 했다. 그런데 다시 생각해보니, 유저마다 프로필을 바꾸기 전 이미지가 다를 것이기 때문에 백그라운드로 이미지를 처리할 경우 동적으로 컨트롤하기 어려울거 같다는 생각이 들었다.

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        label {
            position: relative;
            display: inline-block;
            width: 100px;
            height: 100px;
            background-image: url("./my-app/src/assets/basic-profile-img.png");
        }

        label::after {
            position: absolute;
            bottom: 0;
            content: '';
            width: 50px;
            height: 50px;
            background-image: url("./my-app/src/assets/upload-file.png");
        }

        /* display: none이 아닌 이유 => display: none일 경우 스크린리더가 읽지 못함 */
        input {
            position: absolute;
            clip-path: inset(50%);
            width: 1px;
            height: 1px;
            margin: -1px;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <label>
        <span>프로필 사진 이미지 설정</span>
        <input type="file" accept="image/*">
    </label>
</body>

</html>
HTML
복사

나의 해결 방법

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        label {
            position: relative;
            display: inline-block;
            width: 100px;
            height: 100px;
        }

        label::after {
            position: absolute;
            bottom: -10px;
            right: -20px;
            content: '';
            width: 50px;
            height: 50px;
            background-image: url("./my-app/src/assets/upload-file.png");
        }

        .ir {
            position: absolute;
            clip-path: inset(50%);
            width: 1px;
            height: 1px;
            margin: -1px;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <label>
        <span class="ir">프로필 사진 이미지 설정</span>
        <img src="./my-app/src/assets/basic-profile-img.png" alt="">
        <input class="ir" type="file" accept="image/*">
    </label>
</body>

</html>
HTML
복사

결론

저는 백그라운드 이미지보다는 이미지 태그가 나을거 같다는 생각이 드는데 다들 그렇게 생각하시나요?