본문 바로가기
HTML

Visual Studio Code :: Input 사용하기

화사비 2021. 12. 27. 17:37

목차

  1. 수업 목표
  2. HTML
    2-1. Input
    2-2. Label
  3. CSS
    3-1. 아이콘 만들기
    3-2. Input[id="!@#$%^"]
    3-3. span:nth-child(#)
    3-4. :checked
    3-5. transition
  4. 오류 및 수정
  5. 결과 화면

1. 수업 목표

오늘의 수업 목표는 세 줄로 구성된 햄버거 버튼에에 마우스를 갖다 대었을 때 커서의 변환 모습과 햄버거 버튼을 클릭 했을 때 변화되는 모습을 만드는 것이 목표입니다.

 

2. HTML

 

 

<body>
    <input type="checkbox" id="icon">
    <label for="icon">
        <span></span>
        <span></span>
        <span></span>
    </label>
    <div id="header">
        <ul>
            <li><a href="#">menu1</a></li>
            <li><a href="#">menu2</a></li>
            <li><a href="#">menu3</a></li>
            <li><a href="#">menu4</a></li>
            <li><a href="#">menu5</a></li>
        </ul>
    </div>
</body>

<label for="icon"> 뒤에 <span>을 세개 준 이유는 햄버거 버튼을 만드는데 세 줄이 필요하기 때문입니다. 

<div id="header"> 는 햄버거 버튼을 클릭 후에 나오는 화면에 들어갈 내용을 입력하기 위해 구성하였습니다.

 

2-1. Input

 

 

Input 의 특징 : 닫는 태그가 존재하지 않습니다.(</input> 안해도 됨) 따라서 단일로 생성이 가능합니다.그리고 요소의 동작 방식은 type 특성에 따라 현격히 달라집니다. 

 

<input type="text" id="name" >

<input type="checkbox" id="name">

<input type="button" id="name">

 

 

이런 식으로 사용가능합니다.

저는 <input type="checkbox"> 를 활용해서 클릭하면 동작이 되는 check박스를 만들었습니다.

 

2-2. Label

 

 

HTML<label>요소는 사용자 인터페이스 항목의 설명을 나타냅니다.

Label은 하나의 div처럼 인라인 스타일입니다.

  • label 엘리먼트 속성값 중 for이라는 게 존재합니다.
  • for이라는 속성값은 for안에 있는 같은 아이디 값이 있는 인포박스를 선택할 수 있는 기능을 가지게 됩니다. 
       <input type="checkbox" id="icon">
    <label for="icon">
        checkbox
    </label>​

작성시 아래 보이는 사진처럼 checkbox가 생성되는데, input type="checkbox"만 했을때에는 글씨를 클릭해도 아무런 변화가 없지만 label for을 이용하면 글씨를 클릭해도 박스에 체크가 됩니다. 이를 통해 접근성을 높일 수 있습니다.

input type를 checkbox가 아닌 text box로 바꾸게 되면

이런식으로 만들 수 있고, 텍스트 박스가 아닌 'click me' 를 클릭해도 

 이렇게 커서가 움직이는 것을 확인할 수 있습니다.

 

 

 

 

 

3. CSS

 

 

body{
    margin: 0;
    padding:0;
}
a{
    text-decoration: none;
}
input[id="icon"]{
    display:none;
}
input[id="icon"] + label{
    position:relative;
    display: block;
    width: 60px;
    height:40px;
    cursor:pointer;
}
input[id="icon"] + label > span{
    position:absolute;
    display: block;
    width:100%;
    height: 5px;
    border-radius: 30px;
    background: #000;
    transition: all .3s;
    z-index:2;
}
input[id="icon"] + label > span:nth-child(1){
    top:0px;
}
input[id="icon"] + label > span:nth-child(2){
    top:50%;
    transform: translateY(-50%);
}
input[id="icon"] + label > span:nth-child(3){
    bottom: 0px;
}
input[id="icon"]:checked + label > span:nth-child(1){
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
input[id="icon"]:checked + label > span:nth-child(2){
    opacity: 0;
}
input[id="icon"]:checked + label > span:nth-child(3){
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}
input[id="icon"] + label + #header {
    position: fixed;
    width: 300px;
    height: 100%;
    background: #333;
    top: 0px;
    padding: 60px 25px 25px 25px;
    box-sizing: border-box;
    left: -300px;
    transition: all 0.35s;
    z-index: 1;
    color: white;
}
input[id="icon"]:checked + label + #header{
    left: 0px;
}

