티스토리 뷰

development/html javascript CSS

[CSS] cursor, hover

Happyoon ~ 2021. 10. 14. 17:26
728x90
반응형

앞의 게시물에서 다뤘던 CSS 부분을 보도록 하겠다. 

 

이전 예제

<!DOCTYPE html>
<html lang="en">
<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>Step07_this4.html</title>
    <style>

        p{
            cursor:pointer;
        }
        p:hover{
            background-color: yellow;
            font-weight : bold;
        }

    </style>
</head>
<body>
    <h1>제거할 p 요소를 클릭하세요.</h1>
    <button id="addBtn">p 요소 추가하기</button>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>p5</p>
    <script>
        /*
            위의 5개의 p요소에서 클린한 요소만 제거 되도록 프로그래밍헤보세요.
        */
        let ps = document.querySelectorAll("p");
        //반복문 돌면서
        for(let i = 0;i<ps.length;i++){
            //각각의 p요소에 click 이벤트 리스너 함수 등록
            ps[i].addEventListener("click",function(){
                this.remove();

            });

        }
        //추가 버튼 눌렀을 때 실행할 함수 등록
        document.querySelector("#addBtn").addEventListener("click",function(){
            //1. p요소를 만들어서
            let newP = document.createElement("p");
            //2. innerText로 출력하고
            newP.innerText ="새로 만든 p 요소";
            //3. body에 append한다.
            document.querySelector("body").append(newP);
            //4.새로 만든 요소에도 click 이벤트가 일어났을 때 실행할 함수를 등록한다.
            newP.addEventListener("click",function(){
                this.remove();
            });
        });
    </script>
    
</body>
</html>

 

여기서 주의깊게 볼 부분은 이 부분이다. 

<style>

        p{
            cursor:pointer;
        }
        p:hover{
            background-color: yellow;
            font-weight : bold;
        }

    </style>

 

 

위 예제의 결과는 다음과 같다.

우선 커서부터 살펴보자.

 

 

1. cursor

그동안 예제를 풀며 click에 대한 이벤트 리스너를 많이 활용했었는데 커서 변경을 한번도 하지 않았었다. 

하지만 실제 웹페이지에서는 클릭 위치를 커서 변경을 통해 많이 보여준다.

 

위 에제에서 커서 모양이 손가락 모양으로 바뀐 것을 볼 수 있다.

 

따라서 

cursor: pointer 가 위 모양의 커서로 만들어줌을 확인할 수 있다.

 

다양한 커서 모양과 활용은 이곳에서 확인하면 좋을 것 같다.

http://www.homejjang.com/09/cursor.php

 

CSS를 이용한 마우스 커서 모양 지정 - CSS 고급 강좌

cursor 속성을 이용하면 마우스 커서의 형태를 지정할 수 있습니다. 아주 간단하므로 예제를 보시면 금방 이해가 됩니다. Auto Crosshair Default Pointer Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-r

www.homejjang.com

2. hover

 

사용자의 커서가 요소 위에 올라갔을 때의 모습을 나타냄.

 

위 예제에서, 커서가 올라간 p1 부분의 배경색이 노란색, bold체로 나타남을 확인했다. 

 

따라서, 

<style>

        p:hover{
            background-color: yellow;
            font-weight : bold;
        }

    </style>

 

위와 같은 형식으로 hover 안에 다양한 스타일링 지정 시, 커서가 올라갔을 때의 모습을 표현할 수 있음을 알 수 있다.

반응형

'development > html javascript CSS' 카테고리의 다른 글

[JavaScript] insertAdjacentHTML()과 insertAdjacentElement(), append()의 쓰임 비교!!  (0) 2021.10.15
[JavaScript] innerHTML / innerHTML과 append()의 비교  (0) 2021.10.14
[JavaScript] this  (0) 2021.10.14
[JavaScript] 요소 삽입 방법 / append(), beforebegin, afterbegin, beforeend, afterend / insertAdjacentElement()  (0) 2021.10.14
[JavaScript] createElement() , setAttribute()  (0) 2021.10.14
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함