[JavaScript] 자바스크립트 이벤트(Event)

이벤트(Event)란? 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다. 이벤트 타입 // 마우스 클릭 이벤트 예시 여길 클릭하세요! 발생한 이벤트의 종류 (폼, 키보드, 마우스, HTML DOM, Window객체 등) 이벤트 핸들러 // 이 함수는 HTML 문서가 로드될 때 실행됨. window.onload = function() { // 아이디가 "text"인 요소를 선택함. var text = document.getElementById("text"); text.innerHTML = "HTML 문서가 로드되었습니다."; } 이벤트가 발생했을 때 그 처리를 담당하는 함수 지정된 이벤트가 발생하면, 웹 브라우저는 그 요소에 등록..

• format_list_bulleted Front-End
• · 2023. 3. 9.
• textsms

[JavaScript] Node 객체

노드(Node) 와 노드 트리 HTML DOM 에서 정보를 저장하는 계층적 단위 노드 트리는 노드들의 집합으로, 노드 간의 관계를 나타낸다. 자바스크립트에서는 HTML DOM 을 이용해 노드 트리에 포함된 모든 노드에 접근할 수 있다. 노드 간의 관계 노드 트리의 모든 노드는 서로 계층적 관계를 맺고 있다. 루트 노드 : HTML ( HEAD, BODY의 부모 노드 ) 첫 번째 자식 노드 : HEAD 두 번째 자식 노드 : BODY 형제 노드 관계 : HEAD 와 BODY 노드의 종류 문서 노드 HTML 문서 전체를 나타내는 노드 요소 노드 모든 HTML 요소가 해당하며, 속성 노드를 가질 수 있는 유일한 노드 주석 노드 HTML 문서의 모든 주석은 주석 노드 속성 노드 모든 HTML 요소의 속성은 속성..

• format_list_bulleted Front-End
• · 2023. 3. 8.
• textsms

[JavaScript] DOM (문서객체 모델)

DOM 이란? 문서 객체 모델 ( Document Object Model ) 객체 지향 모델로써 구조화된 문서를 표현하는 방식 XML 이나 HTML 문서의 프로그래밍 인터페이스를 제공 문서의 구조화된 표현 (structured representation) 을 제공해서 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 한다. DOM의 종류 Core DOM 모든 문서 타입을 위한 DOM 모델 HTML DOM HTML 문서를 위한 DOM 모델 HTML 문서를 조작하고 접근하는 표준화된 방법 모든 HTML 요소는 HTML DOM을 토해 접근 가능 XML DOM 문서를 위한 DOM 모델 XML 문서에 접근하여 그 문서를 다루는 표준화된 방법을 정의 모든 XML 요소는 XML DOM을 통해 접근 ..

• format_list_bulleted Front-End
• · 2023. 3. 8.
• textsms

[CSS] 미디어쿼리(Media Query)란? / 주의사항

미디어쿼리란? pc 뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위해 모바일에 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문 미디어쿼리 media .media { width: 500px; height: 500px; background-color: red; } @media (min-width: 320px) and (max-width: 800px) { .media { width: 300px; height: 300px; background-color: yellow; } } min-width와 max-width로 브라우저 가로폭 설정 브라우저의 가로폭이 최소 320px, 최대 800px이 되었을 경우, 중괄호 안의 css 속성으로 대체하겠다는 의미 미디어쿼리가 정상적으로 출..

• format_list_bulleted Front-End
• · 2023. 3. 1.
• textsms

[CSS] Transform 과 Animation을 결합할 때 주의사항

Tranform & Animation .box1 { animation: rotation 1500ms linear infinite alternate; } @keyframes rotation { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } } prefix 작성 시 유의 사항 .box { animation: rotation 3s linear 1s 6 alternate; } @-webkit-keyframes rotation { from {-webkit- transform: rotate(-10deg); } to {-webkit- transform: rotate(10deg); } } animation 앞에 prefix가 달려있다면 (ex..

• format_list_bulleted Front-End
• · 2023. 3. 1.
• textsms

[CSS] Animation / 웹사이트에 접속하자마자 효과 적용하기

Animation .animation { animation-name: changeWidth; /* 임의로 작성가능 */ animation-duration: 3s; animation-timing-function: linear; animation-delay: 1s; animation-iteration-count: 6; animation-direction: alternate; } @keyframes changeWidth { /* 내가 설정한 animation 이름 */ from { width: 300px; } /* animation을 통해 변화할 결과값(시작지점) */ to { width: 600px; } /* animation을 통해 변화할 결과값(끝지점) */ } iteration-count 애니메이션 반..

• format_list_bulleted Front-End
• · 2023. 3. 1.
• textsms