· FRONT-END/└ CSS

[ CSS / HTML ] checkbox 활용한 디자인

감자도리22 2024. 4. 20. 22:49

환경 : Visual Studio Code

 

 

[ checkbox 디자인 ]

 

 checkbox 

  •   체크 상태는 :checked로 확인 및 적용

 

  • .c1 + span은 c1 클래스 뒤에 있는 span 한 개를 의미
    .c1:checked + span은 c1 클래스가 체크되었을 때 뒤에 있는 span 한 개를 의미
  • .c1 ~ span은 c1 클래스 뒤에 있는 span 전체를 의미
    .c1:checked ~ span은 c1 클래스가 체크되었을 때 뒤에 있는 span 전체를 의미
  • 단, 앞에 있는 건 선택이 안 된다. 

출력결과

 

[ 코드 중 알아두면 좋은 코드 설명 ]

[ 체크박스와 라벨 연결 ]

<!-- 체크박스와 라벨을 연결 시킬 수 있다 -->
<div class="cell">
     <label for="ck2">앞에 있는 라벨</label>
     <input type="checkbox" class="c2" id="ck2">
     <span>하나</span>
     <span>둘</span>
     <span>셋</span> 
     <label for="ck2">뒤에 있는 라벨</label>
</div>

    (+) input 태그에 아이디를 주고 그 아이디를 for 속성으로 label 태그에서 받는다면 라벨을 클릭해도 체크박스가 선택되는 효과를 가져온다. 

 

 

[ 사이드 바 구현 ]

/* 사이드바 흉내내기 */
.c3 { display: none; }
.c3 + div {
    width: 150px;
    background-color: mediumaquamarine;
    left: -200px;
    transition: left 0.2s ease-out;

    /*진짜 사이드바는 fixed*/ 
    position: fixed;
    top: 0;
    bottom: 0;
    padding-top: 50px;
}
.c3:checked + div {
    left: 0px;
}
.c3 ~ label {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 999;
}
<div class="cell">
      <input type="checkbox" class="c3" id="ck3">
      <div>
          사이드바 영역
      </div>
      <label for="ck3">
          <i class="fa-solid fa-bars fa-2x"></i>
      </label>
</div>

    (+) 사이드바가 작동하는지 확인을 위해 배경 색상을 지정해주었음. 

    (+) 사이드바가 왼쪽 상단에 고정되어 있도록 지정(/*진짜 사이드바는 fixed*/ 주석 아래 코드)

    (+) 사이드바가 맨 위에서 작동되도록 z-index로 지정

 [ 전체 코드 ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>체크 박스를 이용한 디자인</title>

    <!-- 구글 폰트 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
     
    <!-- 내가 구현할 스타일 -->
    <link rel="stylesheet" type="text/css" href="commons.css">
    <link rel="stylesheet" type="text/css" href="test.css">
    
    <!-- font awesome 아이콘 CDN -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        .c1 ~ span { color: lightcoral; }
        .c1:checked ~ span { color: lightskyblue;}
    
        .c2 { display: none; }
        .c2 ~ span { color: lightcoral; }
        .c2:checked ~ span { color: lightskyblue;}
    

        /* 사이드바 흉내내기 */
        .c3 { display: none; }
        .c3 + div {
            width: 150px;
            /* height: 300px; */
            background-color: mediumaquamarine;
            /* position: relative;  */
            left: -200px;
            transition: left 0.2s ease-out;

            /*진짜 사이드바는 fixed*/ 
            position: fixed;
            top: 0;
            bottom: 0;
            padding-top: 50px;
        }
        .c3:checked + div {
            left: 0px;
        }
        .c3 ~ label {
            position: fixed;
            top: 10px;
            left: 10px;
            z-index: 999;
        }
    </style>
</head>
<body>
    <div class="container w-500">
        <div class="cell center">
            <h1>체크박스를 이용한 디자인</h1>
        </div>

        <div class="cell">
            <input type="checkbox" class="c1">
            <span>하나</span>
            <span>둘</span>
            <span>셋</span>
            <span>넷</span>
            <span>다섯</span>
        </div>

        <!-- 체크박스와 라벨을 연결 시킬 수 있다 -->
        <div class="cell">
            <label for="ck2">앞에 있는 라벨</label>
            <input type="checkbox" class="c2" id="ck2">
            <span>하나</span>
            <span>둘</span>
            <span>셋</span>
            <span>넷</span>
            <span>다섯</span>
            <label for="ck2">뒤에 있는 라벨</label>
        </div>

        <div class="cell">
            <h2>사이드바 구조 보기</h2>
        </div>
        <div class="cell">
            <input type="checkbox" class="c3" id="ck3">
            <div>
                사이드바 영역
            </div>
            <label for="ck3">
                <i class="fa-solid fa-bars fa-2x"></i>
            </label>
        </div>
    </div>
</body>
</html>

 

 

 

 

개인 공부 기록용입니다:)

728x90