본문 바로가기
반응형

전체 글

 (366)
[css]3d 카드 뒤집기 저 검은 화면 왜 저리 긴거냐고 ;;; F B HTML F B CSS .world { width: 60vw; height: 60vh; background-color: black; display: flex; justify-content: center; align-items: center; perspective: 600px; /*인간의 시야각에서 사물이 표현됨(3d 효과 적용 시 필요) */ transition: 1s; /* world 클래스인 검은색 배경 클릭하면 트랜잭션 효과 발생*/ } .world .card{ position: relative; /* 부모가 relative 면, 자식이 absolute일 때 뷰포트 기준이 됨. */ width: 150px; height: 200px; transform-..
[js] JSON 에 대한 정리 JSON 이란? JSON 은 표준 데이터 포맷 중 하나이다. 여기서 데이터는 어떠한 이론의 토대이자 기초가 되는 자료 혹은 사실을 의미하며, 포맷은 쉽게 말해 형태를 잡는 다는 것이다. 즉, JSON은 중구난방으로 퍼져있는 데이터를 필요에 따라 활용하기 쉽도록 구조화된(규칙적이고, 모양이 갖춰진) 형태로 표현하기 위한 표준이 되는 포맷 이다. 흔히 JSON 을 가볍다, 혹은 플랫폼 독립적이라고 많이 표현하는데, 말 그대로 네트워크를 통해 전송할 때 빠르고, 편하며, 어떤 언어 환경에서도 사용할 수 있기 때문에 그리 불리는 것 같다. JSON은 JavaScript Object Notation 을 줄인말로 이름 그대로 자바스크립트 객체를 표기하는 방법을 의미한다. 이러한 JSON 의 형태는 자바스크립트에서 ..
[기타] 윈도우 화면 내 넓이, 높이 최대 범위 지정 관련 보호되어 있는 글입니다.
[javascript html 캔버스] 그림판 HTML 삽입 미리보기할 수 없는 소스 이거 보임? 그럼 캔버스 못 씀
[DOM] insertBefore "지정한 위치(기준 노드) 앞에 노드를 추가한다." insertBefore(새로만든 노드, 기준 노드) insertBefore() 메서드는 기준노드의 앞에 새로만든 노드를 추가할 때 사용한다. 즉, 라는 부모 태그가 있고, 그 안의 자식노드로 가 있다고 가정 할 때, 새로 만든 노드가 이라는 노드라면, 다음과 같은 형태가 되는 것이다. // 부모 자식(새로 생성한 노드) 자식(기준 노드) 참고로, insertBefore(1인자, 2인자 ) 에서 1 인자 자리에 기존에 존재하고 있었던 노드를 입력하면, 그 노드는 삭제 되고, 똑같이 생겼지만 새로 생성된 노드가 기준 노드의 앞에 생성된다. insertBefore(새로만든 노드, 기준노드) 사용 예시 기준노드 //부모 노드 const $ul = document.querySelector('ul'); //새로생성..
[DOM] createDocumentFragment "빈 노드 객체를 생성한다." createDocumentFragment DeocumentFragment 노드는 , , text 등과 같이 DOM 노드에 속한다. 하지만 기존 DOM 노드와는 다르게 분류되어 정의되어 있으며 부모노드가 존재하지 않고, 브라우저 렌더링 시에도 DOM 트리에 포함되지 않는다. 즉, 다음과 같이 생성해서 부모 노드의 자식 노드로 추가한다고 해도 막상 브라우저에 렌더링된 요소들을 살펴보면 존재하지 않는다. createDocumentFragment 의 필요성? 보통 우리가 crateElement 로 만든 새로운 요소들을 부모 노드에 추가하려고 하면, 리플로우와 리페인트 라는 과정을 거친다. 이 과정을 단순하게 말하면, 브라우저를 다시 렌더링 하는 것인데, 추가되는 요소가 많을 수록 다시 렌더링 되는 횟수 또한 n..
[DOM] createElement, createTextNode, appendChild createElement "요소 노드를 생성한다. " 새로운 요소노드를 생성한다. 여기서 요소노드는 흔히 말하는 HTML 태그를 의미한다. 이 때 생성된 요소 노드는 DOM의 어떠한 노드에도 속하지 않는다(즉, 연결점이 없다). //document 에 li 라는 이름의 태그(요소노드)를 생성 const $li = document.createElement('li'); createTextNode " 텍스트 노드를 생성한다. " 텍스트 노드는 DOM 트리에서 자식 노드가 존재하지 않는 리프 노드(잎파리) 이다. 단, 텍스트노드로 생성할 시에는 DOM의 어떠한 노드에도 속하지 않는 상태로 생성된다. // document 에 '안녕하세요' 라는 텍스트 노드를 생성 const $text = document.crea..
[DOM] insertAdjacentHTML 메서드 innerHTML 과 insertAdjacentHTML 우리가 흔히 문자열을 태그 내에 넣을 때 사용하는 innerHTML 프로퍼티와 마찬가지로 HTML 태그에 문자열을 삽입할 수 있는 메서드이다. 다만 차이점과 강점이있다면 insertAdjacentHTML 은 태그 내 요소를 삭제하지 않는다는 것이며, 문자열을 삽입할 위치를 지정할 수 있고, 기존 태그 내의 모든 요소를 삭제하고 다시 재렌더링하는 innerHTML 보다 성능상 이점이 높다는 점이 강점이다. 따라서 단순한 문자열을 삽입하고 끝내는 용도가 아니고, 반복적으로 문자열을 삽입하는 경우에는 insertAdjacentHTML 을 활용하는 것이 좋다. insertAdjacentHTML 형식 insertAdjacentHTML 메서드는 인자를 두 개 ..
반응형

티스토리툴바