css 폼 요소에 마우스 처리 하기

네 안녕하세요, 이번 포스팅에서는 폼 요소에

마우스 처리를 하는 방법에 대하여 알아보도록 하겠습니다.

우리가 폼 요소에 무언가를 입력하기 위해서는 마우스를 써야 하기 때문에,

마우스 관련 이벤트는 매우 중요한 요소들 중 하나입니다.

그럼 지금부터 어떻게 사용을 하는지 보도록 하겠습니다.

1. 마우스 이벤트 기능 사용하기

폼 요소 입력 시에 사용하는 마우스 관련 이벤트는 크게 두 가지를 씁니다.

마우스가 올라올 때 발생하는 이벤트
텍스트를 입력하기 위해 폼 요소 클릭 시 받는 포커스

이렇게 두 가지가 있습니다.

1 - 1. 마우스가 올라올 때 : hover 사용

마우스가 올라올 때는 hover 속성을 사용하여 이벤트를 줄 수 있습니다.

사용 방법은 이렇습니다.

input[type="text"] {
    color : red;
}

input[type="text"]:hover {
    background : aliceblue;
}

이렇게 쓰게 되면 마우스가 올라갈 때 배경색이 aliceblue로 바뀌게 됩니다.

1 - 2. 텍스트 입력을 위해 폼 요소를 클릭할 때 : focus 사용

텍스트를 입력하기 위해서 폼 요소를 클릭했을 때도 이벤트를 넣을 수 있습니다.

여기서 말하는 포커스란, 키 입력에 대한 독점권을 의미하는데,

폼 요소가 포커스를 받게 되면 해당 폼 요소에만 입력이 가능한 형태가 됩니다.

그래서 이게 있어야 폼 요소 간 혼선도 어느 정도 막아주고,

그에 따른 이벤트 등도 넣을 수 있어서 제일 많이 쓰입니다.

사용 방법은 아래와 같습니다.

input[type="text"]:focus {
    font-size : 120%;
}

이렇게 쓰게 되면 입력 창을 클릭해서 폼 요소가 포커스를 받게 되었을 때

텍스트가 입력되는 동안 글자 크기가 120%로 증가되어 있게 됩니다.

이제 이들을 직접 html 태그에 넣어서 적용시켜 보도록 하겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>폼 스타일 주기</title>
    <style>
    input[type=text] { /* text 창에만 적용 */
        color : red; 
    }
    input:hover, textarea:hover { /* 마우스 올라 올 때 */
        background : aliceblue;
    }
    input[type=text]:focus, input[type=email]:focus { /* 포커스 받을 때 */
        font-size : 120%; 
    }
    label {
        display : block; /* 새 라인에서 시작 */
        padding : 5px;
    }
    label span {
        display : inline-block;
        width : 90px;
        text-align : right;
        padding : 10px;
    }
    </style>
    </head>
    <body>
    <h3>CONTACT US</h3>
    <hr>
    <form>
        <label>
            <span>Name</span><input type="text" placeholder="Input Your Name">
        </label>
        <label>
            <span>Email</span><input type="email" placeholder="gooroom@gmail.com">
        </label>
        <label>
            <span>Comment</span><textarea placeholder="메시지를 남겨주세요"></textarea>
        </label>
        <label>
            <span></span><input type="submit" value="submit">
        </label>		
    </form>
    </body>
</html>

이렇게 작성을 해봤습니다.

그럼 이제 결과를 보도록 하겠습니다.

이런 식으로 텍스트 입력 폼을 만들어봤는데,

이제 여기에 적용시킨 속성들이 제대로 들어갔는지 보도록 하겠습니다.

보시면 마우스가 올라갔을 때 폼 입력창의 색이 바뀌는 걸 볼 수 있고,

입력란을 클릭하여 포커스를 주었을 때 입력 창과 글자 크기가 커지고,

입력되는 글자 색을 빨강으로 설정했기 때문에 빨간 글씨가 입력되고 있으며,

포커스가 끝이 나고 커서가 완전히 내려갔을 때

글자 크기가 원래대로 돌아온 것을 볼 수 있습니다.

여기까지 폼 요소에 마우스 관련 처리를 하는 방법에 대하여 알아보았습니다.

다음 포스팅에서는 css 스타일로 태그에 동적 변화를 주는 방법에 대하여

알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사드립니다~

저작자표시 비영리 변경금지

'html, css, 자바스크립트 > css' 카테고리의 다른 글

css 스타일로 전환 효과 주기 (0)	2023.05.22
css 스타일로 애니메이션 주기 (0)	2023.05.22
css 폼 요소 테두리 꾸미기 (0)	2023.05.08
css 폼 요소에 스타일 입히기 (0)	2023.05.08
css 표에 마우스 커서를 올렸을 때 셀 색깔 변경되게 하기 (2)	2023.05.08

개발러 L의 뻔fun한 코딩

css 폼 요소에 마우스 처리 하기