전체적인 CSS 구성은 위와 같습니다.

 

하나하나 살펴보도록 하겠습니다.

 

 

3-1. 아이콘 만들기

 

 

input[id="icon"] + label{
    position:relative;
    display: block;
    width: 60px;
    height:40px;
    cursor:pointer;
}
input[id="icon"] + label > span{
    position:absolute;
    display: block;
    width:100%;
    height: 5px;
    border-radius: 30px;
    background: #000;
    transition: all .3s;
    z-index:2;
}
  • 전체적인 햄버거 버튼의 틀을 잡기 위해 width 60px, height 40px로 잡았습니다.
  • 또한 마우스를 갖다 대면 클릭이 되는지 안되는지 모를 수 있기 때문에 마우스를 갖다 대면 클릭 가능하다는 것을 직관적으로 알 수 있도록 cursor:pointer을 주어 손가락 모양으로 바뀌도록 만들어주었습니다.

3-2. input[id="icon"]

 

 

모든 엘리먼트 중에서 인풋 박스 중에서 아이디가 아이콘인것을 선택하겠다는 의미입니다. 

처음 display:none; 을 통해 체크박스가 기능은 하지만 보이지는 않도록 만들어 주었습니다.

display:none;을 하지 않으면 이런식으로 위에 체크박스가 생기게 됩니다.

 

++ #icon을 하여도 결과가 똑같이 나옵니다.

 

3-3. span:nth-child(#)

 

 

 :nth-child(#) 는 형제 사이에서의 순서에 따라 요소를 선택한다고 합니다.

순서에 따라 nth-child(1) nth-child(2) nth-child(3) 다르게 해 주었습니다.

 

input[id="icon"] + label > span:nth-child(1){
    top:0px;
}
input[id="icon"] + label > span:nth-child(2){
    top:50%;
    transform: translateY(-50%);
}
input[id="icon"] + label > span:nth-child(3){
    bottom: 0px;
}
input[id="icon"]:checked + label > span:nth-child(1){
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
input[id="icon"]:checked + label > span:nth-child(2){
    opacity: 0;
}
input[id="icon"]:checked + label > span:nth-child(3){
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}
#icon + label > span:nth-child(1){
    top: 0px;
}
#icon + label > span:nth-child(2){
    top: 50%;
    transform:translateY(-50%);
}
#icon + label > span:nth-child(3){
    bottom:0px;
}
#icon:checked + label > span:nth-child(1) {
    top: 50%;
    transform:translateY(-50%) rotate(45deg);
}
#icon:checked + label > span:nth-child(2) {
    opacity: 0;
}
#icon:checked + label > span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}
  • 맨 위에 해당하는 1번은 top:0px;을 주어 가장 위에 붙도록 설정하였습니다.
  • 2번은 가운데 위치할 수 있도록 top:50%를 주었습니다. transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식모델의 좌표 공간을 변경합니다. Y축으로의 이동이 필요해서 transform:translateY(-50%)를 주었습니다.
  • 3번은 맨 아래에 위치할 수 있도록 bottom:0px;를 주었습니다.

 

 

3-4. :checked

 

 

  • :checked CSS 의사 클래스 선택자는 선택했거나 on 상태인 라디오(<input type="radio">), 체크박스(<input type="checkbox">), 옵션(<option>)요소를 나타냅니다.
  • <input type="checkbox">라고 생각하고 체크(클릭)를 했을 때 변화되는 것을 나타냅니다.
    **( :를 입력할 때 띄어쓰기를 한 칸 하면 적용이 되지 않는걸 몰라서 처음에 오류가 났었다.)
        ex) input[id="icon"]: checked(X) 
             input[id="icon"] :checked(O) 
input[id="icon"]:checked + label > span:nth-child(1){
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
input[id="icon"]:checked + label > span:nth-child(2){
    opacity: 0;
}
input[id="icon"]:checked + label > span:nth-child(3){
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}
input[id="icon"]:checked + label + #header{
    left: 0px;
}
  • 클릭을 했을 때 첫번째 줄에 있던 선이 표시한 빨간색 처럼  되게 하기 위해 중간 50% 지점(top:50%)에서 45도만큼 기울어지도록 표현했습니다.

  • 두번째 줄에 있던 선은 opacity:0;을 주어 사라지도록 하였고 세번째 줄에 있던 선은 첫번째 줄에 있던 선처럼 가운데(bottom:50%)에서 45도만큼 기울어지도록 표현했습니다.

 

  • 겹쳐지면 X모양이 되도록 만들었고, 기존 가운데 있던 선을 없애지 않고 놔두었다면 별 모양(*)이 되었을 것입니다.

 

  •  

