Study Record

[JavaScript] 더 높은 수준의 이벤트 처리

초코초코초코 — Fri, 11 Apr 2025 22:57:15 +0900

여러가지 이벤트 처리

이벤트 리스너/이벤트 핸들러 삭제하기

① 이벤트 핸들러 삭제하기

이벤트 핸들러를 삭제하려면 onxxxxx 메소드에 대해 null 값을 설정하기만 하면 된다.

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    var button = document.getElementById('btn');

    // 이벤트 핸들러 등록
    button.onclick = function() {
        window.alert('안녕하세요, 자바스크립트!');
    };

    // 이벤트 핸들러 삭제하기
    button.onclick = null;
}, false);

② 이벤트 리스너 삭제하기

이벤트 리스너를 삭제하려면 removeEventListener 메소드를 이용해야 한다.

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    var button = document.getElementById('btn');
    var listener = function() {
        window.alert("Hello");
    }

    // 이벤트 리스너 등록하기
    button.addEventListener('click', listener, false);

    // 이벤트 리스너 삭제하기
    button.removeEventListener('click', listener, false);
    
}, false);

이벤트 관련 정보 취득하기 - 이벤트 객체

이벤트 리스너/이벤트 핸들러는 인수로 이벤트 객체를 받는다.

① 이벤트 객체 간단한 정보 보기

이벤트 객체를 받으려면 이벤트 리스너에 인수를 지정하기만 하면 된다. 인수명은 'e', 'ev' 가 일반적이다. 이벤트 객체가 필요없다면 생략해도 무방하다

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    var button = document.getElementById('btn');

    // 이벤트 리스너 등록하기
    button.addEventListener('click', function(e) {
        var target = e.target;

        console.log(`이벤트 발생원 : ${target.nodeName} / ${target.id}`);
        console.log(`종류 : ${e.type}`);
    }, false);

}, false);

② 이벤트 발생시 마우스 정보 취득하기

click, mousemove 등의 이벤트가 발생할 때 마우스 포인터의 좌표를 얻을 수 있다.

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    var main = document.getElementById('div-main');

    // 이벤트 리스너 등록하기
    main.addEventListener('click', function(e) {
        main.innerHTML = `screen : ${e.screenX} / ${e.screenY} <br/>`
        + `page : ${e.pageX} / ${e.pageY} <br/>`
        + `client : ${e.clientX} / ${e.clientY} <br/>`
        + `offset : ${e.offsetX} / ${e.offsetX} <br/>`;
    }, false);

}, false);

③ 이벤트 발생 시 키 정보 취득하기

keypress/keydown 등의 키 이벤트는 눌린 키의 종류를 얻을수 있다.

/**
<label for='name'>사이트명: </label><br>
<input type="text" id="name" name="name" size="30" />
 */
// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('url').addEventListener('keydown', function(e) {
        console.log(`키 코드 : ${e.key}`);
    }, false);

}, false);

이벤트 전달과정

이벤트 처리가 호출될 때까지의 과정이 있다. 이벤트 전달 과정에는 총 3단계의 과정이 있다.

+ 문서 트리 구조 예시

window → document → html → body → div → button

① 캡처 단계

최상위의 window 객체에로부터 문서 트리를 따라 하위 요소에 이벤트가 전달되어 간다.

② 타깃 단계

이벤트의 발생원(요소)를 특정한다.

③ 버블링 단계

이벤트의 발생원으로부터 루트 요소를 향해 이벤트가 전달되는 단계이다. 다시 최상위 window 객체까지 거슬러 이벤트의 전달이 종료된다. 부모 노드에 전해지는 모습이 거픔이 떠오르기 때문에 버블링 단계라고 부른다.

예시) 이벤트 리스너는 inner1 → inner2 → main 순으로 실행된 후 디폴트 동작인 링크에 의한 페이지 이동이 처리된다.

/**
<div id="main">
    <a href="http://www.naver.com" id="inner" target="_blank">네이버</a>
</div> 
*/
document.addEventListener('DOMContentLoaded', function() {
    // inner 요소의 click 이벤트 리스너
    document.getElementById('inner').addEventListener('click', function(){
        console.log("inner1 리스너 발생");
    }, false);

    document.getElementById('inner').addEventListener('click', function(){
        console.log("inner2 리스너 발생");
    }, false);

    // main 요소의 click 이벤트 리스너
    document.getElementById('main').addEventListener('click', function(){
        console.log("main 리스너 발생");
    }, false);

}, false);

예시) 기본적으로 버블링 단계에서 이벤트가 처리되고 있지만 addEventListener 메소드의 제 3인수의 값을 true 로 변경하면 반대의 결과를 얻을 수 있다. (main → inner1 → inner2)

/**
<div id="main">
    <a href="http://www.naver.com" id="inner" target="_blank">네이버</a>
</div> */
// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    // inner 요소의 click 이벤트 리스너
    document.getElementById('inner').addEventListener('click', function(){
        console.log("inner1 리스너 발생");
    }, true);

    document.getElementById('inner').addEventListener('click', function(){
        console.log("inner2 리스너 발생");
    }, true);

    // main 요소의 click 이벤트 리스너
    document.getElementById('main').addEventListener('click', function(){
        console.log("main 리스너 발생");
    }, true);

}, false);

이벤트 전달 취소하기

이벤트 전달이나 이벤트 처리에 따른 브라우저의 본래의 동작을 취소하고 싶은 경우가 있다. 이벤트 전달 취소 방법은 다음과 같다.

① stopPropagation 메소드 - 상위 노드로의 이벤트 전달 취소하기

상위 노드의 이벤트 리스너를 무시하고 싶은 경우 stopPropagation 메소드를 사용한다. (inner1 → inner2 → 태그 기본 동작)

/**
<div id="main">
    <a href="http://www.naver.com" id="inner" target="_blank">네이버</a>
</div> */
// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    // inner 요소의 click 이벤트 리스너
    document.getElementById('inner').addEventListener('click', function(e){
        console.log("inner1 리스너 발생");
        e.stopPropagation();
    }, false);

    document.getElementById('inner').addEventListener('click', function(){
        console.log("inner2 리스너 발생");
    }, false);

    // main 요소의 click 이벤트 리스너
    document.getElementById('main').addEventListener('click', function(){
        console.log("main 리스너 발생");
    }, false);

}, false);

② stopImmediatePropagation 메소드 - 이벤트 전달 즉시 취소하기

상위/하위 요소의 전파를 취소하는 반면 동일 요소에 등록된 리스너도 실행하지 않도록 하려면 stopImmediatePropagation 메소드를 이용한다. (inner1 → 태그 기본 동작)

/**
<div id="main">
    <a href="http://www.naver.com" id="inner" target="_blank">네이버</a>
</div> */
// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    // inner 요소의 click 이벤트 리스너
    document.getElementById('inner').addEventListener('click', function(e){
        console.log("inner1 리스너 발생");
        e.stopImmediatePropagation();
    }, false);

    document.getElementById('inner').addEventListener('click', function(){
        console.log("inner2 리스너 발생");
    }, false);

    // main 요소의 click 이벤트 리스너
    document.getElementById('main').addEventListener('click', function(){
        console.log("main 리스너 발생");
    }, false);

}, false);

③ preventDefault 메소드 - 이벤트 본래의 동작 취소하기

이벤트 본래의 동작이란 "a 태그를 클릭하면 페이지를 이동한다", "텍스트 상자에서의 키 누르면 문자 반영하기" 등 브라우저 표준으로 정해진 동작을 뜻한다. 이 이벤트 본래의 동작을 취소하는 것은 preventDefault 메소드를 이용한다.

/**
<div id="main">
    <a href="http://www.naver.com" id="inner" target="_blank">네이버</a>
</div> */
// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    // inner 요소의 click 이벤트 리스너
    document.getElementById('inner').addEventListener('click', function(e){
        console.log("inner1 리스너 발생");
        e.preventDefault();
    }, false);

}, false);

[JavaScript] 스타일 시트 조작하기

초코초코초코 — Fri, 11 Apr 2025 21:12:46 +0900

JavaScript 로 스타일 시트 조작하기

HTML을 조작하는 방법 외에 DOM을 이용하면 스타일 시트를 조작할 수 있다. DOM 으로 스타일 시트를 조작하는 방법에는 인라인 스타일로 액세스하는 방법과 외부의 스타일 시트를 적용하는 방법이 있다.

인라인 스타일로 액세스하기 - style 프로퍼티

인라인 스타일이란 개개의 노드에 대해 설정된 스타일이다.

<div style="color:Red">붉은 문자입니다.</div>

인라인 스타일로 액세스하려면 style 프로퍼티를 사용한다.

elem.style.prop [= value]
// elem : 요소 객체, prop : 스타일 프로퍼티, value: 설정값

