HTML + CSS 아이폰 토글 스위치 스타일 버튼 만들기

안녕하세요. 친절한효자손입니다. 오늘부터 새롭게 시작할 카테고리입니다. HTML과 CSS만으로 구현 가능한 모든 것들을 한번 만들어 보려고 합니다. 까먹음 방지 차원에서 절대 잊지 않기 위해서 이것저것 생각나는대로 만들까 생각하고 있습니다. 티스토리에서도 응용 가능합니다. 첫시간에는 아이폰의 토글 스위치 스타일 버튼을 만들어보려고 합니다. 어떤 스타일인지 모르시겠다면 구글에서 영어로 한번 검색해 보세요.

이런 스타일의 버튼을 말하는 것입니다. 개인적으로 아이패드도 사용중인데 설정에서 볼 수 있는 이 버튼 스타일이 참 직관적이고 좋더라구요. 그래서 현재 친효스킨에도 일부 기능에서 이 스타일을 적용시켰습니다. 동영상으로 만들어지는 과정을 녹화했는데 한번 살펴보시고 어떤식으로 스타일이 완성되어가는지를 확인해 보시기 바랍니다.

자막도, 음성도 없어서 다소 보시기 어려우신 분들을 위해서 본 페이지에 핵심적인 부분만 설명을 드리려고 합니다. 다음부터는 목소리가 구려도 한번 용기를 내어 설명까지 녹음해 보도록 하겠습니다.

HTML

먼저 뼈대부터 살펴보겠습니다.

<body>
    <div class="wrap">
        <input type="checkbox" class="sr-only" id="check">
        <label for="check">
            <div class="button">
                <h3>HOME</h3>
                <div class="inside"></div>
            </div>
        </label>
    </div>
</body>

HTML의 뼈대는 정해진 답이 없습니다. 저는 보통 어떠한 오브젝트를 만들 때 반드시 부모 div를 만들어줍니다. 혹시 모를 위치 이동에 용이하도록 말이지요. 그리고 클래스명을 wrap으로 정하죠. 즉! 저 wrap 클래스명을 가진 div의 position만 바꿔주면 나머지 오브젝트도 덩달아 같이 이동하게 되겠지요.

그 다음으로 보셔야 하는 부분이 input 태그인데 타입은 checkbox로 했습니다. 제 목적은 자바스크립트를 사용하지 않고 HTML과 CSS만으로 클릭하면 애니메이션이 적용되도록 만들고 싶었습니다. 그래서 input과 label 태그를 같이 사용하게 되었습니다.

label 태그는 input 태그와 연결시켜줘야하는데 label에 for를 넣어서 마치 클래스명마냥 이름을 지어줍니다. 그리고 input에는 id값을 넣어주는데 for와 같은 이름으로 맞춰주면 이 둘은 완벽히 연결됩니다. 그렇기에 위의 영상에서 보신것처럼 버튼 부분을 눌러도 체크박스가 체크되고 해제되는 결과를 보실 수 있으셨을 겁니다. 사실상 이 두개가 핵심이고 나머지는 비교적 어렵지 않습니다.

label 태그 안에 클래스명 button의 div를 만들고 그 안에 또 h3과 div 태그를 넣었습니다. button 클래스명을 가진 태그가 우리가 육안으로 확인 가능한 버튼입니다. 안쪽에 h3는 원하는 텍스트를 입력, inside 클래스명의 div는 움직이는 동그란 원을 만들기 위해 넣었습니다. 이렇게 뼈대는 완성되었고 이제 스타일만 만들어 주면 됩니다.

CSS

스타일시트 구성은 다음과 같습니다.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.wrap .button {
    position: relative;
    width: 120px;
    height: 50px;
    border-radius: 25px;
    background-color: #bbb;
    transition: all 0.2s;
    cursor: pointer;
}

.wrap .button h3 {
    margin-left: 10px;
    line-height: 50px;
    color: #fff;
    opacity: 0;
    transition: all 0.2s;
}

.wrap .button .inside {
    position: absolute;
    top: 50%;
    left: 5px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #eee;
    transform: translateY(-50%);
    transition: all 0.2s;
}

.wrap input:checked ~ label .button {
    background-color: #2fde54;
}

.wrap input:checked ~ label .button h3 {
    opacity: 1;
}

.wrap input:checked ~ label .button .inside {
    left: 75px;
}

이렇게 구성되었습니다. 여기에서 핵심은 바로 ~ 선택자일 것 같습니다. 이 부분에 대해서는 더 자세한 글을 작성한 바 있으니 아래의 글을 꼭 한번 읽어봐 주시기 바랍니다.

