[웹 UI 개발] 이미지 리스트 - 5 / 아이콘 상태 변경

2023. 3. 22. 14:52

어떤 상태에 따라(클래스의 존재 여부 등) 아이콘의 이미지가 변경되는 코드를 예제를 통해 알아보자.

 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>아이콘 상태 변경</title>
        <link rel="stylesheet" href="css/icon_change.css">
    </head>
    <body>
        <div class="change">
            <span class="blind">첫째</span>
        </div>
        <div class="change up">
            <span class="blind">둘째</span>
        </div>
        <div class="change down">
            <span class="blind">셋째</span>
        </div>
    </body>
</html>

 

.change {
    float: left;
    padding: 10px;
    text-align: center;
}

.change::after {
    display: block;
    width: 100px;
    height: 100px;
    content: "";
    border: 1px solid gray;
    background-color: pink;
}

.up:after {
    background: url(https://i.namu.wiki/i/vfgQbaakX-Niz8Xl_pW6UYq-eM3Rywa16DEzJQbVXGHQHuC08dWl-ol9cilz_cIAl2GnEMFgBT47ZK-j_MGXI06cf92k9vB7pKDVe_Rbp4eX72PE4yNlCwR5tDdeDCVrW2K0yFA7BSARQSx5ERIViw.webp) no-repeat;
    background-size: cover;
}

.down:after {
    background: url(https://i.namu.wiki/i/977oABfnGkuRJ9XXIMnA471kOA4yzUfsLgQbVj_MdOzawPSTGrupS7T0taw817eqDKyVjZsmbaJ9OUr4bJcKv4vFLmruo75wYZQceeL6or87tLE4qEYae4cnudbTOKvsp23ABQCeU8csLlQ0H9k2tA.webp) no-repeat;
    background-size: cover;
}

.blind {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
}

 

브라우저 화면

 

up, down 클래스 여부에 따라 이미지가 노출될 수 있도록 가상 요소 after를 사용해서 background 이미지를 적용했다.

blind의 경우는 웹접근성을 위해 삽입한 코드이다.

 

이 예제의 경우 up, down 클래스를 미리 적용시켜 뒀지만 보통의 웹사이트에서 동작은 자바스크립트로 처리해서 특정 이벤트가 있을 때 클래스가 적용되도록 할 것이다.

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/web344

 

웹 UI 개발

부스트코스 무료 강의

www.boostcourse.org

'공부 > 웹 UI 개발' 카테고리의 다른 글

[웹 UI 개발] 이미지 리스트 - 7 / 이미지 리스트 추가 기능 제작  (0) 2023.03.23
[웹 UI 개발] 이미지 리스트 - 6 / 마우스 오버 시 버튼 노출  (0) 2023.03.22
[웹 UI 개발] 이미지 리스트 - 4 / 이미지 리스트 제작  (0) 2023.03.22
[웹 UI 개발] 이미지 리스트 - 3 / 이미지 액자 효과  (0) 2023.03.22
[웹 UI 개발] 이미지 리스트 - 2 / 텍스트 말줄임  (0) 2023.03.22

BELATED ARTICLES

more

티스토리툴바