p5.Element

요소를 부모 요소에 붙입니다.

예를 들어,

매개변수 parent는 다음 세 가지 유형 중 하나를 가질 수 있습니다. parent는 부모 요소가 문자열인 경우, 예를 들어 myElement.parent('container')와 같이 사용할 수 있습니다. 또 myElement.parent(myDiv)처럼 p5.Element 객체일 수도 있습니다. 마지막으로, parent 는 HTMLElement 객체일 수도 있습니다. myElement.parent(anotherElement)처럼요.

myElement.parent()를 인자(argument)없이 호출하면 해당 요소의 부모를 반환합니다.

입력받은 문자열을 해당 요소의 ID로 설정합니다.

인자(argument) 없이 myElement.id()를 호출하면 해당 ID가 문자열로 반환됩니다.

입력받은 문자열을 해당 요소의 클래스 속성 으로 추가합니다.

인자(argument) 없이 myElement.class()를 호출하면 해당 요소의 현재 클래스들이 문자열로 반환됩니다.

요소 위에서 마우스를 누를 때 함수를 호출합니다.

myElement.mousePressed(false)를 호출하면 함수가 비활성화됩니다.

주의: 일부 모바일 브라우저에서는 요소가 빠르게 탭(tap)될 때에도 이 이벤트가 발생할 수 있습니다.

요소 위에서 마우스를 두 번 누를 때 함수를 호출합니다

myElement.doubleClicked(false)를 호출하면 함수가 비활성화됩니다.

요소 위에서 마우스 휠이 스크롤될 때 함수를 호출합니다.

콜백 함수, fxn은 event 객체를 전달받습니다. event에는 deltaY와 deltaX라는 두 개의 숫자 속성이 있습니다. event.deltaY는 마우스 휠이 사용자로부터 멀어지는 방향으로 회전할 때 음수 값을 가집니다. 사용자 방향으로 회전하면 양수입니다. event.deltaX는 휠이 오른쪽으로 이동할 때 양수 값을 가집니다. 왼쪽으로 움직이면 음수입니다.

myElement.mouseWheel(false)를 호출하면 함수가 비활성화됩니다.

요소 위에서 마우스 버튼을 놓을 때 함수를 호출합니다.

myElement.mouseReleased(false)를 호출하면 함수가 비활성화됩니다.

주의: 일부 모바일 브라우저에서는 요소가 빠르게 탭(tap)될 때에도 이 이벤트가 발생할 수 있습니다.

요소 위에서 마우스를 눌렀다가 놓을 때 함수를 호출합니다.

myElement.mouseReleased(false)를 호출하면 함수가 비활성화됩니다.

주의: 일부 모바일 브라우저에서는 요소가 빠르게 탭(tap)될 때에도 이 이벤트가 발생할 수 있습니다.

요소 위에서 마우스를 움직일 때 함수를 호출합니다.

myElement.mouseMoved(false)를 호출하면 함수가 비활성화됩니다.

요소 위로 마우스가 올라갈 때 함수를 호출합니다

myElement.mouseOver(false)를 호출하면 함수가 비활성화됩니다.

마우스가 요소 밖으로 빠져나갈 때 함수를 호출합니다.

myElement.mouseOut(false)를 호출하면 함수가 비활성화됩니다.

요소가 터치될 때 함수를 호출합니다.

myElement.touchStarted(false)를 호출하면 함수가 비활성화됩니다.

주의: 터치 기능은 모바일 기기에서만 작동합니다.

사용자가 요소를 터치하고 움직일 때 함수를 호출합니다.

myElement.touchMoved(false)를 호출하면 함수가 비활성화됩니다.

주의: 터치 기능은 모바일 기기에서만 작동합니다.

사용자가 요소를 터치하는 것을 멈췄을 때 함수를 호출합니다.

myElement.touchMoved(false)를 호출하면 함수가 비활성화됩니다.

주의: 터치 기능은 모바일 기기에서만 작동합니다.

파일이 요소 위로 드래그될 때 함수를 호출합니다.

myElement.dragOver(false)를 호출하면 함수가 비활성화됩니다.

파일이 요소에서 드래그되어 벗어날 때 함수를 호출합니다.

myElement.dragLeave(false)를 호출하면 함수가 비활성화됩니다.

요소에 클래스를 추가합니다.

요소로부터 클래스를 제거합니다.

클래스가 요소에 이미 적용되어 있는지 확인합니다.

요소에 클래스가 적용되어 있는지에 대한 여부를 토글합니다.

요소를 다른 요소의 자식으로 붙입니다.

myElement.child()는 문자열 ID, DOM 노드 또는 p5.Element중 하나를 받을 수 있습니다. 예를 들어, myElement.child(otherElement)처럼요. 아무런 인자가 전달되지 않는다면, 자식 DOM 노드의 배열을 반환합니다.

요소를 수직, 수평 또는 둘 다의 방향으로 중앙에 배치합니다.

center()는 요소를 부모 요소의 중앙에 배치하거나, 부모 요소가 없다면 페이지의 body 중앙에 배치합니다.

myElement.center() 처럼 인자가 전달되지 않은 경우, 요소는 수직과 수평 모두 중앙정렬됩니다.

기존의 HTML을 대체하여 요소의 내부에 HTML을 새로 설정합니다.

두 번째 매개변수인 append는 선택적(optional) 매개변수입니다. true가 전달되는 경우, 예를 들어 "myElement.html('hi', true)와 같이 사용하면, 기존의 HTML을 대체하는 대신 HTML이 덧붙여집니다.