예시 코드) 마우스 포인터를 올려놓은 타이밍에 배경색 변경하기

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    var button = document.getElementById('btn');

    // 마우스 포인터가 올라간 타이밍에 배경색을 변환
    button.addEventListener('mouseover', function() {
        this.style.backgroundColor = "yellow";
    }, false);

    // 마우스 포인터가 벗어난 타이밍에 배경색을 되돌림
    button.addEventListener('mouseout', function() {
        this.style.backgroundColor = 'red';
    }, false);

}, false);

외부 스타일 시트 적용하기 - className 프로퍼티

스타일 정의가 스크립트가 혼재되어 버리기 때문에 디자인의 변경 등의 어려움이 있을 수 있으므로 스타일의 정의는 스타일 시트에 하고 스크립트 측에서는 스타일과 관련된 부분만을 바꿀 수 있도록 하는 것이 바람직하다. 외부 스타일 시트로 정의된 스타일(=스타일 클래스)에 액세스하는 것은 className 프로퍼티의 역할이다. HTML 에서 대응하는 것은 class 속성이다.

elem.className [= class];
// elem : 요소 객체, class : 스타일 클래스

예시)

/** css 스타일 시트트
.box {background-color: bisque;}
.highlight {background-color: brown;}
.red {padding: 10px;}
 */

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    var button = document.getElementById('btn');

    // 마우스 포인터가 올라간 타이밍에 배경색을 변환
    button.addEventListener('mouseover', function() {
        this.className = 'box';
    }, false);

    // 마우스 포인터가 벗어난 타이밍에 배경색을 되돌림
    button.addEventListener('mouseout', function() {
        this.className = 'highlight red';
    }, false);

}, false);

예시) 스타일 클래스를 붙이거나 떼어내기

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    var button = document.getElementById('btn');

    button.addEventListener('click', function() {
        this.className = (this.className === 'red' ? '' : 'red');
    }, false);

}, false);

스타일 클래스를 더 간단하게 조작하기 - classList 프로퍼티

classList 프로퍼티를 이용하여 clas 속성의 값을 DOMTokenList 객체로 취득할수 있다.

classList 프로퍼티의 주요 맴버

맴버	개요
length	리스트의 길이
item(index)	인덱스 번호의 클래스 취득
contains(class)	지정한 클래스가 포함되어 있는지 확인
add(class)	리스트에 클래스 추가
remove(class)	리스트로부터 클래스 삭제
toggle(class)	클래스의 on/off 전환

예시) toggle

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    var button = document.getElementById('btn');

    button.addEventListener('click', function() {
        // this.className = (this.className === 'red' ? '' : 'red');
        this.classList.toggle('red');
    }, false);

}, false);

[JavaScript] data-xxxxx 속성과 NodeList 반복 주의점

초코초코초코 — Fri, 11 Apr 2025 20:32:52 +0900

data-xxxxx 속성

data-xxxxx 속성은 개발자가 목적에 따라 값을 자유롭게 값을 설정할 수 있는 특별한 겂이다. 주로 스크립트(이벤트 리스너)에서 사용하기 위한 파라미터를 삽입하기 위한 속성이다. 'xxxxx' 부분은 알파벳 소문자, 하이픈 밑줄 등의 문자를 사용하여 자유롭게 명명할 수 있다. 사용자 정의 데이터 속성이라고도 한다.

<a href="http://www.naver.com" data-ex="0110">네이버</a>
<a href="http://www.google.com" data-ex="0113">구글</a>

HTMLCollection/NodeList 반복 처리 주의점

getElementsByTagName/getElementsByName/getElementsByClassName 메소드는 반환값으로서 HTMLCollection 또는 NodeList 객체를 반환한다. 이 객체들은 살아있는(Live) 객체이다. 살아있다는 것은 객체가 문서 트리를 참조하고 있어 문서 트리로의 변경이 있으면 HTMLCollection/NodeList 객체에도 실시간으로 반영된다.

다음의 예시 코드는 무한루프가 되는 잘못된 예시이다. li 요소 노드들을 모두 가져오는 li 는 새롭게 생성되어지고 있기 때문에 li.length 가 다시 새롭게 갱신되어 for문이 끝나지 않게 된다.

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    var second = document.getElementById('second');
    var li = document.getElementsByTagName('li');

    for(var i=0; i<li.length; i++) {
        var item = li.item(i);
        var new_li = document.createElement('li');
        var new_text = document.createTextNode(item.textContent);

        new_li.appendChild(new_text);
        second.appendChild(new_li);
    }
}, false);

따라서 for문의 조건식을 다음과 같이 바꾸면 루한루프를 방지할 수 있다.

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    var second = document.getElementById('second');
    var li = document.getElementsByTagName('li');

    for(var i=0, len=li.length; i<len; i++) {
        var item = li.item(i);
        var new_li = document.createElement('li');
        var new_text = document.createTextNode(item.textContent);

        new_li.appendChild(new_text);
        second.appendChild(new_li);
    }
}, false);

[JavaScript] 노드를 추가/치환/삭제하기

초코초코초코 — Fri, 11 Apr 2025 17:50:20 +0900

노드 추가/치환/삭제

DOM 으로 기존의 노드에 접근하여 값을 설정하거나 취득할 수 있다. 더 나아가 문서 트리에 새 노드를 추가하거나 기존의 노드를 대체 또는 삭제할 수 있다. innerHTML 프로퍼티로도 HTML 코드를 추가할 수 있지만 좀 더 복잡한 콘텐츠를 추가할 경우를 설명하고 있다.

신규 노드 생성하기

메소드	생성하는 노드
createElement(요소명)	요소 노드
createAttribute(속성명)	속성 노드
createTextNode(텍스트)	텍스트 노드
createCDATASection(텍스트)	CDATA 섹션
createComment(텍스트)	주석 노드
createEntityReference(실체명)	실제 참조 노드
createProcessingInstruction(타깃명, 데이터)	처리 명령 노드
createDocumentFragment()	문서의 단편

예시)

// <a href="http://www.naver.com">네이버</a>
function createListNode() {
    var a = document.createElement('a');
    a.setAttribute('href', 'http://www.naver.com');
    a.appendChild(document.createTextNode("네이버"));

    document.querySelector('body').appendChild(a);
}

+ 속성 추가하기

function createListNode() {
    var a = document.createElement('a');
    
    var attri = document.createAttribute('target');
    var attri2 = document.createAttribute('href');
    
    attri.value = "_blank";
    attri2.value = "http://www.naver.com";

    a.setAttributeNode(attri);
    a.setAttributeNode(attri2);

    a.appendChild(document.createTextNode("네이버"));
    document.querySelector('body').appendChild(a);
}

노드끼리 조립하기

노드를 생성했으면 노드를 조합하는 것으로 문서에 추가하는 작업이 가능하다.

① appendChild 메소드

appendChild 메소드는 추가된 순서대로 제일 마지막 자식 요소로서 지정된 요소를 추가한다. 다음 예시는 <body> 태그 맨 마지막 자식 요소로 a 노드가 추가된다.

document.querySelector('body').appendChild(a);

② insertBefore 메소드

insertBefore(n1, n2) 메소드는 n2 앞에 n1 노드를 배치한다.

예시) parent-btn 요소 앞에 br 태그 배치

var br = document.createElement('br');
var btn = document.getElementById('parent-btn');
document.querySelector('body').insertBefore(br, btn);

예시) body 태그의 마지막 자식 요소로 p 태그 배치

var p = document.createElement('p');
p.textContent = "HEllo";
document.querySelector('body').insertBefore(p, null);

예시) body 태그의 첫번째 자식 요소로 p 태그 배치

var body = document.querySelector('body');
var p = document.createElement('p');
p.textContent = "HEllo";

body.insertBefore(p, body.firstChild);

복잡한 콘텐츠를 작성하는 경우 - DocumentFragment 객체

복잡한 콘텐츠를 작성하는 경우 DOM 문서에 appendChild 함수를 호출하여 노드를 추가하는 것은 가벼운 작업이 아니기 때문에 자제하는 것이 좋다. 이 때, DocumentFragment 객체에 콘텐츠를 조립한 후 함께 문서 트리에 추가하는 방법이 바람직하다. DocumentFragment 객체는 문서의 조각이며, 조립한 노드를 일시적으로 보관하기 위한 그릇이다.

예시) <ul id="list"> 태그에 목록(li)태그 생성하기

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    
    createListNode(['치킨', '만두', '라면', '디저트', '커피']);

}, false);

function createListNode(listValue) {
    var frag = document.createDocumentFragment();

    for(var i=0; i<listValue.length; i++) {
        var element = document.createElement('li');

        element.textContent = listValue[i];

        frag.appendChild(element);
    }

    document.getElementById('list').appendChild(frag);
}

노드 치환하기