CSS 자식 요소 선택하는 인접 선택자 두 가지 방법

부모 요소의 자식 요소들 끼리, 그러니까 자매 및 형제 요소들을 선택하는 방법은 두 가지가 있습니다. 여기에서는 부모 요소를 기준으로 하는것이 아닌, 자식 요소간의 선택 방법입니다. 본문

rgy0409.tistory.com

이 방법을 사용하지 않으려면 input 태그 안에 여러 요소를 넣어야 하지만 input은 단독 사용되기에 이건 불가능합니다. 그러므로 자바스크립트를 쓰지 않으려면 input과 label을 1대 자식으로서 나란히 배치하는게 가장 속편하다고 생각됩니다. label 태그는 닫히는 태그가 있으니 이 안쪽에 아이폰 토글 스위치의 실질적인 부분을 모두 넣음으로서 스위치를 클릭해도 label이 input과 연결되어있기에 체크가 활성화 됩니다. 이렇게해서 다음의 스타일을 적용시켰습니다.

input:checked

.wrap input:checked

이것은 「input 태그에 체크가 되었을 때」라는 의미를 갖습니다. 다시 한 번 자세한 설명을 드리겠습니다.

.wrap input:checked ~ label .button .inside {
    left: 75px;
}

「wrap 클래스명을 가진 div 안에 있는 checkbox 타입의 input 태그에 체크가 되면, 형제요소인 label 태그 안의 button 클래스명을 가진 div 안의 inside 클래스명을 가진 div의 위치를 left: 75px로 이동시킨다」 라는 뜻이 됩니다. 원래 위치는 left가 5px이었습니다. 즉 체크되면 왼쪽에서 5px만큼 떨어져있던 원형 div가 체크가 되는 순간 75px만큼 떨어져서 마치 이동되는 것처럼 보여지는 것입니다.

transition

다음은 트랜지션입니다. 이 옵션은 애니메이션 연출을 만들어줍니다. 이 옵션이 없다면 input에 체크가 되는 순간 딱 2프레임으로만 출력됩니다. 즉 전과 후만 연출되고 이동되는 중간 과정이 없습니다. 하지만 transition 을 넣어줌으로서 스무스하게 이동 경로가 보여지는 것입니다. 이와 관련된 자세한 내용은 아래의 글을 참고하시기 바랍니다.

CSS transition Animation 트랜지션 애니메이션 속성 및 사용 방법

오늘은 정말로 유익한 내용을 배웠습니다. CSS 스타일에서 사용할 수 있는 transition 애니메이션에 대한 사용 방법입니다. 전부터 궁금했던 부분이기도했고, 알아두면 분명 멋진 메뉴를 구성할 수

rgy0409.tistory.com

transform: translateY()

마지막으로 트랜스폼입니다. 포토샵을 자주 사용하시는 분들이라면 transform이라는 단어가 꽤 익숙할 것입니다. 포토샵의 트랜스폼이나 CSS에서의 트랜스폼은 개념이 크게 다르지 않습니다. 변형이라는 뜻인데 마찬가지로 CSS에서도 다양한 트랜스폼 옵션으로 요소의 변화를 만들어줄 수 있습니다. transform: translateY() 를 사용한 이유는 움직이는 원형의 div를 백그라운드인 부모 div의 세로축 기준으로 정중앙에 위치하게 만들어주기 위함입니다.

저는 주로 세로축을 기준으로 할 때 가운데 정렬을 하는 경우에 이 방법을 사용하곤 합니다. 물론 이것이 복잡하자면 display: flex를 사용하면 됩니다. 하지만 이번에는 그냥 트랜스폼을 사용해보고 싶었습니다. 이와 관련된 제세한 내용도 이미 예전에 작성한 바 있습니다. 아래의 글들을 참고해 주시기 바랍니다.

CSS3 div 안에 div 세로 가운데 정렬 방법 (position, transform 이용)

브라우저의 창 크기와 상관 없이, 정 가운데 div를 위치하는 방법에 대해서는 지난시간에 말씀드린바 있습니다. 오늘은 div를 하나 생성하고, 그 안에 div를 하나 더 만들어서 정가운데로 위치하는

rgy0409.tistory.com

CSS display: flex 그리고 inline-flex

인터넷 익스플로러도 망한 마당에 이제 HTML의 블록 요소들이 배치가 좀 더 자유로워졌습니다. display: flex; 에 의해서 가능해진 것입니다. 이제 flex(플렉스) 정렬 방법에 의해서 간격이든, 가로 정

rgy0409.tistory.com