HTML Tip

HTML 관련 간단한 팁을 정리한다.

box-sizing DIV 크기 정확하게 지정하기

box-sizing의 속성이 몇개 있지만 여기서는 content-box와 border-box만 설명한다.

content-box : 
  • box-sizing의 기본값은 content-box이다.
  • width 와 height 속성은 컨텐츠만 포함한다.,
  • padding, border, margin 은 포함하지 않는다.
border-box:
  • width 와 height 속성이 padding, border를 포함한다.
  • margin은 포함하지 않는다.
  • 박스의 크기를 정확하게 정할수 있다.
box-sizing:border-box;

지정한 요소내에서 id로 요소 찾기

id는 유일하기 때문에 지정한 요소 내에서 getElementById 함수를 사용할수 없다.
querySelector 함수를 사용해서 요소를 찾을수 있다.

getElementsByTagName 함수나 getElementsByClassName 함수 또한 지정한 요소 내에서 사용 할수 있다.

let el = document.getElementById('keyboard_id');
el = document.getElementById('child_id');
let child = el.querySelector('#child_id');

속성 이름을 문자열로 바꾸기

속성 이름으로 문자열을 얻는 방법은 다음과 같다.

let animal = {
    none: 0,
    cat: 1,
    dog: 2
};

function propName(prop, value){
   for(var i in prop) {
       if (prop[i] == value){
            return i;
       }
   }
   return false;
}

let pn = propName(animal, animal.dog);

다음과 같이 문자열을 이용해 속성의 함수를 실행 할수도 있다.
속성이름이 속성 객체에 존재 하는지 체크 후 실행 한다.

let tooltipState = {
    leftMove : function() {
        console.log('tooltipState leftMove');
    },
    rightMove : function() {
        console.log('tooltipState rightMove');
    }
};

let stateText = 'leftMove';
let exist = propName(tooltipState, tooltipState[stateText]);
if(exist) {
    tooltipState[stateText]();
}

결과)
tooltipState leftMove

배열 제거

pop 함수로 값을 제거한다.

let list = [1, 2, 3, 4, 5];
while (list.length > 0)
        list.pop();

자식 요소 모두 제거

let element = document.getElementById('Parent_Id');
while (element.firstChild) {
    element.removeChild(element.firstChild);
}

함수가 존재 하는지 검사하기

function initUi() {
    console.log('run initUI');
}

if(typeof initUi == 'function'){
    initUi();
}

parentElement or parentNode

parentElement :  부모 노드가 없으면 null을 반환한다.
parentNode는 :  부모 노드가 없으면 Document Node를 반환한다.

엘리먼트 복제

cloneNode(true)를 사용하면 요소를 복제 할수 있다.
var cloneElement = srcElement.cloneNode(true);

let srcEl = document.getElementById('keyboard_id');
if(!srcEl.parentElement)
    throw new Error("Parent element does not exist.");
let cloneEl = srcEl.cloneNode(true);
srcEl.parentElement.appendChild(cloneEl);
cloneEl.style.left = '500px';
var elKey = cloneEl.querySelector('#Cursofr_Left');
elKey.textContent = 'CopyTest';

자바스크립트 Object Deep Copy

자바스크립트 Object를 복사한다.

function deepcopy(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }

    const copiedObject = obj.constructor();

    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            copiedObject[key] = deepcopy(obj[key]);
        }
    }

    return copiedObject;
}

테스트 코드

const now = new Date();
let arr = [1, 2, 3, 4, now];
let temp = deepcopy(arr);
temp[0] = 100;
console.log(arr);
console.log(temp);

document to html string

현재 페이지 전체를 HTML 문자열로 변환한다.
디버깅을 위해 HTML로 저장한다.
다음 2가지중에 하나를 실행하면 된다.

console.log(document.getElementsByTagName('html')[0].innerHTML);

  or

console.log(document.documentElement.outerHTML);

What is the difference between the selectors “.class.class” and “.class .class”?

.class1.class2: 두가지 클래스를 함께 사용 할때이다.
<div class="class1 class2">...</div>


.class1 .class2: 공백이 있으면 자식 노드가 있을때 이다.
<div class1="class1">
    <div class2="class2">
        ...
    </div>
</div>

.class1, .class2: 쉼표가 있으면 두 클래스 모두 지정한 스타일을 가질수 있다.

.class1 > .class2: class1의 직계 자손이 class2일때 적용 된다.
<div class1="class1">
    <div class2="class2">
        ...
    </div>
</div>