자식 노드를 치환하는 것은 replaceChild 메소드의 역할이다. 두번째 인수의 노드를 첫번째 인수의 노드로 바꾼다.

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    
    var parent = document.getElementById('bin-ex');
    var after = createNode();

    parent.replaceChild(after, parent.firstChild);
}, false);

노드 삭제하기

자식 노드를 삭제하는 것은 removeChild 메소드의 역할이다. 인수로 삭제 대상의 노드 값이 들어간다.

var parent = document.getElementById('bin-ex');
parent.removeChild(parent.firstChild);

[JavaScript] 폼 요소에 액세스하기

초코초코초코 — Thu, 10 Apr 2025 21:00:15 +0900

폼 요소에 액세스하기

자바스크립트에서 폼(form)은 사용자의 입력을 받는 대표적인 수단이다. 이러한 폼에서 값을 취득하고 설정하는 방법을 알아본다.

입력 상자/선택 상자의 값 취득하기

입력 상자/선택 상자의 값을 취득하는 방법은 value 프로퍼티에 액세스하기만 하면 된다. 설정하는 것도 value 프로퍼티의 값을 변경하면 된다.

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('btn').addEventListener('click', function() {
        var name = document.getElementById('name');
        // 입력 상자 값 취득하기
        console.log(name.value);
        // 입력 상자 갑 설정하기
        // name.value = "Hello";
    }, false);
}, false);

체크 상자의 값 취득하기

<div>
    좋아하는 음식은?
    <label><input type="checkbox" name="food" value="라면">라면</label>
    <label><input type="checkbox" name="food" value="치킨">치킨</label>
    <label><input type="checkbox" name="food" value="초코타르트">초코타르트</label>
    <input type="button" value="송신" id="btn">
</div>

체크 상자의 값을 취득하는 방법은 다음과 같다.

document.addEventListener('DOMContentLoaded', function() {
    
    document.getElementById('btn').addEventListener('click', function(){
        // 선택값 보관을 위한 배열
        let result = [];
        var foodsNode = document.getElementsByName('food');

        // 체크 박스 검색하여 체크 상태가 있는지 확인
        for(var i=0; i < foodsNode.length; i++) {
            var food = foodsNode.item(i);

            if(food.checked) {
                result.push(food.value);
            }
        }

        window.alert(result.toString());
    }, false);

}, false);

라디오 버튼의 값 취득하기

<div>
    좋아하는 음식은?
    <label><input type="radio" name="food" value="라면">라면</label>
    <label><input type="radio" name="food" value="치킨">치킨</label>
    <label><input type="radio" name="food" value="초코타르트">초코타르트</label>
    <input type="button" value="송신" id="btn">
</div>

라디오 버튼의 값 취득은 체크 박스에서 값을 취득하는 것과 비슷하다.

document.addEventListener('DOMContentLoaded', function() {
    
    var getRadioValue = function() {
        // 선택값 보관을 위한 배열
        let result = '';
        var foodsNode = document.getElementsByName('food');

        // 체크 박스 검색하여 체크 상태가 있는지 확인
        for(var i=0; i < foodsNode.length; i++) {
            var food = foodsNode.item(i);

            if(food.checked) {
                result = food.value;
            }
        }
        return result;
    }

    // 버튼 클릭시 getRadioValue 함수 실행
    document.getElementById('btn').addEventListener('click', function(){
        window.alert(getRadioValue());
    }, false);

}, false);

라디오 버튼/체크 상자의 값 설정하기

라디오 버튼과 체크 상자의 초기값을 설정하는 것은 for 루프에서 개별 요소에 액세스하여 초기값에 해당하는 요소에 checked 표로퍼티를 true 로 설정하면 된다.

① 라디오 버튼 값 설정하기

<div>
    좋아하는 음식은?
    <label><input type="radio" name="food" value="치킨">치킨</label>
    <label><input type="radio" name="food" value="만두">만두</label>
    <label><input type="radio" name="food" value="음료수">음료수</label>
</div>

동일 이름의 라디오 버튼에서는 그중 하나를 체크 상태로 하면 다른 버튼의 체크는 해제된다. 따라서 일치된 요소가 발견된 곳에서 for 루프를 탈출해도 무방하다.

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    
    var setRadioValue = function(name, value) {
        var element = document.getElementsByName(name);

        for(var i=0; i<element.length; i++) {
            var elem = element.item(i);

            if(elem.value === value) {
                elem.checked = true;
                break;
            }
        }
    }
    
    setRadioValue('food', '치킨');
}, false);

② 체크 상자의 값 설정하기

<div>
    좋아하는 음식은?
    <label><input type="checkbox" name="food" value="치킨">치킨</label>
    <label><input type="checkbox" name="food" value="만두">만두</label>
    <label><input type="checkbox" name="food" value="음료수">음료수</label>
</div>

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    
    var setCheckValue = function(name, value) {
        var element = document.getElementsByName(name);

        for(var i=0; i<element.length; i++) {
            var elem = element.item(i);

            if(value.indexOf(elem.value) > -1) {
                elem.checked = true;
            }
        }
    }
    
    setCheckValue('food', ['치킨', '음료수']);
}, false);

복수 선택 리스트 상자의 값 취득하기/설정하기

<div>
    <label for="food">좋아하는 음식은?</label>
    <select id="food" multiple>
        <option value="라면">라면</option>
        <option value="만두">만두</option>
        <option value="디저트">디저트</option>
    </select>
    <input type="button" value="송신" id="btn" />
</div>

① 리스트 선택 상자의 값 취득하기

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    
    var getSelectValue = function(name) {
        var result = [];
        var opts = document.getElementById(name).options;

        for(var i=0; i<opts.length; i++) {
            var opt = opts.item(i);

            if(opt.selected) {
                result.push(opt.value);
            }
        }
        
        return result;
    }
    
    document.getElementById('btn').addEventListener('click', function() {
        window.alert(getSelectValue('food'));
    }, false);
}, false);

② 리스트 선택 상자의 값 설정하기

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    
    var setSelectValue = function(name, value) {
        var opts = document.getElementById(name).options;

        for(var i=0; i<opts.length; i++) {
            var opt = opts.item(i);

            if(value.indexOf(opt.value) > -1) {
                opt.selected = true;
            }
        }
    }
    
    setSelectValue('food', ['라면', '만두'])
}, false);

업로드된 파일의 정보 취득하기

<form>
    <label for="file">파일: </label>
    <input type="file" name="file" id="file" multiple />
</form>

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    
    document.getElementById('file').addEventListener('change', function() {
        var inputs = document.getElementById('file').files;

        for(var i=0; i<inputs.length; i++) {
            var input = inputs[i];

            console.log(`파일 명 : ${input.name}`);
            console.log(`종류 : ${input.type}`);
            console.log(`사이즈 : ${input.size / 1024} KB`);
            console.log(`최종갱신일 : ${input.lastModifiedDate}`);
        }
    }, true);
}, false);

[JavaScript] 속성값 취득/설정하기

초코초코초코 — Thu, 10 Apr 2025 20:33:47 +0900

속성값 컨트롤하기

스크립트로 페이지를 조작하는 방법이다.

요소 노드 속 같은 이름의 프로퍼티로 액세스 가능

대부분의 요소 노드에 액세스했다면 속성값에 액세스하는 것은 간단하다. 대부분의 속성은 요소 노드 속의 동일한 이름의 프로퍼티로 액세스가 가능하기 때문이다.

var naver = document.getElementsByClassName('naver');
// 속성값 취득
console.log(naver[0].href);

// 속성값 변경
naver[0].href = "http://www.google.com";

하지만 그렇지 않은 경우도 있다. CSS 클래스를 나타내는 속성명은 'class' 이지만 DOM 프로퍼티는 'className'이다.

var naver = document.getElementsByClassName('naver');
// 속성값 취득
console.log(naver[0].className);

// 속성값 변경
naver[0].className = "banana";

속성명과 프로퍼티의 차이를 고려하지 않고 속성값에 접근하기(getAttribute/setAttribute)

속성과 프로퍼티의 이름의 차이를 의식하지 않고 싶다면 getAttribute/setAttribute 메소드를 사용하면 된다.

var naver = document.getElementsByClassName('naver');

var target = naver[0].getAttribute('target');
console.log(target);   // _blank

naver[0].setAttribute('href', "http://www.naver.com");

불특정 속성 취득하기

특정 요소 노드에 속하느 모든 속성을 취득하고 싶은 경우에는 attributes 프로퍼티를 사용한다. 꺼낸 속성의

var node = document.querySelector('[value="english"]');

var attrs = node.attributes;

// 모든 속성 검색
for(var i=0; i<attrs.length; i++) {
    var attr = attrs.item(i);
    console.log(`${attr.name} : ${attr.value}`);
}

텍스트 취득 및 설정하기

