loading
반응형

▶ border 프로퍼티(속성) 

💻 CSS 프로퍼티(속성) / JavaScript 프로퍼티(속성) 

CSS 프로퍼티 (속성)  JavaScript 프로퍼티 (속성)
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-left-radius borderBottomLeftRadius
border-bottom-right-radius borderBottomRightRadius
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-collapse borderCollapse
border-color borderColor
border-left borderLeft
border-left-color borderLeftColor
border-left-style borderLeftStyle
border-left-width borderLeftWidth
border-radius borderRadius
border-right borderRight
border-right-color borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
border-spacing borderSpacing
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-left-radius borderTopLeftRadius
border-top-right-radius borderTopRightRadius
border-top-style borderTopStyle
border-top-width borderTopWidth
border-width borderWidth

 

 

 

▶ CSS 조작하기

// 태그요소
let element = document.getElementById('태그의 id 값');

 

💻 border 

// 선굵기(px) 선종류(solid, dotted, dashed, inset, outset, ridge, groove, double) 선색깔(blue, #000 등등)

// ex) 사용법
element.style.border = '1px solid red';

 

💻 border-bottom 

// 선굵기(px) 선종류(solid, dotted, dashed, inset, outset, ridge, groove, double) 선색깔(blue, #000 등등)

// ex) 사용법
element.style.borderBottom = '1px dashed red';

 

💻 border-bottom-color 

// ex) 사용법
element.style.borderBottomColor = 'yellow';
element.style.borderBottomColor = '#345354';
element.style.borderBottomColor = 'rgba(201, 33, 282, 0.6)';

 

💻 border-bottom-left-radius 

// ex) 사용법
element.style.borderBottomLeftRadius = '10%';
element.style.borderBottomLeftRadius = '25px';
element.style.borderBottomLeftRadius = '25px 100px';

 

💻 border-bottom-right-radius 

// ex) 사용법
element.style.borderBottomRightRadius = '10%';
element.style.borderBottomRightRadius = '25px';
element.style.borderBottomRightRadius = '25px 100px';

 

💻 border-bottom-style 

// ex) 선종류(solid, dotted, dashed, inset, outset, ridge, groove, double)
element.style.borderBottomStyle = 'dotted';

 

 

반응형

 

 

 

💻 border-collapse  & border-spacing 

이 속성은 table 태그 에서 사용해야 한다.

아래 예제처럼 테이블 태그에 id 값을 정의하고 해당 id의 요소에다가 속성을 적용한다.

아래 예제의 자바스크립트 부분을 참고한다.

<!DOCTYPE html>
<html>
<head>
    <style>
        table,
        td,
        th {
            border: 1px solid black;
        }
    </style>
    <script>
        window.addEventListener('DOMContentLoaded', (event) => {
            let table_1 = document.getElementById('table1');
            let table_2 = document.getElementById('table2');

            table_1.style.borderCollapse = 'separate'; // 이 속성값은 디폴트 값! 즉 적용 안해도 이 속성으로 적용됨!
            table_1.style.borderSpacing = '10px';
            
            table_2.style.borderCollapse = 'collapse';
            table_2.style.borderSpacing = '15px 20px';
        });        
    </script>
</head>

<body>
    <h2>border-collapse: separate (default):</h2>
    <table id="table1">
        <tr>
            <th>첫번째</th>
            <th>두번째</th>
        </tr>
        <tr>
            <td>1-1</td>
            <td>2-1</td>
        </tr>
        <tr>
            <td>1-2</td>
            <td>2-2</td>
        </tr>
    </table>

    <hr>

    <h2>border-collapse: collapse</h2>
    <table id="table2">
        <tr>
            <th>첫번째</th>
            <th>두번째</th>
        </tr>
        <tr>
            <td>1-1</td>
            <td>2-1</td>
        </tr>
        <tr>
            <td>1-2</td>
            <td>2-2</td>
        </tr>
    </table>
</body>
</html>

 

💻 border-color 

// ex) 사용법
element.style.borderColor = '#229955';
element.style.borderColor = 'red';
element.style.borderColor = 'rgba(102, 117, 209, 0.4)';

 

💻 border-left 

