728x90 분류 전체보기104 Javascript - 요소 노드 추가 안녕하세요, Javascript에서 요소 노드를 추가하는 방법에 대해 간단히 정리해보겠습니다. 요소 노드를 추가하는 방법은 아래와 같이 3가지 순서를 따라 진행됩니다. 0. 수정하고 싶은 기존 요소노드 만들기 1. 요소 노드 만들기 : document.createElement('태그 이름') 2. 요소 노드 내용 꾸미기 : textContent, InnerHTML 등 사용 3. 요소 노드 추가하기 : Node.prepend, append, after, before 추가하기 prepend : 대상을 node의 가장 앞에 삽입 append : 대상을 node의 마지막에 삽입 before : 대상을 node 이전에 삽입 after : 대상을 node 다음에 삽입 오늘 할 일 자바스크립트 공부 고양이 화장실 청.. 2021. 6. 28. HTML/CSS - animation/다단 안녕하세요, HTML/CSS에서 animation 요소와 다단에 대해 정리해 보겠습니다. 애니메이션 때문에 이미지로는 한계가 있어 코드 위주로 정리하겠습니다.. ◆ animation: 애니메이션이름 지속시간(s) [타이밍 함수 대기시간 반복 획수 반복 방향 전후 상태 재생/정지]; 여기서 애니메이션 이름은 @keyframes의 이름입니다. @keyframes는 2개 이상의 애니메이션 중간 상태(프레임)을 지정해 줍니다. @keyframes는 애니메이션의 변화를 설정해주기 때문에 꼭! 정의해 주어야 합니다! @keyframes 양식 @keyframes 애니메이션 이름 { 0% { 속성: 값; } 50% { 속성: 값; } 100% { 속성: 값; } } .box { width: 100px; height: .. 2021. 6. 27. Javascript - innerHTML, outerHTML, textContent 안녕하세요, 오늘은 innerHTML, outerHTML, textContent에 대해 정리하겠습니다. ◆ innerHTML -. 요소 노드 내부의 HTML 코드를 문자열로 리턴합니다. 아래 코드에서 myTag는 querySelector에 의해 태그가 됩니다. 여기서 myTag의 innerHTML를 console.log로 출력하면 아래의 HTML 코드를 출력해줍니다. Cat-1 Ragdoll British Shorthair Scottish Fold Bengal Siamese Maine Coon American Shorthair Russian Blue Cat-2 Sphynx Munchkin Persian Norwegian Forset Turkish Angora Bombay Selkirk Rex Munchk.. 2021. 6. 27. Javascript - DOM 안녕하세요, 오늘은 DOM과 DOM에서 요소를 선택하는 것에 대해 정리해보겠습니다. 우선 DOM이란? Document Object Model의 약어로 직역하자면 문서 객체 모델이라는 뜻입니다. 웹페이지에 나타난 태그들을 객체로 다룰 수 있는 것이라고 생각하면 됩니다. 이전 시간에 배웠던 document 객체가 웹의 최상단에 있는 객체입니다! 제 생각에 DOM을 이해하는 것이 프론트엔드 개발자로서 가장 중요하다고 생각하여 "DOM을 께우치다"라는 책을 사서 읽고 있습니다. 내용이 방대하고 저도 이해를 완벽히 하지 못해 여기서는 기본 개념에 대해서만 정리하고 나중에 깊게 정리해보도록 하겠습니다! 실제로 HTML을 살펴보면 window - document에서 시작하여 html/ head/ body 등 태그들이.. 2021. 6. 26. 이전 1 ··· 9 10 11 12 13 14 15 ··· 26 다음
