[javascript] P5.js에서 HTML 및 CSS와의 통합이 가능한가요?

04 Dec 2023

javascript

P5.js는 HTML 및 CSS와의 통합을 지원하여 웹 페이지에 그래픽, 애니메이션, 인터랙티브 요소를 쉽게 추가할 수 있습니다.

먼저, P5.js를 HTML 파일에 포함시켜야 합니다. HTML 파일의 <head> 섹션에서 P5.js를 로드하려면 다음 코드를 추가하세요:

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

P5.js에서 HTML 요소를 만들려면 createCanvas() 함수를 사용하여 캔버스를 생성하고 웹 페이지에 표시할 수 있습니다. 예를 들어, 다음은 너비 800px, 높이 600px의 캔버스를 생성하는 코드입니다:

function setup() {
  createCanvas(800, 600);
}

CSS를 사용하여 P5.js 그래픽 요소의 스타일을 변경할 수도 있습니다. style() 함수를 사용하여 그래픽 요소의 배경색, 테두리 등을 변경할 수 있습니다. 예를 들어, 다음은 캔버스의 배경색을 노란색으로 설정하는 코드입니다:

function setup() {
  createCanvas(800, 600);
  background(255, 255, 0); // 노란색 배경
}

또는 createElement() 함수를 사용하여 HTML 요소를 동적으로 생성하고 스타일을 변경할 수도 있습니다. 다음은 <h1> 요소를 생성하고 스타일을 변경하는 예입니다:

function setup() {
  createCanvas(800, 600);
  
  let heading = createElement('h1', 'Hello, P5.js!');
  heading.style('color', 'red'); // 텍스트 색상을 빨간색으로 변경
}

요약하자면, P5.js는 HTML 및 CSS와의 통합을 가능하게 해주어 그래픽 및 인터랙티브 요소를 웹 페이지에 손쉽게 추가할 수 있습니다.

더 자세한 내용은 P5.js 공식 문서를 참조하시기 바랍니다.