너와 나의 프로그래밍

CSS - 여러개의 Span태그에 깔끔하게 Border 만들기. 본문

Front-End/HTML5 & CSS3

CSS - 여러개의 Span태그에 깔끔하게 Border 만들기.

Whatever App's 2019. 4. 4. 09:47

[CSS] 여러개의 Span태그에 깔끔하게 Border 만들기.

 

 

 

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

 

하지만 여러개의 Span에서 mouseover를 하면 뭔가 흔들리면서 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;
            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>

Span태그에 존재하지 않던 border가 생겨서 1px씩 밀리는 현상이 있어, 맨 처음 Span 태그에 margin:1px을 줘서

해결하였지만, 모든 Span들의 margin값이 1씩 늘어나 내가 의도하는 구현과는 달랐다.

 

 

그래서 나온 결론이 처음으로 설정한 margin값을 지우고 border가 생길 때 마다 margin에 -1px씩 주었다.

 

이렇게 하면 border가 생기면서 Span 태그의 원래 없었던 1px의 margin값이 -1px이 되니 자동적으로 사라지면서 깔끔하게 구현이 가능했다.

 

이 글을 Okky라는 개발자 커뮤니티에 내가 직접 글을 올려 답변을 받은 토대로 간단하게 작성해 보았다.

(https://okky.kr/article/565209?note=1659807)

 

 

(진짜 CSS/HTML 고수들 너무 부럽다;; 차라리 Script가 훨씬 쉽고 간단한거 같다;;;)

반응형

'Front-End > HTML5 & CSS3' 카테고리의 다른 글

HTML5 & CSS3 - flex-grow (height: 100%)  (0) 2023.01.29
HTML - span 태그에서 onblur 적용하기.  (0) 2018.09.11
HTML - Table TD안의 이미지를 자동으로 셀 높이에 맞게 채우기  (0) 2017.11.03
'Front-End/HTML5 & CSS3' Related Articles more