요소 아래의 텍스트를 취득 및 설정하려면 innerHTML/textContent 속성을 이용한다. innerHTML 속성은 HTML로 텍스트를 삽입하고 textContent 는 모든 텍스트를 문자열로 인식하는 것이 차이점이다.

var node = document.querySelector('.button');
var node2 = document.querySelector('.button2');

node.textContent = "<i>버튼</i>";    // 문자열 그대로 반영
node2.innerHTML = "<i>버튼</i>";     // 이텔릭 체로 버튼 텍스트만 반영

문자열을 취득하는 과정에서도 innerHTML 프로퍼티는 대상 요소 아래를 HTML 문자열로 반환한다. 반면 textContent 속성은 자식 요소 각각에서 텍스트만 추출하여 연결한 것을 반환한다.

[JavaScript] DOM의 기본과 클라이언트 측 JavaScript 의 기본 지식

초코초코초코 — Thu, 10 Apr 2025 01:21:48 +0900

DOM

외부 서비스에서 어떤 입력을 받아 이를 처리한 결과를 페이지에 반영시킨다는 흐름이 자바스크립트의 흐름이다. 결과를 페이지에 반영시킨다는 것은 HTML을 JavaScript에서 편집한다는 뜻이다.

DOM 은 마크업 언어로 작성된 문서에 액세스하기 위한 표준적인 구조로 JavaScript에 한정하지 않고 현재 주로 사용되는 언어의 대부분에서 지원하고 있다.

DOM 은 문서를 문서 트리로서 취급한다. DOM 이라는 이름처럼 문서에 포함되는 요소나 속성, 텍스트를 각각 객체로 보기 때문에 객체의 집합(계층 관계)이 문서라고 생각한다.

문서를 구성하는 요소나 속성, 텍스트 등의 객체를 노드라고 부른다. 종류에 따라 요소 노드, 속성 노드, 텍스트 노드 등으로 부른다.

DOM 은 노드를 추출, 추가, 치환, 삭제하기 위한 범용적인 수단을 제공하는 API라고 할 수 있다. 각각의 노드는 트리상에서의 상하 관계에 따라 루트 노드, 부모 노드, 자식노드, 형제노드로 불리기도 한다.

JavaScript 사전 지식

자바스크립트에서 가장 먼저 파악해야할 부분은 요소 노드 취득, 문서 트리 간의 왕래, 이벤트 구동 모델이다.

요소 노드 취득하기

ID값을 키값으로 노드 취득하기(getElementById 메소드)

취득하고 싶은 요소가 명확한 경우 getElementById 메소드를 이용한 방법이 가장 간단하다.

<span id="result">사랑해</span>

자바스크립트에서 ID 값에 접근하기

const result = document.getElementById('result');
result.textContent = "Hello";

태그명으로 키값으로 노드 취득하기(getElementsByTagName 메소드)

태그명으로 값을 가져오는 것은 복수의 요속 서로 일치할 가능성이 있기 때문에 getElementsByTagName 메소드의 반환값은 요소의 집합이 된다. 인수 name 부분에 *를 지정하면 모든 요소를 겁색할 수 있게 된다.

예시는 <a>태그를 모두 가져오는 예시이다. length 멤버로 가져온 태그의 개수를 알 수 있고 item(i) 벱어로 노드를 취득할 수 있다.

var alist = document.getElementsByTagName('a');

for(var i=0; i < alist.length; i++) {
    console.log(alist.item(i).href);
    // 대괄호로도 구분 가능하다
    console.log(alist[i].href);
}

name 속성을 키로 요소 취득하기(getElementsByName 메소드)

name 속성을 키로 요소를 취득하는 메소드는 getElemetsByName 메소드이다. 일반적으로 <input> 태그나 <select> 태그와 같은 폼 요소에서의 액세스에서 이용한다.

예시)

<input type="text" size="10" id="time" name="time-ex"/>

var current = new Date();
var nam = document.getElementsByName('time-ex');
nam[0].value = current.toLocaleTimeString();

class 속성을 키로 요소 취득하기(getElementsByClassName 메소드)

class 속성을 키로 하여 요소에 접근할 수 있다.

예시)

<ul>
    <li><p class="ex">Hello</p></li>
    <li><p class="ex strong">Hello2</p></li>
    <li><p class="ex">Hello3</p></li>
</ul>

var alist = document.getElementsByClassName('ex');
// var alist = document.getElementsByClassName('ex strong');

for(var i=0; i < alist.length; i++) {
    console.log(alist.item(i).textContent);
    // 대괄호로도 구분 가능하다
    console.log(alist[i].textContent);
}

셀렉터 식에 일치하는 요소 취득하기(querySelector / querySelectorAll 메소드

특정 이름/속성값을 키로 HTML 요소를 검색하는 것보다 복잡한 조건으로 검색할 수 있다. 단, 속도가 느리다. querySelector 메소드는 조건에 맞는 처음의 하나 요소를 가져오고 querySelectorAll 메소드는 전부다 가져온다.

사용할 수 있는 셀렉터 식

셀렉터	개요	예
*	모든 요소 취득	*
#id	지정한 ID의 요소 취득	#main
.class	지정한 클래스명의 요소 취득	.external
elem	지정한 태그명 요소 취득	li
select1, select2, selectX	해당하는 셀렉터에 일치하는 요소 모두 취득	#main, li
parent > child	parent 요소의 자식 요소 child 취득	#main > div
ancestor descendant	ancestor 요소의 자식 요소 descendant 모두 취득	#list li
[attr]	지정한 속성을 가진 요소 취득	input[type]
[attr = value]	속성이 value 값과 동등한 요소 취득	input[type="button"]

예시)

var list = document.querySelectorAll('#list p');
var only = document.querySelector('.strong');

for(var i=0; i < list.length; i++) {
    console.log(list.item(i).textContent);
    // 대괄호로도 구분 가능하다
    console.log(list[i].textContent);
}

console.log(only.textContent);

문서 트리 사이 오가기 - 노드 워킹

문서 전체에서 원하는 요소를 검색하는 것은 낭비가 심하기 때문에 성능 저하의 원인이 될 수 있다. 따라서 DOM 에서는 노드를 기점으로 상대적인 위치 관계에서 노드를 검색할 수도 있다. 트리 모양이 된 노드 사이를 가지를 따라 이동하는 모습 때문에 노드 워킹이라고도 불린다.

기본 예시의 다음 코드는 다음과 같다. childNodes 로 자식 노드들을 가져온다.

/**
    <ul id="list">
        <li>Hello</li>
        <li>Hello2</li>
        <li>Hello3</li>
    </ul>
 */

// <ul id="list"></ul> 취득
var list = document.getElementById("list");

// list 의 자식 노드 취득득
var listOption = list.childNodes;

for(var i=0; i < listOption.length; i++) {
    var option = listOption[i];
    // 자식 요소가 노드인 경우에만 값을 표시한다.
    if(option.nodeType === 1) {
        console.log(option.textContent);
    }
}

개행이나 공백은 텍스트 노드로 간주된다. 따라서 childNodes 로 가져온 노드들 중에는 텍스트 노드와 요소 노드가 섞여 취득할 가능성이 있다. 요소 노드만 접근하고 싶은 경우에는 가져온 노드가 요소 노드인지 확인할 필요가 있다.

노드의 종류

반환값	개요	반환값	개요
1	요소 노드	6	실제 선언 노드
2	속성 노드	7	처리 명령 노드
3	텍스트 노드	8	주석 노드
4	CDATA 섹션	9	문서 노드
5	실제 참조 노드	10	문서형 선언 노드
11	문서의 단편	12	가변 선언 노드

예시) firstChild 와 nextSibling 프러퍼티

// <ul id="list"></ul> 취득
var list = document.getElementById("list");

// list 의 자식 노드 취득득
var child = list.firstChild;

while(child) {
    if(child.nodeType === 1) {
        console.log(child.textContent);
    }

    // 다음의 자식 노드를 취득
    child = child.nextSibling;
}

예시) firstElementChild 와 nextElementSibling 프로퍼티

firstElementChild 프로퍼티는 밑의 자식 요소를 반환하고 nextElementSibling 프로퍼티는 다음 형제 요소를 반환한다. 반환값이 Element(요소)이기 대문에 nodeType 판정 과정이 불필요하다.

// <ul id="list"></ul> 취득
var list = document.getElementById("list");

// list 의 자식 노드 취득득
var child = list.firstElementChild;

while(child) {
    console.log(child.textContent);
    // 다음의 자식 노드를 취득
    child = child.nextElementSibling;
}

이벤트 트리거로 한 처리 실행하기 - 이벤트 구동 모델

