너비, 높이 - width, height / innerWidth, innerHeight / outerWidth, outerHeight

    <style>
        *{margin: 0;padding: 0;}
        #d1{
            width:100px;
            height: 100px;
            padding:30px;
            border:10px solid black;
            margin:30px;
        }
        #d2{
            width:100px;
            height: 100px;
            padding:30px;
            border:10px solid black;
            margin:30px;
            box-sizing: border-box;
        }
    </style>

<body>
    <div id="d1"></div>
    <div id="d2"></div>
</body>

위 html으로 너비,높이를 알아보도록 한다.

d1은 content 영역 100, 100이고 padding, border, margin을 각각 가지고 있다.

    <script>
        $(function(){
            console.log($('#d1').width(),$('#d1').height()); //100, 100
            console.log($('#d1').innerWidth(),$('#d1').innerHeight()); //160, 160
            console.log($('#d1').outerWidth(),$('#d1').outerHeight()); //180, 180
        });
    </script>

width / height

여백, 테두리 제외한 내용영역만 잡는다. 각각 100이 출력되었다.

innerWidth / innerHeight

padding을 포함한 영역이다. 위아래,좌우 30px padding으로 세로는 가로 세로 각각 160이다.

outerWidth / outerHeight

padding, border 까지의 영역 기준으로 180, 180이 된다. margin은 포함되지 않는다.

d2는 내용영역 20, 20이고 여백, 테두리를 가진다.

width : content

        $('#d2').width(100);

width로 내용영역의 너비를 100으로 변경했다. content 영역이 100, 20이 된 것을 확인하였다.

innerWidth : padding + content

        $('#d2').innerWidth(100);

innerWidth를 100으로 설정하였다. 초기 css에서 padding을 30으로 주었기 때문에 양 옆의 padding 30씩 제외하고 content 너비가 40이 되어 총 innerWidth가 100이 되었다.

outerWidth : content + padding + border

        $('#d2').outerWidth(100);

outerWidth를 100으로 설정하였다. 초기 css에서 padding을 30, border을 10으로 주었기 때문에 양 옆의 padding 30과 border 10을 제외하고 content 너비가 20이 되어 총 outerWidth가 100이 되었다.

'WEB > jQuery' 카테고리의 다른 글

jQuery - each() (0)	2022.06.20
자식요소 추가 - append, prepend / 형제요소 추가 - after, before (0)	2022.06.20
jQuery 좌표 : offset() , position() (0)	2022.06.20
val() - attr('value') , html() - text() (0)	2022.06.20
attr('class'), addClass, removeClass, toggleClass, hasClass - 적용된 클래스 조회, 클래스 추가, 클래스 삭제, 클래스 확인 (0)	2022.06.20

Develop Me