Cytoscape.js에서 그래프의 노드와 엣지에 스타일을 적용하는 방법은 다음과 같습니다:

1. 노드 스타일 적용하기:

   var nodeStyle = [
       {
           selector: 'node', // 모든 노드 선택자
           style: {
               'background-color': 'red', // 노드 배경색
               'label': 'data(label)' // 노드 라벨
           }
       },
       {
           selector: 'node:selected', // 선택된 노드 선택자
           style: {
               'border-color': 'blue', // 선택된 노드의 테두리 색
               'border-width': '2px' // 선택된 노드의 테두리 두께
           }
       }
   ];
      
   var cy = cytoscape({
       container: document.getElementById('cy'),
       elements: [...], // 그래프 요소
       style: nodeStyle // 노드 스타일 적용
   });
   

   위의 예제에서는 모든 노드에 빨간색 배경과 해당 노드의 라벨을 표시하는 스타일을 적용하고, 선택된 노드에는 파란색 테두리와 2픽셀의 테두리 두께를 적용합니다.

2. 엣지 스타일 적용하기:

   var edgeStyle = [
       {
           selector: 'edge', // 모든 엣지 선택자
           style: {
               'line-color': 'gray', // 엣지 색상
               'width': '1px' // 엣지 두께
           }
       },
       {
           selector: 'edge:selected', // 선택된 엣지 선택자
           style: {
               'line-color': 'blue', // 선택된 엣지의 색상
               'width': '3px' // 선택된 엣지의 두께
           }
       }
   ];
      
   var cy = cytoscape({
       container: document.getElementById('cy'),
       elements: [...], // 그래프 요소
       style: edgeStyle // 엣지 스타일 적용
   });
   

   위의 예제에서는 모든 엣지에 회색의 선과 1픽셀 두께를 적용하고, 선택된 엣지에는 파란색의 선과 3픽셀 두께를 적용합니다.

이와 같이 Cytoscape.js를 사용하면 그래프의 노드와 엣지에 다양한 스타일을 적용하여 원하는 시각적 효과를 구현할 수 있습니다. 추가적으로 해당 스타일을 조작하는 방법도 제공되므로 더 많은 시각적 효과를 만들 수 있습니다. Cytoscape.js 공식 문서에서 더 자세한 정보를 확인할 수 있습니다.