브라우저로 표시되는 페이지상에서는 다양한 이벤트가 발생한다. 버튼이 클릭되거나 마우스 포인터가 문자열 위에 있거나 텍스트 박스의 내용이 변경되거나 등이 있다. 클라이언트 측 JavaScript 에서는 해당 이벤트에 따라 실행하는 코드를 작성하는 것이 특징이다. 이 프로그래밍 모델을 이벤트 드리븐 모델(이벤트 구동 모델)이라고 부른다.

1. 태그 내의 속성으로 선언하기(이벤트 핸들러)

HTML 코드 내에서 이벤트 핸들러를 사용한다. 가장 간단한 이벤트 트리거 방법이다.

<태그명 on이벤트명="Javascript의 코드">

예시)

<input type="button" value="다이얼로그" onclick="javascript:window.alert('Hello')">

예시)

function btn_click() {
    console.log('버튼 클릭됨');
    window.alert('버튼 클릭됨');
}

<input type="button" value="다이얼로그" onclick="btn_click()">

2. 요소 객체의 프로퍼티로 선언하기(이벤트 핸들러)

개별 요소의 이벤트 핸들러는 onload 이벤트 핸들러 아래에 기술해야한다.

// 페이지 로드가 되었을 때 실행한다.
window.onload = function() {
    document.getElementById("alert").onclick = function() {
        window.alert('Hello!');
    }
}

+ 페이지 로드 전에 getElementById 메소드를 호출할 경우 원하는 요소를 가져올 수 없다.

3. addEventListener 메소드로 선언하기(이벤트 리스너)

이벤트 리스너는 동일 요소의 동일 이벤트에 관해 복수로 연관시킬 수 있는 이벤트 핸들러이다.

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    // 버튼 클릭시 실행되는 이벤트 리스너 등록하기
    document.getElementById("alert").addEventListener('click', function() {
        window.alert('버튼 클릭');
    }, false);
}, false);

+ onload 이벤트 핸들러와 DOMContentLoaded 이벤트 리스너의 차이점

onload 이벤트 핸들러는 콘텐츠 본체와 모든 이미지가 로드된 후에 실행되고 DOMContentLoaded 이벤트 리스너는 콘텐츠 본체가 로드된 후에 실행되지만 이미지의 로드를 기다리지 않는다. 대개의 처리는 이미지의 로드를 기다릴 필요가 없으므로 DOMContentLoaded 이벤트 리스너를 이용하여 스크립트의 시작 타밍을 앞당길 수 있다.(기본)

반응형 웹 디자인과 그리드 레이아웃

초코초코초코 — Wed, 9 Apr 2025 00:22:49 +0900

반응형 웹 디자인

웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법이다. 다양한 화면 크기의 모바일 기기들의 웹 사이트를 표시하면 화면 디스플레이 값이 다양해지고 있는 때에 화면 크기에 반응해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것이 바로 반응형 웹 디자인이다.

단, 반응형 웹 기술이 최신 웹 표준인 CSS3의 일부 최신 모던 웹 브라우저에서만 지원된다.

뷰포트(viewPort)

뷰포트란 실제 내용이 표시되는 영역을 뜻한다. PC 화면과 모바일 화면의 픽셀 표시 방법이 다르기 때문에 모바일 화면에서 의도한대로 표시되지 않는다. 뷰포트를 지정하면 기기 화면에 맞춰 확대/축소해서 내용을 표시한다.

뷰포트 지정하기

<head> 태그 안에서 <meta> 태그를 이용해 뷰포트를 지정한다.

<meta name="viewport" content="<속성1=값>, <속성2=값>">

사용할 수 있는 속성값

속성	설명	사용 가능한 값	기본 값
width	뷰포트 너비	device-width 또는 크기	브라우저 기본 값
height	뷰포트 높이	device-height 또는 크기	브라우저 기본 값
user-scalable	확대/축소 가능 여부	yes 또는 no	yes
initial-scale	초기 확대/축소 값	1~10	1
minimum-scale	최소 확대/축소 값	0~10	0.25
maximum-scale	최대 확대/축소 값	0~10	1.6

일반적인 사용법

<meta name="viewport" content="width=device-width, initial-scale=1">

그리드 시스템(grid system)

화면을 여러 개의 칼럼(column)으로 나누어, 필요할 때마다 칼럼들을 묶어 배치하는 방법이다. 화면 너비 값에 따라 '960 그리드 시스템', '1200 그리드 시스템' 등으로 나뉜다.

칼렘 개수에 따라 '12 칼럼 그리드 스시템', '16 칼럼 그리드 시스템', '24 칼럼 그리드 시스템' 등으로 나뉜다. 주로 960 픽셀 12칼럼의 그리드 시스템을 사용한다.

고정 그리드 : 화면 너비를 일정하게 고정하고 레이아웃을 만든다.
가변 그리드 : 화면 너비를 % 같은 가변 값으로 지정한다.

가변 그리드 레이아웃을 사용할 경우, 너비 값이 줄어들면 실제 콘텐츠를 확인하기 불편하므로 가능하면 간결한 디자인을 사용하는 것이 좋다.

고정 그리드 레이아웃

문서의 맨 바깥 부분을 #wrapper 요소로 묶고 너비를 960px로 지정한다. 헤더와 본문, 사이드바, 퓨터를 배치하고 이때 너비는 px 값으로 지정한다. 화면 너비가 좁아질 경우 내용의 일부가 가려질 수 있다. 스크롤에 따라(화면 너비 값에 따라) 요소들이 가변적으로 변하지 않기 때문에 가려지는 부분이 생긴다.

예시)

#wrapper {
    width: 960px;
    margin: 0 auto;
}

header {
    width: 960px;
    height: 120px;
    background-color: cornflowerblue;
}

.content {
    float: left;
    width: 600px;
    padding: 15px;
    height: 400px;
    background-color: burlywood;
}

.right-side {
    float: right;
    width: 300px;
    padding: 15px;
    height: 400px;
    background-color: aquamarine;
}

footer {
    clear: both;
    width: 960px;
    height: 120px;
    background-color: brown;
}

<div id="wrapper">
    <header>고정 그리드</header>
    <section class="content">
        본문
    </section>
    <aside class="right-side">
        오른쪽 사이드
    </aside>
    <footer>
        footer
    </footer>
</div>

가변 그리드 레이아웃

전체를 감싸는 요소의 너비를 %로 변환한다. 화면에 꽉 차게 하고 싶다면 100%로 지정하고 여유를 두려면 적당히 지정한다. 전체를 감싸는 요소의 너비를 기준으로 각 요소의 너비를 계산한다.

(요소의 너비 / 콘텐츠 전체를 감싸는 요소의 너비) * 100

예시)

#wrapper {
    width: 96%;
    margin: 0 auto;
}

header {
    width: 100%;
    height: 120px;
    background-color: cornflowerblue;
}

.content {
    float: left;
    width: 62.5%;
    padding: 1.56%;
    height: 400px;
    background-color: burlywood;
}

.right-side {
    float: right;
    width: 31.25%;
    padding: 1.56%;
    height: 400px;
    background-color: aquamarine;
}

footer {
    clear: both;
    width: 100%;
    height: 120px;
    background-color: brown;
}

<div id="wrapper">
    <header>고정 그리드</header>
    <section class="content">
        본문
    </section>
    <aside class="right-side">
        오른쪽 사이드
    </aside>
    <footer>
        footer
    </footer>
</div>

가변 그리드 레이아웃에 따른 가변 글꼴 사용하기

화면이 가변적으로 표시될 때 글꼴은 어떻게 사용해야 하는지 알아야 한다. 픽셀크기는 PC 브라우저에서와 모바일에 표시되는 크기가 달라진다. 따라서 픽셀이 아닌 em 단위나 rem 단위를 사용해야한다.

가변 그리드 레이아웃에 따른 가변 이미지 사용하기

가변 이미지는 브라우저 창의 너비가 변하더라도 이미지 너비 값은 변하지 않는다. 브라우저 화면 너비를 줄일 경우 이미지 일부가 가려진다. 가변 이미지로 만들면 창의 너비에 따라 이미니 너비도 조절된다.

가변 이미지 CSS를 이용하여 표시하기

이미지를 감싸고 있는 부모 요소만큼만 커지거나 작아지도록 max-width 속성 값을 100% 지정한다. 이 방법은 고해상도로 지정하면 PC에서나 모바일에서나 같은 파일 크기를 가지기 때문에 추천하는 방법은 아니다.

.content img {
    max-width: 100%;
    height: auto;
}

<img> 태그와 srcset 속성으로 가변 이미지 표시하기

화면 너비 값이나 픽셀 밀도에 따라 고해상도의 이미지 파일을 지정할 수 있다.

// 픽셀 밀도가 2배인 화면(고해상도의 화면)일 경우 pencil-hd.jpg 이미지를 표시한다. 
<img scr="image/pencil.jpg" srcset="image/pencil-hd.jpg 2x">