3-5. transition

 

 

CSS transition은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다. CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어납니다.

출처 : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

 

CSS 트랜지션 사용하기 - CSS: Cascading Style Sheets | MDN

CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니

developer.mozilla.org

 

  • transition을 이용하여 애니메이션 효과를 주었습니다. 
input[id="icon"] + label + #header {
    position: fixed;
    width: 300px;
    height: 100%;
    background: #333;
    top: 0px;
    padding: 60px 25px 25px 25px;
    box-sizing: border-box;
    left: -300px;
    transition: all 0.35s;
    z-index: 1;
    color: white;
}
input[id="icon"]:checked + label + #header{
    left: 0px;
}

  • transition 값을 주게 되면 속도 조절이 가능하게 됩니다. transition을 주지 않았을 때에는 0초만에 행위가 발동되어 변화하는 모습이 보이지 않지만, 0.35s를 주게 되면 ㅡ 모양의 막대가 / 로 서서히 변하는 모습을 볼 수 있습니다.  마치 애니메이션이 움직이는 것 처럼 보여지기 때문에 조금 더 이뻐집니다.
  • left -300px;를 준 이유는 300px크기의 검은색 상자가 왼쪽으로 300px만큼 가게 되면 처음 화면에서 보이지 않게 되었다가 클릭하면 튀어나오는 것 처럼 보이게 하기 위해서 입니다. 
  • 그래서 :checked를 사용하였고 클릭하면 0px 위치로 오게 하여 상자가 튀어나오는 것 처럼 보이게 됩니다. 이것 역시 transition이 같이 걸려 있어서 함께 자연스러운 애니메이션처럼 나오게 됩니다.

4. 오류 및 수정

 

input[id="icon"] + label > span:nth-child(1) {
    top:0px;
}
input[id="icon"] + label > span:nth-child(2) {
    top:50%;
    transform:translateY(-50%)
}
input[id="icon"] + label > span:nth-child(3) {
    bottom:0px;
}

input[id="icon"]:checked + label > span:nth-child(1){
    top:50px;
    transform:translateY(-50%) rotate(45deg);
}

input[id="icon"]:checked + label > span:nth-child(2){
    opacity: 0;
}

input[id="icon"]:checked + label > span:nth-child(3){
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}
  • 코드를 이렇게 만들었더니 제대로 된 X모양이 나오지 않았다.
  •  input[id="icon"]을 했을 때에는 완전히 모양이 이상하게 나오다가, #icon으로 하면 또 제대로 나오기도 하고, 어디가 잘못 된 것인지 한참 헤맸지만 결국은 찾지 못하였다. 어디가 잘못된 것인지 차근차근 보면서 교수님께서 짜셨던 코드를 따라해봐도 수정이 되지 않았다. 그래서 결국 작성한 내용을 모두 지우고 코드를 새로 작성하게 되었다.

오류
수정 후

 

 

5. 결과화면

 

 

 

클릭 전

 

클릭 후

비대면으로 처음 수업을 진행했고, 중간에 오류가 나서 어디가 어떻게 잘못 된 것인지 한참 찾았었는데 결국 찾지 못하고 코드를 다 지웠다가 새로 짰던 하루였다. 최종적으로는 원하던 모양대로 랜더링이 되었고, 애니메이션 또한 매끄럽게 잘 적용이 되었다.

결과물만 놓고 보면 엄청 간단한 듯 보였지만 중간에 오류를 찾아내지 못해서 혼자서 꽤나 애를 먹었었다. 결과는 좋게 나왔으니 만족한다.

728x90

'HTML' 카테고리의 다른 글

Visual Studio Code :: 클론코딩 (네이버 회원가입화면)  (0) 2021.12.28
Visual Studio Code :: 모달 팝업(레이어 팝업) 만들기  (0) 2021.12.28
Visual Studio Code :: CSS를 이용해서 클론페이지 만들기 2  (0) 2021.12.23
Visual Studio Code :: CSS를 이용해서 클론페이지 만들기  (1) 2021.12.22
Visual Studio Code :: 테이블 만들기 그리고 CSS 및 경로  (0) 2021.12.21

'HTML' Related Articles

티스토리툴바