728x90 Web 개발40 Javascript - 요소 노드 삭제 / 이동 안녕하세요, 지난 시간에는 Javascript를 이용해 HTML 요소를 추가하는 것에 대해 정리하였습니다. 오늘은 요소 노드를 삭제하고 이동하는 것에 대해 추가로 정리해보겠습니다. ◆ 요소 노드 삭제 -. remove()를 사용하여 쉽게 삭제할 수 있습니다. 아래 코드를 보며 설명드리겠습니다. 오늘 할 일 자바스크립트 공부 고양이 화장실 청소 고양이 장난감 쇼핑 내일 할 일 자바스크립트 공부 뮤지컬 공연 예매 유튜브 시청 const myTag = document.querySelector('#today') // myTag는 #today 리스트가 된다 myTag.children[1].remove() // myTage의 자식 중 인덱스1인 고양이 화장실 청소가 사라진다! ◆ 요소 노드 이동 -. 이전에 요소 .. 2021. 6. 29. 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. 이전 1 2 3 4 ··· 10 다음