<picture> 태그와 <source> 태그로 가변 이미지 표시하기

화면 해상도뿐만 아니라 화면 너비에 따라 다른 이미지 파일을 표시한다.

<picture>
    <source srcset="image/ex-large.jpg" media="(mid-width: 1024px)">
    <source srcset="image/ex-medium.jpg" media="(mid-width: 760px)">
    <source srcset="image/ex-small.jpg" media="(mid-width: 320px)">
    <img src="image/ex.jpg" alt="fill with coffee" style="width: 100%;">
</picture>

가변 그리드 레이아웃에 따른 가변 비디오 사용하기

가변 비디오는 CSS를 사용해 max-width 속성을 100%로 지정한다.

<style>
    video { max-width: 100%; }
</style>

<video autoplay loop src="assets/cars.mp4"> </video>

CSS 애니메이션

초코초코초코 — Mon, 7 Apr 2025 22:30:28 +0900

CSS 애니메이션

변형(transform) 이란 특정 요소의 크기나 형태 등 스타일이 바뀌는 것을 말한다. 2차원 변형은 수평이나 수직으로 웹 요소가 변형되는 것으로 크기나 각도만 지정하면 된다. 2차원 좌표를 사용한다. 3차원 변형은 x축과 y축에 원근감을 추가한다. z축은 앞뒤로 이동하고 보는 사람쪽으로 다가올수록 값이 더 커진다.

translate 함수

지정한 방향으로 이동할 거리를 지정하면 해당 요소를 이동시킨다.

transform:translate(tx, ty) : x축 방향으로 tx만큼, y축 방향으로 ty만큼 이동한다. 
transform:translate3d(tx, ty, tz) : x축 방향으로 tx만큼, y 축 방향으로 ty만큼, z축 방향으로 tz만큼 이동
transform:translateX(tx) : x축 방향으로 tx만큼 이동
transform:translateY(ty) : y축 방향으로 ty만큼 이동
transform:translateZ(tz) : z축 방향으로 tz만큼 이동

예시)

h4:hover { transform: translateX(20px); }
p:hover { transform: translate(10px, 20px); }

Scale 함수

지정한 크기만큼 요소를 확대하거나 축소한다.

transform: scale(tx, ty) : x축 방향으로 tx만큼, y축 방향으로 ty만큼 확대한다. 
transform: scale3d(tx, ty, tz) : x축 방향으로 tx만큼, y 축 방향으로 ty만큼, z축 방향으로 tz만큼 확대
transform: scaleX(tx) : x축 방향으로 tx만큼 확대
transform: scaleY(ty) : y축 방향으로 ty만큼 확대
transform: scaleZ(tz) : z축 방향으로 tz만큼 확대

예시)

.scale1 img:hover {
    transform: scaleX(1.2);
}

.scale2 img:hover {
    transform: scale(0.7);
}

<div class="scale1">
    <img src="img/cake.jpg" alt="케이크" width="300px">
</div>

<div class="scale2">
    <img src="img/background.jpg" alt="배경" width="300px">
</div>

rotate 함수

각도만큼 웹 요소를 시계 방향이나 시계 반대 방향으로 회전한다. 일반 각도(degree)나 radian 값을 사용한다.

transform: rotate(각도)
transform: rotate3d(rx, ry, 각도)
transdorm: rotateX(각도)
transdorm: rotateY(각도)
transdorm: rotateZ(각도)

예시)

.rotate1 img:hover {
    transform: rotate(-40deg);
}

.rotate2 img:hover {
    transform: rotate(20deg);
}

.rotate3 img:hover {
    transform: rotate3d(2.5, 1.2, -1.5, 45deg);
}

<div class="rotate1">
    <img src="img/cake.jpg" alt="케이크" width="300px">
</div>

<div class="rotate2">
    <img src="img/background.jpg" alt="배경" width="300px">
</div>

<div class="rotate3">
    <img src="img/cake.jpg" alt="배경" width="300px">
</div>

skew 함수

요소를 지정한 각도만큼 비틀어 왜곡시킨다.

transform: skew(ax, ay) : 첫번째 각도는 x축을 따라 당기고 두번째 각도는 y축을 따라 당기는 각도이다.
transform: skewX(ax) : x축을 따라 비튼다.
transform: skewY(ay) : y축을 따라 비튼다.

예시)

<style>
    .skew1 img:hover {
        transform: skew(30deg);
    }
</style>

<div class="skew1">
    <img src="img/cake.jpg" alt="케이크" width="300px">
</div>

transform-origin 속성

특정 지점을 변형의 기준으로 설정한다.

transform-origin: <x축> <y축> <z축> | initial | inherit;

/*
<x축> : 원점 기준의 x좌표값으로 길이 값이나 백분율, left, center, right 중 하나를 사용할 수 있다.
<y축> : 원점 기준의 y좌표값으로 길이 값이나 백분육, top, center, bottom 중에서 선택할 수 있다.
<z축> : 원점 기준의 z좌표값으로 길이 값만 사용할 수 있다.
*/

예시)

.origin-x img:hover {
    transform-origin: left top;
    transform: rotateZ(10deg);
}

.origin-y img:hover {
    transform-origin: right top;
    transform: rotateZ(10deg);
}

<div class="origin-y">
    <img src="img/cake.jpg" alt="케이크" width="300px">
</div>

<div class="origin-x">
    <img src="img/cake.jpg" alt="배경" width="300px">
</div>

perspective 속성

perspective 속성은 원근감을 갖게 하는 속성이다. 속성은 0보다 크며 값이 클수록 사용자부터 멀어진다.

perspective: <크기> | none;

/*
<크기> : 원래 위치에서 사용자가 있는 방향으로 얼마나 이동하는지를 픽셀 크기로 지정한다.
none : perspective 를 지정하지 않는다. 기본값이다.
*/

perspective-origin 속성

입체적으로 표현할 요소의 아랫부분(bottom) 위치를 지정한다. 좀 더 높은 곳에서 원근을 조절하는 듯한 느낌을 갖게 한다.

perspective-origin: <x축값> | <y축값>;

/*
<x축값> : 웹 요소가 x 축에서 어디에 위치하는지를 지정한다. 사용할 수 있는 값은 길이 값이나 백분율,
left, right, center 이다. 기본값은 50%.
<y축값> : 웹 요소가 y 축에서 어디에 위치하는지를 지정한다. 길이 값이나 백분율, 
top, bottom, center 값ㅇ르 사용할 수 있다. 기본값은 50% 이다.
*/

transform-style 속성

부모 요소에 적용한 3D 변형을 하위 요소에도 적용한다.

transform-style: flat | preserve-3d;

/* 
flat : 하위 요소를 평면으로 처리한다.
preserve-3d : 하위 요소들에 3D 효과를 적용한다.
*/

backface-visibility 속성

요소의 뒷면 즉 반대쪽 면을 표시할 것인지 결정한다. 요소가 회전하거는 등 애니메이션 처리될 때에 뒷면까지 보여지게 될 경우 뒷면을 표시할 것인지 표시하지 않을 것인지 결정할 수 있다. 기본값은 뒷면을 표시한다.(visible)

backface-visibility: visible | hidden

두 개 이상의 변형을 동시에 사용할 경우

transform 속성에 변형 함수를 나열해서 사용하면 두 개 이상의 변형을 동시에 사용할 수 있다.

p:hover {
    transform: scale(2) rotateX(100deg);
}

트랜지션

트랜지션은 어떤 특정 조건을 주었을 때 일정한 시간동안 웹 요소의 스타일이 자연스럽게 조금씩 바뀌는 것을 말한다.

transition-property 속성

트랜지션을 적용할 속성을 선택한다. 이 속성을 지정하지 않으면 모든 속성이 트랜지션 대상이 된다. 글자 색상, 배경 등 지정한 속성만 트랜지션 대상이 된다.

transition-property: all | none | <속성이름>

예시)

transition-property: all; /*모든 요소의 모든 속성에 트랜지션을 적용한다.*/
transition-property: color; /*헤당 요소의 글자 색상에 트랜지션을 적용한다. */
transition-property: width, height; /*해당 요소의 너비와 높이에 트랜지션을 적용한다.*/

transition-duration 속성

트랜지션 진행 시간을 지정한다. 시간 단위는 초 도는 밀리초이다. 트랜지션이 여러 개라면 쉼표로 구분해 진행 시간을 지정할 수 있다.

예시) width 속성과 height 속성이 각각 3초, 1초동안 애니메이션을 지속한다.

.transition img {
    width: 100px;
    height: 100px;
    transition-duration: 3s, 1s;
    transition-property: width, height;
}

.transition img:hover {
    width: 150px;
    height: 150px;
}

<div class="transition">
    <img src="img/cake.jpg" alt="케이크" width="300px">