// 선굵기(px) 선종류(solid, dotted, dashed, inset, outset, ridge, groove, double) 선색깔(blue, #000 등등)

// ex) 사용법
element.style.borderLeft = '1px solid red';

 

💻 border-left-color 

// ex) 사용법
element.style.borderLeftColor = 'yellow';
element.style.borderLeftColor = '#345354';
element.style.borderLeftColor = 'rgba(201, 33, 282, 0.6)';

 

💻 border-left-style 

// 선종류(solid, dotted, dashed, inset, outset, ridge, groove, double)

// ex) 사용법
element.style.borderLeftStyle = 'outset';

 

💻 border-left-width 

// (thin | medium | thick )
// ex) 사용법
element.style.borderLeftWidth = '10px';
element.style.borderLeftWidth = 'thick';

 

💻 border-radius 

// ex) 사용법
element.style.borderRadius = '30px 10px';
element.style.borderRadius = '50px';
element.style.borderRadius = '20%';

 

💻 border-right 

// 선굵기(px) 선종류(solid, dotted, dashed, inset, outset, ridge, groove, double) 선색깔(blue, #000 등등)

// ex) 사용법
element.style.borderRight = '1px dashed red';

 

💻 border-right-color 

// ex) 사용법
element.style.borderRightColor = 'yellow';
element.style.borderRightColor = '#345354';
element.style.borderRightColor = 'rgba(201, 33, 282, 0.6)';

 

💻 border-right-style 

// 선종류(solid, dotted, dashed, inset, outset, ridge, groove, double)

// ex) 사용법
element.style.borderRightStyle = 'outset';

 

💻 border-right-width 

// (thin | medium | thick )
// ex) 사용법
element.style.borderRightWidth = '10px';
element.style.borderRightWidth = 'thick';

 

💻 border-style 

// 선종류(solid, dotted, dashed, inset, outset, ridge, groove, double)

// ex) 사용법
element.style.borderStyle = 'ridge';

 

💻 border-top 

// 선굵기(px) 선종류(solid, dotted, dashed, inset, outset, ridge, groove, double) 선색깔(blue, #000 등등)

// ex) 사용법
element.style.borderTop = '1px groove red';

 

💻 border-top-color 

// ex) 사용법
element.style.borderTopColor = 'yellow';
element.style.borderTopColor = '#345354';
element.style.borderTopColor = 'rgba(201, 33, 282, 0.6)';

 

💻 border-top-left-radius 

// ex) 사용법
element.style.borderTopLeftRadius = '10%';
element.style.borderTopLeftRadius = '25px';
element.style.borderTopLeftRadius = '25px 100px';

 

💻 border-top-right-radius 

// ex) 사용법
element.style.borderTopRightRadius = '10%';
element.style.borderTopRightRadius = '25px';
element.style.borderTopRightRadius = '25px 100px';

 

💻 border-top-style 

// 선종류(solid, dotted, dashed, inset, outset, ridge, groove, double)

// ex) 사용법
element.style.borderTopStyle = 'dotted';

 

💻 border-top-width 

// (thin | medium | thick )
// ex) 사용법
element.style.borderTopWidth = '10px';
element.style.borderTopWidth = 'thick';

 

💻 border-width 

// (thin | medium | thick )
// ex) 사용법
element.style.borderWidth = '10px';
element.style.borderWidth = 'thick';

 

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

'web 언어 > HTML5 & CSS & Javascript' 카테고리의 다른 글

JS - 자바스크립트(javascript) 만으로 font (폰트) CSS 속성 조작하기  (0) 2022.05.03
JS - 자바스크립트(javascript) 만으로 background (이미지, 위치, 반복, 모드 등등) CSS 속성 조작하기  (0) 2022.04.29
JS - 자바스크립트(javascript) 독립적인 객체(오브젝트, Object) 복사, 복제 하기  (0) 2022.04.27
JS - 자바스크립트(javascript) 동등 연산자 ==, === 이상하다, 혼란스럽다 - (3)  (0) 2022.04.27
JS - 자바스크립트(javascript) 동등 연산자 ==, === 이상하다, 혼란스럽다 - (2)  (0) 2022.04.26

+ Recent posts

티스토리툴바