myElement.html()처럼 인자가 전달되지 않은 경우에는 요소의 내부 HTML이 반환됩니다.

요소의 위치를 설정합니다.

첫 번째와 두 번째 매개변수인 x 와 y는 웹 페이지의 왼쪽 상단 모서리를 기준으로 위치를 설정합니다.

세 번째 매개변수인 positionType는 선택적(optional) 매개변수입니다. 이는 요소의 위치 지정 방식을 설정합니다. positionType은 'static', 'fixed', 'relative', 'sticky', 'initial', 또는 'inherit' 중 하나의 문자열입니다.

myElement.position()과 같이 인자가 전달되지 않은 경우, 메소드는 요소의 위치를 객체 형태로 반환합니다. 예를 들면 { x: 0, y: 0 }과 같이요.

CSS 선언을 추가하여 요소에 스타일을 적용합니다.

첫 번째 매개변수 property는 문자열입니다. myElement.style('color')와 같이 스타일 속성의 이름이 전달되면, 현재 값을 문자열로 반환합니다. 만약 설정된 값이 없다면 null을 반환합니다. myElement.style('color:deeppink')과 같이 property:style 형태의 문자열이 전달되면, property 스타일의 값을 value로 설정합니다.

두 번째 매개변수 value는 선택적(optional)입니다. 속성의 값을 설정합니다. value는 myElement.style('color', 'deeppink')처럼 문자열이거나, myElement.style('color', myColor)처럼 p5.Color 객체일 수 있습니다.

요소에 속성을 추가합니다.

이 메소드는 고급 작업에 유용합니다. id와 같이 가장 자주 사용되는 속성들은 전용 메소드를 활용하여 값을 설정할 수 있습니다. 예를 들어, nextButton.id('next')는 요소의 id 속성을 설정합니다. 이와 같은 효과를 내기 위해 nextButton.attribute('id', 'next')를 호출할 수 있습니다.

첫 번째 매개변수 attr은 속성의 이름을 나타내는 문자열입니다. myElement.attribute('align')을 호출하면 현재 속성의 값을 문자열로 반환하거나, 값이 설정되지 않았다면 null을 반환합니다.

두 번째 매개변수인 value는 선택적(optional) 매개변수입니다. 이는 속성의 값을 설정하는데 사용되는 문자열입니다. 예를 들어, myElement.attribute('align', 'center')를 호출하면 요소의 수평정렬을 center로 설정합니다.

요소에서 속성을 제거합니다.

매개변수 attr 은 속성의 이름을 나타내는 문자열입니다. 예를 들어, "myElement.removeAttribute('align')를 호출하면 이미 설정되어 있는 그 요소의" align 속성을 제거합니다.

요소의 값을 반환하거나 설정합니다.

myElement.value()를 호출하면 요소의 현재 값을 반환합니다.

매개변수 value는 선택적이며, 숫자나 문자열일 수 있습니다. 이 인자가 제공된다면, 예를 들어 myElement.value(123), 이는 요소의 값을 설정하는 데 사용됩니다.

현재 요소를 나타냅니다.

현재 요소를 숨깁니다.

요소의 너비와 높이를 설정합니다.

인자(argument) 없이 myElement.size()를 호출하면 width와 height 속성을 가진 객체 형태로 요소의 크기를 반환합니다. 예를 들어, { width: 20, height: 10 } 형태입니다..

첫 번째 매개변수 width는 선택적(optional) 매개변수입니다. 이는 요소의 너비를 설정하는 데 사용되는 숫자입니다. myElement.size(10)와 같이 호출합니다.

두 번째 매개변수 height 역시 선택적 매개변수입니다. 이는 요소의 높이를 설정하는데 사용되는 숫자입니다. 예를 들어, myElement.size(20, 10)을 호출하면 요소의 너비를 20픽셀, 높이를 10픽셀로 설정합니다.

상수 AUTO는 하나의 차원을 조정하는 동안 종횡비, 즉width / height를 유지하기 위해 사용될 수 있습니다. 예를 들어, 너비가 200픽셀, 높이가 100픽셀인 요소가 있다고 가정해봅시다. myElement.size(20, AUTO)를 호출하면 너비를 20픽셀, 높이를 10픽셀로 설정합니다.

주의: 이미지처럼 데이터를 로드해야 하는 요소의 경우, 데이터가 로드된 이후에 myElement.size()를 호출하세요.

요소를 제거하고, 모든 오디오/비디오 스트림을 중지하며, 모든 콜백 함수를 제거합니다.

사용자가 요소에 파일을 드롭할 때 함수를 호출합니다.

첫 번째 매개변수 callback은 파일이 로드되었을 때 한 번 실행될 함수입니다. 콜백 함수는 하나의 매개변수 file, 즉 p5.File 객체를 받습니다. 만약 사용자가 여러 개의 파일을 요소에 드롭한다면, callback은 파일마다 각각 한 번씩 실행됩니다.

두 번째 매개변수 fxn는 브라우저가 하나 이상의 드롭된 파일을 감지했을 때 호출될 함수입니다. 콜백 함수는 하나의 매개변수 event, 즉 DragEvent를 받습니다.

요소를 드래그 가능하도록 만듭니다.

매개변수 elmnt는 선택적(optional)입니다. 만약 myElement.draggable(otherElement)와 같이 다른 p5.Element 객체가 전달되면, 전달된 요소가 드래그 가능하도록 바뀝니다.