</div>

transition-timing-function 속성

트랜시션의 시작과 중간, 끝에서의 속도를 지정한다.

속성 값	설명
linear	시작부터 끝까지 똑같은 속도로 트랜지션을 진행한다.
ease	처음에는 천천히 시작하고 점점 빨라지다가 마지막에는 천천히 끝낸다. 기본 값이다.
ease-in	시작을 느리게 한다.
ease-out	느리게 끝낸다.
ease-in-out	느리게 시작하고 느리게 끝낸다.
cubic-bezier(n,n,n,n)	배지 함수를 직접 정의해 사용한다.

예시)

.transition {
    transition-timing-function: linear;
}

transition-dely 속성

트랜지션이 언제부터 시작될지 지연 시간을 지정한다. 시간 단위는 초 또는 밀리초이며 기본값은 0이다.

예시)

.transition img {
    width: 100px;
    height: 100px;
    transition-duration: 3s, 1s;
    transition-delay: 1s;
    transition-property: width, height;
}

.transition img:hover {
    width: 150px;
    height: 150px;
}

<div class="transition">
    <img src="img/cake.jpg" alt="케이크" width="300px">
</div>

CSS와 애니메이션

웹 요소에 애니메이션을 추가할 수 있다. 애니메이션을 시작해 끝내는 동안 원하는 곳 어디서든 스타일을 바꾸며 애니메이션을 정의할수 있다. 인터넷 익스플로러 10 이상과 최신 모던 브라우저에서 지원하며 이전 버전을 고려하려면 접두사를 붙여야 한다.

+ 키 프레임(keyframe) : 애니메이션 중간에 스타일이 바뀌는 지점

@keyframes 속성

애니메이션의 시작과 끝을 비롯해 상태가 바뀌는 지점을 설정한다. '이름'으로 애니메이션을 구별한다. 시작 위치는 0%, 끝 위치를 100%로 놓고 위치를 지정한다. 시작과 끝 위치만 사용한다면 from, to 키워드를 사용 가능하다. @-webkit-keyframes 혹은 @-moz-keyframes 처럼 브라우저 접두사를 붙여야 한다.

예시)

.transition img {
    width: 100px;
    height: 100px;

    animation-name: change-ex;
    animation-duration: 3s;
}

@keyframes change-ex {
    from {
        width: 100px;
        height: 100px;
    }
    to {
        width: 200px;
        height: 150px;
    }
}

animation 관련 속성

① animation-name 속성

@keyframes 속성에서 만든 애니메이션 이름을 사용한다.

② animation-duration 속성

애니메이션 실행 시간을 설정한다. 기본값은 0이다. 사용 가능한 값은 초(s) 혹은 밀리초(ms)이다.

③ animation-direction 속성

애니메이션이 끝난 후 원래 위치(normal)로 돌아가거나 반대 방향(alternate)으로 애니메이션이 실행하도록 지정한다.

animation-direction: normal | alternate

③ animation-iteration-count 속성

애니메이션 반복 횟수를 지정한다. 기본 숫자를 지정하거나 infinite 로 속성값을 지정하면 무한 반복한다.

animation-iteration-count: <숫자> | infinite

④ animation-timing-function 속성

애니메이션 속도 곡선을 지정한다.

속성 값	설명
linear	시작부터 끝까지 똑같은 속도로 트랜지션을 진행한다.
ease	처음에는 천천히 시작하고 점점 빨라지다가 마지막에는 천천히 끝낸다. 기본 값이다.
ease-in	시작을 느리게 한다.
ease-out	느리게 끝낸다.
ease-in-out	느리게 시작하고 느리게 끝낸다.
cubic-bezier(n,n,n,n)	배지 함수를 직접 정의해 사용한다.

animation 속성 한번에 표현하기

여러개의 애니메이션 속성을 하나의 속성으로 줄여서 사용할 수 있다. 지정하지 않은 속성은 기본값을 사용하지만 animation-duration 속성 값은 반드시 지정해야 한다.

예시) animation 속성을 사용하지 않을 경우

.transition img {
    width: 200px;
    animation: rotate 1.5s infinite, background-ex 1.5s infinite alternate;
}

@keyframes background-ex {
    form { background: red; }
    50% { background: green; }
    to { background: burlywood; }
}

@keyframes rotate {
    from { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
    50% { transform: perspective(120px) rotateX(-180deg) rotateY(0deg); }
    to { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); }
}

<div class="transition">
    <img src="img/cake.jpg" alt="케이크" width="300px">
</div>

CSS3 선택자

초코초코초코 — Fri, 4 Apr 2025 17:07:59 +0900

CSS3 선택자

연결 선택자

선택자와 선택자를 연결해 적용 대상을 한정하는 선택자이다.

① 하위 선택자

상위 요소인 section 요소 안에 있는 모든 p 요소의 글자 색을 파란색으로 바꾼다는 의미가 된다.

section p {color: blue;}

② 자식 선택자

자식 요소에 스타일을 적용하는 선택자이다. 두 요소 사이에 '>'를 표시해 부모 요소와 자식 요소를 구분한다.

#container > p { color: blue; }

자식 선태자와 하위 선택자의 다른 점을 보기 위한 예시이다.

<div id="container">
    <p>제목 색상은 파란색</p>
    <div>
        <p>내용은 기본 색상</p>
    </div>
    <p>끝 내용 색상</p>
</div>

자식 선택자의 경우) container 의 하위 요소인 p 요소에만 스타일이 적용된다.

#container > p { color: blue; }

하위 선택자의 경우) container 의 모든 p 요소에 스타일이 적용된다.

#container p { color: blue; }

③ 인접 형제 선택자

같은 부모를 가진 형제 요소 중 첫번째 동생 요소에만 스타일이 적용된다. (선착순 하나) 다음 예시로 설명하자면 p 요소와 h1 은 같은 레벨 요소이면서 p 요소 이후 맨 먼저 오는 h1 요소에 스타일을 적용한다.

p + h1 { color: blue; }

예시)

<div id="container">
    <p>제목 색상은 파란색</p>
    <h1>끝 내용의 색상</h1>
    <h1>끝 내용의 색상2</h1>
</div>

④ 형제 선택자

형제 요소들의 모든 요소들에 스타일을 적용한다. 인접 형제 선택자와 다른 점은 모든 형제 요소에 다 적용된다는 것이다.

p ~ h1 { color: blue; }

예시)

<div id="container">
    <p>제목 색상은 파란색</p>
    <h1>끝 내용의 색상</h1>
    <h1>끝 내용의 색상2</h1>
</div>

속성 선택자

지정한 속성을 가진 요소를 찾아 스타일을 적용된다.

① [속성] 선택자

지정한 속성을 가진 요소를 찾아 스타일을 적용한다.

a[target] {
    background-color: aquamarine;
}

예시)

<ul>
    <li><a href="http://www.naver.com" target="_blank">메뉴1</a></li>
    <li><a href="http://www.naver.com" target="_top">메뉴2</a></li>
    <li><a href="http://www.naver.com">메뉴3</a></li>
</ul>

② [속성 = 값] 선택자

주어진 속성과 속성 값이 일치하는 요소를 찾아 스타일을 적용한다.

a[target="_blank"] {
    background-color: aquamarine;
}

예시)

<ul>
    <li><a href="http://www.naver.com" target="_blank">메뉴1</a></li>
    <li><a href="http://www.naver.com" target="_top">메뉴2</a></li>
    <li><a href="http://www.naver.com">메뉴3</a></li>
</ul>

③ [속성 ~= 값] 선택자

여러 속성 값 중에 해당 값이 포함되어 있는 요소를 찾아 스타일이 적용된다.

[class ~= "button"] {
    background-color: aquamarine;
}

예시) class 속성 중에 button 이라는 단어가 있는 요소 모두 적용됨

<ul>
    <li><a href="http://www.naver.com" target="_blank">메뉴1</a></li>
    <li><a href="http://www.naver.com" class="button">메뉴2</a></li>
    <li><a href="http://www.naver.com" class="button flat">메뉴3</a></li>
</ul>

④ [속성 |= 값] 선택자

특정 값이 포함된 속성을 가진 요소를 찾아 스타일이 적용된다. 하이픈으로 연결해 한 단어 값을 이루는 요소에도 모두 적용된다.

[class |= "button"] {
    background-color: aquamarine;
}

예시)

<ul>
    <li><a href="http://www.naver.com" class="button-flat">메뉴1</a></li>
    <li><a href="http://www.naver.com" class="buttons">메뉴2</a></li>
    <li><a href="http://www.naver.com" class="button flat">메뉴3</a></li>
</ul>

⑤ [속성 ^= 값] 선택자

특정 값으로 시작하는 속성을 가진 요소를 찾아 스타일을 적용한다.

