티스토리 뷰

development/html javascript CSS

[HTML/JavaScript/CSS] 특정 요소 스타일 지정 / 좌표 활용법

Happyoon ~ 2021. 10. 12. 18:01
728x90
반응형

다음은 box 클래스의 스타일을 지정하고, 추가로 특정 요소의 스타일을 따로 지정하는 예제이다. 

 

클래스의 스타일 지정은 <style>태그 내에서, ".클래스명"{}으로 지정한다. 

특정 요소의 스타일 지정방법에는 두가지가 있다.

 

[특정 요소 스타일 지정하기]

 

1. 사용할 요소에서 바로 사용하기

<div class = "box" id = "myDiv" style = "background-color:yellow;">div1</div>

 

 

2.  id를 사용하기 

document.querySelector("#myDiv").addEventListener("mousedown",function(){
            //-를 쓰면 산술연산자로 인식하여 원하는대로 나오지 않으므로 카멜 케이스를 사용한다 
            document.querySelector("#myDiv").style.backgroundColor = "yellow";

});

 

 

 

[좌표 활용하기]

객체 내의 좌표를 얻어내는 방법은 다음과 같다.

document.querySelector("#myDiv").addEventListener("mousemove",function(event){
           console.log("mousemove!");
           let x = event.offsetX;
           let y = event.offsetY;

           /*이벤트가 일어난 좌표를 "x 좌표 : 100 y좌표:200" 형식의 문자열로 
           만들어서 위의 div의 innerText로 출력해 보세요.*/

        document.querySelector("#myDiv").innerText = "x좌표: " + x+ " y좌표: "+y;
        });

 

offsetX : 객체 내의 마우스 X좌표

offsetY : 객체 내의 마우스 Y좌표

pageX : 웹 브라우저 기준 X좌표

pageY : 웹 브라우저 기준 Y좌표

screenX : 화면상 기준 X좌표

screenY : 화면상 기준 Y좌표

 

 

 

예제1

<!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>Step02_event2.html</title>
    <style>
        .box{
            width:500px;
            height:500px;
            border-width:1px;
            border-style:dashed;
            border-color:red;
            /* background-color:yellow; */
            
        }
    </style>
</head>

<body>
    <div class = "box" id = "myDiv" style = "background-color:yellow;">div1</div>
    <script>
        document.querySelector("#myDiv").addEventListener("mousedown",function(){
            //-를 쓰면 산술연산자로 인식하여 원하는대로 나오지 않으므로 카멜 케이스를 사용한다 
            document.querySelector("#myDiv").style.backgroundColor = "yellow";

        });
        
        //id가 myDiv인 요소에 "mouseup"이벤트가 일어나면 배경색 흰색으로 변경
        document.querySelector("#myDiv").addEventListener("mouseup",function(){
            document.querySelector("#myDiv").style.backgroundColor = "white";

        });

        document.querySelector("#myDiv").addEventListener("mousemove",function(event){
           console.log("mousemove!");
           //console.log(event);
           
           //좌표 얻어내기
           let x = event.offsetX;
           let y = event.offsetY;

           /*이벤트가 일어난 좌표를 "x 좌표 : 100 y좌표:200" 형식의 문자열로 
           만들어서 위의 div의 innerText로 출력해 보세요.*/

        document.querySelector("#myDiv").innerText = "x좌표: " + x+ " y좌표: "+y;
        });
    </script>
</body>
</html>

 

 

 

예제2 - 스타일 지정 예제 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Step02_event3.html</title>
    <style>
        .box{
            width:100px;
            height:100px;
            border-width:1px;
            border-style:solid;
            border-color:red;

        }
    </style>
</head>
<body>
    <div class="box">div1</div>
    <div class="box">div2</div>
    <div class="box">div3</div>
    <div class="box">div4</div>
    <div class="box">div5</div>

    <script>
        document.querySelectorAll(".box")[0].addEventListener("click",function(){
            document.querySelectorAll(".box")[0].innerText = "clicked!";

        });
       
        //div2, div3에도 동일한 동작이 수행 되도록 코딩해 보세요. 
        document.querySelectorAll(".box")[1].addEventListener("click",function(){
            document.querySelectorAll(".box")[1].innerText = "clicked!";

        });
        document.querySelectorAll(".box")[2].addEventListener("click",function(){
            document.querySelectorAll(".box")[2].innerText = "clicked!";

        });
      
    </script>
</body>
</html>
반응형

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

[JavaScript] 반복문(2) forEach  (0) 2021.10.13
[HTML/JavaScript/CSS]innerText와 value 관련 예제  (0) 2021.10.12
[JavaScript] 반복문(1) for  (0) 2021.10.12
[JavaScript] querySelectorAll 활용하기  (0) 2021.10.12
[HTML/JavaScript/CSS] 마크업을 편하게 하는 방법  (0) 2021.10.12
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/04   »
일 월 화 수 목 금 토
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
글 보관함