box-sizing 속성은 기본값으로 content-box 를 가진다. 

즉, 아무 설정을 하지 않으면 box-sizing 속성은 content-box로 설정 된다.

 

content-box

div를 예로들어 설명하겠다.

box-sizing 속성이 content-box일 경우, width든 height든 div 태그에 길이를 설정해주면 브라우저는 

반드시 태그의 길이를 설정한 값에 맞추려고 한다.

무슨말인가 하면 width를 200px으로 설정하고 padding-left을 50px로 설정을 한다면,

 

div 태그내에 왼쪽공간을 50px만큼 padding으로 차지하고 나머지 공간을 150px로 차지하는게 아니라

div 태그 내부 공간 만큼은 반드시 200px를 유지하기 위해 50px만큼 공간을 늘리고 왼쪽 padding을 50px를 주게 된다.

 

즉, div의 전체 width는 50px만큼 늘어나게 된다. 

위 그림의 W3C box model에 해당한다.

 

border-box

content-box와 반대로 width가 설정되어있더라도 padding을 주면 설정값만큼 div의 크기를 늘리는게 아니라

내부 공간을 차지하면서 적용한다. 

즉, div 의 크기를 늘리지 않고 padding을 적용하게 된다.

그림의 Internet Explorer box model에 해당한다.

 

 

저작자표시

in, with 키워드



in키워드

in 키워드를 for 키워드와 따로 사용하면 해당 속성이 객체안에 있는지 검사할 수 있다.

객체안에 해당속성이 있으면 true를, 없으면 false를 반환한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
    <script>
        var car = {
            name : 'BMW520D',
            brand : 'BMW',
            power : '200hp',
            sell : 12000,
            grade : 5
        };
 
        //in 키워드 사용
        alert('name' in car);   //true
        alert('price' in car);  //false
    </script>
cs


in 앞에 확인하고자하는 속성명을, in 뒤에 사용하는 객체명을 적으면 된다.


with 키워드

with 키워드를 사용하면 객체를 좀더 편리하게 사용할 수 있다. 

객체를 생성하고 속성에 접근하기 위해서는 해당 속성을 포함하고 있는 객체명을 써주어야한다.

하지만 with키워드를 이용할 경우 객체명을 생략하여 코드가 간결해진다.

1
2
3
        with(<객체이름>) {
            //코드내용
        }
cs


with 키워드 옆에 괄호를 치고 괄호안에 해당객체의 이름을 넣으면 이 블럭안에서는 객체의 이름을 쓰지 않아도 객체의 속성에 접근할 수 있다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    <script>
        var car = {
            name : 'BMW520D',
            brand : 'BMW',
            power : '200hp',
            sell : 12000,
            grade : 5
        };
 
        
        with(car) {
            alert('name :' + name + '\n');
            alert('brand :' + brand + '\n');
            alert('power : ' + power + '\n');
            alert('sell : ' + sell + '\n');
            alert('grade : ' + grade + '\n');
        }
    </script>
cs


위의 코드와 같이 with키워드를 사용하면 객체명을 쓰지 않아도 속성에 접근할 수 있다.


※ 만약 객체내의 속성과 외부변수의 이름이 같다면 with 키워드 내에서 충돌이 일어난다. 이때는 객체의 속성을 우선시하고, 외부변수를 사용하고자하는 경우 window. 키워드를 변수명 앞에 붙여야한다.

저작자표시

'개발 > JavaScript' 카테고리의 다른 글

[JavaScript] textContent, innerText, innerHTML 비교  (0) 2021.04.18
[JavaScript] 객체의 속성과 메소드  (0) 2018.07.08
[JavaScript] 객체  (2) 2018.07.06
[JavaScript] 클로저  (0) 2018.06.21
[JavaScript] 콜백함수  (0) 2018.06.21

객체와 반복문


생성된 객체내의 모든 속성에 접근하기 위해서 for in 반복문을 사용한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    <script>
        var person = {
            //property
            name : 'jenny',
            years : 24,
            married : false,
 
            //methos
            eat : function(food) {
                alert(this.name + ' eats ' + food); //this키워드 사용
            }
        };
 
        var output = '';
        for(var key in person) {
            output += key + ' : ' + person[key] + '\n';
        }
 
        alert(output);
    </script>
cs



in키워드 다음에 접근하고자 하는 객체명을 써주면, 앞의 변수에 그 객체의 key값이 들어간다. 


key값을 이용하여 객체의 value값에 접근할 수 있다.

저작자표시

+ Recent posts

티스토리툴바