a[title ^= "me"] {
    background-color: aquamarine;
}

예시) title 속성 중 me 로 시작하는 요소를 찾아 스타일이 적용된다.

<ul>
    <li><a href="http://www.naver.com" title="menu1">메뉴1</a></li>
    <li><a href="http://www.naver.com" title="hidden-menu">메뉴2</a></li>
    <li><a href="http://www.naver.com" title="menu3">메뉴3</a></li>
</ul>

⑥ [속성 $= 값] 선택자

특정 값으로 끝나는 속성을 가진 요소를 찾아 스타일을 적용한다.

a[href $= "xls"] {
    background-color: aquamarine;
}

예시) herf 속성 중 xls 단어를 가진 요소만 스타일이 적용된다.

<ul>
    <li><a href="http://www.naver.com" title="menu1">메뉴1</a></li>
    <li><a href="intro.xls" title="hidden-menu">메뉴2</a></li>
    <li><a href="http://www.naver.com" title="menu3">메뉴3</a></li>
</ul>

⑦ [속성 *= 값] 선택자

값의 일부가 일치하는 속성을 가진 요소를 찾아 스타일을 적용된다. 앞이든 뒤든 상관없이 값만 포함되면 된다.

a[href *= "naver"] {
    background-color: aquamarine;
}

예시)

<ul>
    <li><a href="http://www.naver.com" title="menu1">메뉴1</a></li>
    <li><a href="intro.xls" title="hidden-menu">메뉴2</a></li>
    <li><a href="http://www.naver.com" title="menu3">메뉴3</a></li>
</ul>

가상 클래스

연결 선택자나 속성 선택자는 HTML 마크업 안에 포함되어 있는 값들을 직접 확인하고 지정할 수 있었지만 가상 요소와 가상 클래스는 말 그대로 보이지 않는 부분을 특정할 수 있다.

① 사용자 동작에 반응하는 가상 클래스

표기	설명
:link	방문하지 않은 링크에 스타일을 지정할 수 있다.
:visited	방문한 링크에 스타일을 적용할 수 있다.
:active	웹 요소를 활성화했을 때의 스타일을 적용할 수 있다.
:hover	웹 요소에 마우스 커서를 올려놓을 때의 스타일을 적용할 수 있다.
:focus	웹 요소에 초점이 맞추어졌을 때 스타일을 적용할 수 있다. (Tab 키)

② UI 요소 상태에 따른 가상 클래스

표기	설명
:enabled, :disabled	요소를 사용할 수 있을 때와 없을 때의 스타일을 지정한다.
:checked	라디오 박스나 체크 박스에서 항목을 선택했을 때의 스타일 지정 할 수 있다.

예시) 라디오 박스 체크했을 때의 스타일 지정

input:checked + span {
    color: blue;
}

<label>
    <input type="radio" name="subject" value="english"><span>영어</span>
</label>
<label>
    <input type="radio" name="subject" value="math"><span>수학</span>
</label>
<label>
    <input type="radio" name="subject" value="speaking"><span>회화</span>
</label>

예시) 선택 박스에 마우스를 올려놓을 때의 스타일 지정

.button {
    text-align: center;
    width: 100px;
    padding: 5px;
    background-color: brown;
    color: beige;
}

.button:hover {
    background-color: chocolate;
}

<div class="button">
    <p>메인 메뉴</p>
</div>

구조 가상 클래스

① :nth-child(n) 과 :nth-last-child(n)

:nth-child(n) 은 앞에서부터 n 번째 자식 요소에 스타일을 적용한다. :nth-last-child(n) 은 뒤에서부터 n 번재 자식 요소에 스타일을 적용한다. n 은 위치를 나타내는 곳으로 an+b 처럼 수식을 사용할 수도 있다. n 은 0부터이다.

/* div 요소 안에서 네 번째 자식 요소인 p요소에 스타일을 지정한다. */
div p:nth-child(4) { background: blue; }

/* div 요소 안에서 홀수 번째로 나타나는 자식 요소인 p 요소에 스타일을 지정한다. */
div p:nth-child(odd) { background: blue; }

/* div 요소 안에서 홀수 번째로 나타나는 자식 요소인 tr요소에 스타일을 지정한다. */
div tr:nth-child(2n+1) { background: blue; }

/* div 요소 안에서 짝수 번째로 나타나는 자식 요소인 p요소에 스타일을 지정한다. */
div p:nth-child(even) { background: blue; }

/* table 요소 안에서 짝수 번째로 나타나는 자식 요소인 tr요소에 스타일을 지정한다. */
table tr:nth-child(2n) { background: blue; }

/* class가 container 인 요소 안에서 뒤에서 두번째 자식 요소인 p 요소에 스타일을 지정한다. */
.container p:nth-last-child(2) { background: blue; }

예시) nth-child(2n+1)

<style>
    table tr:nth-child(2n+1) {
        background: lightgray;
        color: black;
    }
</style>

<body>
	<table border="1">
		<tr><td>블루베리</td></tr>
		<tr><td>사과</td></tr>
		<tr><td>딸기</td></tr>
		<tr><td>레몬</td></tr>
		<tr><td>배</td></tr>
		<tr><td>유자</td></tr>
	</table>
</body>

예시) nth-last-child(3)

<style>
    table tr:nth-last-child(3) {
        background: lightgray;
        color: black;
    }
</style>

<body>
	<table border="1">
		<tr><td>블루베리</td></tr>
		<tr><td>사과</td></tr>
		<tr><td>딸기</td></tr>
		<tr><td>레몬</td></tr>
		<tr><td>배</td></tr>
		<tr><td>유자</td></tr>
	</table>
</body>

② :nth-of-type(n) 과 :nth-last-of-type(n)

:nth-of-type(n) 은 앞에서부터 n 번째 요소에 스타일을 적용한다.

③ :first-child 와 :last-child

:first-child 는 첫번째 자식 요소스타일을 적용하고 last-child 는 마지막 자식 요소에 스타일을 적용한다.

예시)

ul.navi li:first-child {
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
}

ul.navi li:last-child {
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
}

.navi li {
    width: 100px;
    list-style-type: none;
    display: inline-block;
    border: 1px solid #000000;
    padding: 10px;
    text-align: center;
}

<ul class="navi">
    <li>Home</li><li>HTML</li><li>CSS</li><li>JavaScript</li>
</ul>

④ :first-of-type 와 :last-of-type

:first-of-type 은 형제 요소들 중 첫번째 요소에 스타일을 적용한다. :last-of-type 은 형제 요소들 중 마지막 요소에 스타일을 적용한다.

예시)

ul.navi li:first-of-type {
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
}

ul.navi li:last-of-type {
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
}

.navi li {
    width: 100px;
    list-style-type: none;
    display: inline-block;
    border: 1px solid #000000;
    padding: 10px;
    text-align: center;
}

<ul class="navi">
    <li>Home</li><li>HTML</li><li>CSS</li><li>JavaScript</li>
</ul>

⑤ :only-child 와 :only-of-type

:only-child 는 부모 안에 자식 요소가 유일하게 하나일 때 스타일이 적용된다. :only-of-type 은 자신이 유일한 요소일 때 스타일이 적용된다. :only-child 에는 부모 안에 다른 자식 요소가 있으면 안되지만 :only-of-type 은 다른 요소가 있어도 된다. 단, only-of-type 에 대항되는 요소는 단 하나여야 한다.

예시)

<style>
    .container1 p:only-child {
        color: burlywood;
    }

    .container2 p:only-of-type {
        color: cadetblue;
    }
</style>

<body>
	<div class="container1">
		<p>환영합니다.</p>
	</div>

	<div class="container2">
		<p>홈 트레이닝.</p>
		<h4>감사합니다.</h4>
	</div>
</body>

⑥ ::before 와 ::after

::before 는 특정 요소의 앞에 지정한 내용을 추가한다. 마찬가지로 ::after 는 특정 요소의 뒤에 지정한 내용을 추가한다. 글자, 이미지 등을 넣을 수 있다. 다른 선택자를 통해 내용을 추가할 경우에는 돔이라고 하는 문서에 포함이 되어 자바스크립트에서 접근하여 이용하고 수정할 수 있다. 반면 ::before 와 ::after 는 가상 요소로 돔 문서 안에 존재하는 것이 아니다. 단지 조건에 맞춰 화면에 보여줄 뿐으로 자바스크립트에서 접근할 수 없다.

예시)

<style>
    ul li:nth-child(2n)::after {
        content: "NEW!";
        font-size: x-small;
        padding: 2px 4px;
        background-color: crimson;
        color: white;
        margin-left: 10px;
    }
</style>

<body>
	<h4>제목 목록</h4>
	<ul>
		<li>바나나</li>
		<li>딸기</li>
		<li>수박</li>
		<li>샤인머스켓</li>
	</ul>
</body>