Soulmate
714
2019-04-03 11:54:06
5
188

간단한 CSS 질문있습니다.


안녕하세요. 간단한 CSS 질문있습니다.

span태그에 mouseover/mouseout을 해서 빨간색 border상자가 생기고 없어지는 스크립트를 만들었습니다.


<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .box {
            display: flex;
            flex-direction: column;
        }
        .box > span {
            align-items: center;
        }
        .borderbox {
            border: 1px solid red; 
        }
        .bordernonebox { 
            border: 0px;
        }
    </style>
</head>
<body>
    <div class = "box">
        <span onmouseover="test(this)" onmouseout="test(this)">Hi.</span>
        <span onmouseover="test(this)" onmouseout="test(this)">Hello.</span>
    </div>
    <script>
        function test(obj){
            if(obj.getAttribute('class') === null){
                obj.setAttribute('class', 'borderbox');
            }else{
                obj.removeAttribute('class');
            };
        } 
    </script>
</body>
</html>

실행 결과는 잘 나오지만 한가지 해결하지 못한점이 있습니다.

hi라는 텍스트에 mouseover를 했을 시 빨간 테두리가 나오지만 밑에 있는 hello가 1px씩 밑으로 밀립니다...

딱 고정이 되었으면 좋겠는데 어떻게 하면 좋을까요?

0
0
  • 답변 5

  • KDH0110
    153
    2019-04-03 12:05:29


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Document</title>
        <style>
            .box {
                display: flex;
                flex-direction: column;
            }
            .box > span {
                align-items: center;
            }
            .borderbox {
                border: 1px solid red;
            }
            .bordernonebox {
                border: 0px;
                margin: 1px;
            }
        </style>
    </head>
    <body>
    <div class = "box">
        <span class="bordernonebox" onmouseover="test(this)" onmouseout="test(this)">Hi.</span>
        <span class="bordernonebox" onmouseover="test(this)" onmouseout="test(this)">Hello.</span>
    </div>
    <script>
        function test(obj){
            if(obj.getAttribute('class') === 'bordernonebox'){
                obj.setAttribute('class', 'borderbox');
            }else{
               // obj.removeAttribute('class');
                obj.setAttribute('class', 'bordernonebox');
            };
        }
    </script>
    </body>
    </html>

    존재하지 않던 border가 생기면서 상하좌우 1px씩 공간을 더잡아먹어 생기는거라

    미리 1px씩 공간을 잡아두고 있다가 border로 변경시 밀리지 않고 고정됩니다.

    1
  • Soulmate
    714
    2019-04-03 13:41:42

    KDH0110 정말 너무 감사드립니다!!

    0
  • Soulmate
    714
    2019-04-03 15:39:14

    KDH0110 혹시 margin:1px을 주지 않고 해결하는 방법은 없을까요? 기본값을 가지고 가니까 element사이가 벌어지는데 되도록이면 가만히 있는 상태에서 border를 주고 싶습니다...

    0
  • KDH0110
    153
    2019-04-03 15:42:32


            .borderbox {
                border: 1px solid red;
                margin: -1px;
            }

    이런식으로 하면 기존 코드랑 동일한 간격으로 됩니다.

    0
  • Soulmate
    714
    2019-04-03 15:46:37

    KDH0110 정말 커피값이라도 드리고 싶을 정도로 너무 감사합니다.

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.