λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
μ½”λ”©κ³Ό μ•Œκ³ λ¦¬μ¦˜

νŒŒλ„(17) - μžλ°”μŠ€ν¬λ¦½νŠΈμ™€ 파이슀크립트, μ†μž‘λ‹€!

λ°˜μ‘ν˜•

🍬 'νŒŒλ„'λŠ” 크레이의 파이슀크립트 λ„μ „κΈ°μ˜ μ€„μž„λ§μž…λ‹ˆλ‹€.

μ§€λ‚œ κ²Œμ‹œκΈ€μ—μ„œ μ—°μž¬λ˜λŠ” κΈ€μž…λ‹ˆλ‹€.
https://itadventure.tistory.com/558

 

νŒŒλ„(16) - 파이슀크립트의 νŠΉμ’Œμ•™~점으둜 λ¨Έμ‹ λŸ¬λ‹!

🐳 'νŒŒλ„'λŠ” ν¬λ ˆμ΄κ°€ λ„μ „ν•˜κ³  μžˆλŠ” 파이슀크립트 λ„μ „κΈ°μ˜ μ€„μž„λ§μž…λ‹ˆλ‹€. μ§€λ‚œ κ²Œμ‹œκΈ€μ—μ„œ μ—°μž¬λ˜λŠ” κΈ€μž…λ‹ˆλ‹€. : https://itadventure.tistory.com/557 νŒŒλ„!(15) - λΌμ˜νšŒκ·€μ™€ 4μ°¨λ°©μ •μ‹κΉŒμ§€ 🍿 'νŒŒλ„'λŠ”

itadventure.tistory.com

 

μ§€λ‚œ κ²Œμ‹œκΈ€μ—μ„œλŠ” μ›ΉλΈŒλΌμš°μ €μ—μ„œ μ•Œκ³ λ¦¬μ¦˜ μ’…λ₯˜μ™€ μ•ŒνŒŒκ°’μ„ μ„ νƒμƒμžμ— μžˆλŠ” μ˜΅μ…˜μ„ μ„ νƒν•˜μ—¬
κ²°κ³Ό κ·Έλž˜ν”„λ₯Ό λ„μΆœν•˜λŠ” 뢀뢄을 μ‚΄νŽ΄λ³΄μ•˜λŠ”λ°μš”.

 

νŒŒμ΄μŠ€ν¬λ¦½νŠΈμ™€ μžλ°”μŠ€ν¬λ¦½νŠΈ, μΉœν•΄μ§ˆ 수 μžˆμ„κΉŒμš”?

 

이번 μ‹œκ°„μ—λŠ”, ν•΄λ‹Ή λͺ¨λ“ˆμ„ λΆˆλŸ¬μ™€ μ‚¬μš©ν•˜λŠ” 방법에 λŒ€ν•΄ μ•Œμ•„λ³΄λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€.

λ“œλ””μ–΄ νŒŒμ΄μŠ€ν¬λ¦½νŠΈμ™€ μžλ°”μŠ€ν¬λ¦½νŠΈμ™€ 콜라보~, ν˜‘λ ₯ν•˜μ—¬ μƒν˜Έ μž‘μš©ν•˜λŠ” 뢀뢄을 μ•Œμ•„λƒˆμŠ΅λ‹ˆλ‹€.

μ§€λ‚œ μ‹œκ°„μ— μ„€λͺ…λ“œλ Έλ‹€μ‹œν”Ό νŒŒμ΄μŠ€ν¬λ¦½νŠΈλŠ” μ›ΉλΈŒλΌμš°μ € λ‚΄λΆ€μ μœΌλ‘œ νŒŒμ΄μ¬μ„ μž‘λ™ν•˜κ³  μžˆλŠ”λ°μš”.
이 νŒŒμ΄μ¬μ€ μ›Ή μ–΄μ…ˆλΈ”λ¦¬ λ°©μ‹λΌλŠ” 기술둜 μž‘λ™ν•˜κΈ° λ•Œλ¬Έμ— 일반적으둜 μžλ°”μŠ€ν¬λ¦½νŠΈ λ°©λ²•μœΌλ‘œλŠ” μ ‘κ·Όν•˜κΈ° μ–΄λ ΅μŠ΅λ‹ˆλ‹€.
κ·Έλ ‡λ‹€λ©΄ 방법이 μ—†μ„κΉŒμš”? λ¬Όλ‘ ~ μžˆμ§€μš”. μ•„λ‹ˆλΌλ©΄ 이 글을 μ“Έ 이유쑰차 μ—†κ² μ§€μš”? :)
λŒ€λ‹¨νžˆ μ–΄λ €μš΄ 것도 μ•„λ‹™λ‹ˆλ‹€. νŒŒμ΄μŠ€ν¬λ¦½νŠΈμ— 방법이 이미 λ§ˆλ ¨λ˜μ–΄ 있기 λ•Œλ¬Έμ΄μ§€μš”.

μžλ°”μŠ€ν¬λ¦½νŠΈμ™€ 파이썬이 μ‰½κ²Œ λ§Œλ‚˜κΈ° μœ„ν•΄μ„œλŠ” λ‹€μŒ 2개의 λͺ¨λ“ˆμ΄ ν•„μš”ν•©λ‹ˆλ‹€. 

from js import document
from pyodide import create_proxy

 

첫번째 λ„νλ¨ΌνŠΈ λͺ¨λ“ˆ

 

첫번째, document λŠ” μ›ΉνŽ˜μ΄μ§€μ˜ λ¬Έμ„œλ₯Ό κ΄€λ¦¬ν•˜λŠ”λ°μš”. 돔(DOM)이라고도 λΆˆλ¦½λ‹ˆλ‹€.
μ›ΉνŽ˜μ΄μ§€μ— λ‹€μŒκ³Ό 같이 아이디(id)κ°€ 'algorithm'μ΄λΌλŠ” μ„ νƒμƒμžκ°€ μžˆλ‹€λ©΄,

<select id="algorithm">
  <option value="">μ•Œκ³ λ¦¬μ¦˜μ„ μ„ νƒν•˜μ„Έμš”</option>
  <option value="릿지">릿지 νšŒκ·€ (Ridge Regression)</option>
  <option value="라쏘">라쏘 νšŒκ·€ (Lasso Regression)</option>
</select><br/>

νŒŒμ΄μŠ€ν¬λ¦½νŠΈμ—μ„œ 이 μ„ νƒμƒμžμ˜ 값을 μ•Œμ•„λ‚΄κΈ° μœ„ν•΄μ„œλŠ” μ•„λž˜ 속성을 ν™•μΈν•˜λ©΄ λ©λ‹ˆλ‹€.
λ¬Όλ‘  document λͺ¨λ“ˆμ„ κ²½μš°ν•΄μ„œ ν™•μΈν•˜λŠ” κ²ƒμ΄μ§€μš”.

document.getElementById("algorithm").value


기본적으둜 document λͺ¨λ“ˆμ€ μ„ μ–Έν•˜μ§€ μ•Šμ•„λ„ μ‚¬μš© κ°€λŠ₯ν•©λ‹ˆλ‹€λ§Œ,
ν˜„μž¬ νŒŒμ΄μŠ€ν¬λ¦½νŠΈκ°€ μ•ŒνŒŒλ²„μ „μ΄κ³  μΆ”ν›„ 버전이 λ°”λ€Œλ©΄ κ°‘μžκΈ° μ•ˆλ  수 μžˆμ–΄
기본적으둜 μ„ μ–Έν•˜κ³  λ“€μ–΄κ°€λŠ” 걸둜 ν•˜κ² μŠ΅λ‹ˆλ‹€.

 

λ‘λ²ˆμ§Έ, ν”„λ‘μ‹œ λͺ¨λ“ˆ

 

λ‘λ²ˆμ§Έ λͺ¨λ“ˆμ€ create_proxy λͺ¨λ“ˆμž…λ‹ˆλ‹€.
'proxy' λŠ” μ˜μ–΄μ‚¬μ „μ—μ„œ μœ„μž„κΆŒ, λŒ€λ¦¬μΈ λ“±μ˜ λœ»μ„ μ°Ύμ•„λ³Ό 수 μžˆλŠ”λ°μš”.
μ—¬κΈ°μ„œλŠ” μ›ΉλΈŒλΌμš°μ €μ—μ„œ λ°œμƒν•˜λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ 이벀트λ₯Ό 파이슀크립트둜 μ—°κ²°ν•΄μ£ΌλŠ” 것을 μ˜λ―Έν•©λ‹ˆλ‹€.

κ·Έλž˜μ„œ 보톡 μ„ νƒμƒμžμ—μ„œ 무언가λ₯Ό 선택할 경우 μ•„λž˜μ™€ 같은 μžλ°”μŠ€ν¬λ¦½νŠΈ μ΄λ²€νŠΈκ°€ λ°œμƒμ΄ λ˜λŠ”λ°μš”. ( 빨간색 )


<select id="algorithm" onchange="μ΄λ²€νŠΈν•¨μˆ˜()">


μš”μƒˆ μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” μ΄κ²ƒλ³΄λ‹€λŠ” μ•½κ°„ 고였~κΈ‰μŠ€λŸ° 방법을 μ”λ‹ˆλ‹€.
보톡 μ•„λž˜μ™€ 같이 μ‚¬μš©ν•˜μ§€μš”.


let e1 = document.getElementById('algorithm');
e1.addEventListener('change', function(event){
    : // μž‘동할 μžλ°”μŠ€ν¬λ¦½νŠΈ μ†ŒμŠ€
});


νŒŒμ΄μŠ€ν¬λ¦½νŠΈλŠ” μ•„λž˜μ™€ 같이 μ‚¬μš©ν•©λ‹ˆλ‹€. 맀우 λΉ„μŠ·ν•˜μ§€μš”? :)


e1 = document.getElementById("algorithm")
e1.addEventListener("change", create_proxy(μ΄λ²€νŠΈν•¨μˆ˜))


이 λ•Œ 이벀트 ν•¨μˆ˜λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈκ°€ μ•„λ‹Œ 파이썬 ν•¨μˆ˜μ΄μ–΄μ•Ό ν•˜κ΅¬μš”.
μ•„λž˜μ™€ 같은 ν˜•νƒœλ‘œ ν•¨μˆ˜λ₯Ό μ„ μ–Έν•΄μ£Όλ©΄ λ©λ‹ˆλ‹€.
뒀에 νŒŒλΌλ―Έν„° (event)κ°€ 따라 λΆ™μ–΄μ•Ό ν•œλ‹€λŠ” 점만 μ§€μΌœμ£Όλ©΄ λ˜μ§€μš”.


def μ΄λ²€νŠΈν•¨μˆ˜(event):
    : # μž‘λ™ν•  μ½”λ“œ


μœ„ λ‚΄μš©μ€ μ–΄λ””κΉŒμ§€λ‚˜ <pyscript> νƒœκ·Έ μ•ˆμ—μ„œμ˜ 방법이고 create_proxy λͺ¨λ“ˆμ„ 톡해 μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

 

μ‹€μ œ 적용

 

이제 2개의 λͺ¨λ“ˆμ˜ μ‚¬μš©λ²•μ„ μ•Œμ•˜μœΌλ‹ˆ μ‹€μ œ μ μš©κ³Όμ •μ„ μ•Œμ•„λ³ΌκΉŒμš”?

μ„ νƒμƒμžλŠ” 2개λ₯Ό μ‚¬μš©ν• ν…λ°μš”.

각각 μ•Œκ³ λ¦¬μ¦˜ μ’…λ₯˜λ₯Ό μ„ νƒν•˜λŠ” 선택 μƒμžμ™€, μ•Œκ³ λ¦¬μ¦˜μ˜ 과적합을 방지할 μ•ŒνŒŒκ°’μ„ μ„ νƒν•˜λŠ” 선택 μƒμžμž…λ‹ˆλ‹€.
이 μ„ νƒμƒμžκ°€ 선택될 λ•Œλ§ˆλ‹€ λ¨Έμ‹ λŸ¬λ‹μœΌλ‘œ 데이터λ₯Ό λ‹€μ‹œ ν›ˆλ ¨ν•˜κ³ , κ·Έλž˜ν”„λ„ λ‹€μ‹œ 그리도둝 ν• ν…λ°μš”.

각각의 id값은 "algorithm", "alpha_value"μž…λ‹ˆλ‹€. HTML  μ†ŒμŠ€λŠ” μ•„λž˜μ™€ κ°™κ΅¬μš”.

μ•Œκ³ λ¦¬μ¦˜ 선택 :
<select id="algorithm">
  <option value="">μ•Œκ³ λ¦¬μ¦˜μ„ μ„ νƒν•˜μ„Έμš”</option>
  <option value="릿지">릿지 νšŒκ·€ (Ridge Regression)</option>
  <option value="라쏘">라쏘 νšŒκ·€ (Lasso Regression)</option>
</select><br/>

μ•ŒνŒŒκ°’ 선택 : 
<select id="alpha_value">
  <option value="0.001">0.001</option>
  <option value="0.01">0.01</option>
  <option value="0.1">0.1</option>
  <option value="1">1</option>
  <option value="10">10</option>
  <option value="100">100</option>
</select><br/>


그리고 이 μ„ νƒμƒμžλ₯Ό 선택할 λ•Œλ§ˆλ‹€ 'κ·Έλž˜ν”„ν•¨μˆ˜'λ₯Ό ν˜ΈμΆœν•˜λ„λ‘ 파이슀크립트λ₯Ό κ΅¬μ„±ν•©λ‹ˆλ‹€.

# μžλ°”μŠ€ν¬λ¦½νŠΈμ™€ 톡신
from js import document
from pyodide import create_proxy

e1 = document.getElementById("algorithm")
e1.addEventListener("change", create_proxy(κ·Έλž˜ν”„ν•¨μˆ˜))  

e2 = document.getElementById("alpha_value")
e2.addEventListener("change", create_proxy(κ·Έλž˜ν”„ν•¨μˆ˜))


이제 κ·Έλž˜ν”„ν•¨μˆ˜λ₯Ό κ΅¬ν˜„ν•˜λ©΄ λ˜λŠ”λ°μš”.
κ·Έλž˜ν”„ν•¨μˆ˜ λ‚΄ csv νŒŒμΌμ„ λΆˆλŸ¬μ˜€λŠ” λΆ€λΆ„λΆ€ν„° μ‹œμž‘ν•΄μ„œ λͺ¨λ“  μ†ŒμŠ€λ₯Ό λ‹€ 넣어도 λ©λ‹ˆλ‹€λ§Œ,
μ—¬κΈ°μ„œλŠ” ν•œλ²ˆλ§Œ 싀행해도 λ˜λŠ” 뢀뢄은 미리 싀행해버리고,
κ·Έλž˜ν”„ν•¨μˆ˜μ—μ„œλŠ” λ³€κ²½λ˜κ±°λ‚˜ ν•„μˆ˜λ‘œ μž‘λ™ν•΄μ•Ό ν•˜λŠ” λΆ€λΆ„λ§Œ μ‹€ν–‰ν•˜λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€.

기본적으둜  csv  νŒŒμΌμ„ λΆˆλŸ¬μ™€ 데이터λ₯Ό κ°€κ³΅ν•˜λŠ” 뢀뢄은 릿지λͺ¨λΈμ΄λ‚˜ 라쏘λͺ¨λΈμ΄λ‚˜ λ˜‘κ°™μŠ΅λ‹ˆλ‹€. 그리고 κ·Έλž˜ν”„ λͺ¨λ“ˆμ„ λΆˆλŸ¬μ™€ ν•œκΈ€ 폰트λ₯Ό μ μš©ν•˜λŠ” 뢀뢄도 λ™μΌν•˜κΈ° 되기 λ•Œλ¬Έμ—,
ν•΄λ‹Ή 뢀뢄은 μ„ νƒμƒμžμ™€ λ¬΄κ΄€ν•˜κ²Œ 1번만 μˆ˜ν–‰ν•©λ‹ˆλ‹€.

<py-script>
import pandas as pd
from pyodide.http import open_url
from common import *
import numpy as np

from datetime import datetime

        :
        :
        :
        
# κ°œλ³„ 폰트 적용
NanumMyengjo = fm.FontProperties(
  fname='./NANUMMYEONGJO.TTF'
)
NanumMyengjoBold = fm.FontProperties(
  fname='./NANUMMYEONGJOBOLD.TTF'
)


이제 μ„ νƒμƒμžλ₯Ό 선택할 λ•Œ μž‘λ™ν•  'κ·Έλž˜ν”„ν•¨μˆ˜'λ₯Ό μ„ μ–Έν•©λ‹ˆλ‹€.

def κ·Έλž˜ν”„ν•¨μˆ˜(event):

그리고 μ„ νƒν•œ μ•Œκ³ λ¦¬μ¦˜μ΄ 무엇인지, μ•ŒνŒŒκ°’μ΄ μ–Όλ§ˆμΈμ§€λ₯Ό λ°›μ•„μ˜€λŠ”λ°μš”.
이 λ•Œλ„ document λͺ¨λ“ˆμ„ μ‚¬μš©ν•©λ‹ˆλ‹€.

μ•Œκ³ λ¦¬μ¦˜ = document.getElementById("algorithm").value
μ•ŒνŒŒκ°’ = float(document.getElementById("alpha_value").value)

 

μ„ νƒλœ μ•Œκ³ λ¦¬μ¦˜μ— 따라 각기 λ‹€λ₯Έ 처리λ₯Ό ν•˜λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€.
릿지와 λΌμ˜μ— λŒ€ν•œ 처리λ₯Ό λ‚˜λˆ„μ–΄ μˆ˜ν–‰ν• ν…λ°μš”.

if μ•Œκ³ λ¦¬μ¦˜=='릿지':
  : # 릿지 μ•Œκ³ λ¦¬μ¦˜μΌ λ•Œ μ²˜λ¦¬ν•  μ½”λ“œ
else:
  : # κ·Έ μ™Έ μ•Œκ³ λ¦¬μ¦˜μΌ ㅐ μ²˜λ¦¬ν•  μ½”

릿지 μ•Œκ³ λ¦¬μ¦˜μΌ λ•ŒλŠ” 릿지 λͺ¨λΈμ„ μ •μ˜ν•΄ ν›ˆλ ¨μ„ ν•˜κ³ ,

if μ•Œκ³ λ¦¬μ¦˜=='릿지':
    #=====================================
    # 릿지λͺ¨λΈ
    릿지λͺ¨λΈ = Ridge(alpha=μ•ŒνŒŒκ°’)
    릿지λͺ¨λΈ.fit(ν›ˆλ ¨μš©λ°μ΄ν„°_가곡, ν›ˆλ ¨μš©λͺ©ν‘œ)

    ν›ˆλ ¨μ μˆ˜=릿지λͺ¨λΈ.score(ν›ˆλ ¨μš©λ°μ΄ν„°_가곡, ν›ˆλ ¨μš©λͺ©ν‘œ)
    ν…ŒμŠ€νŠΈμ μˆ˜=릿지λͺ¨λΈ.score(ν…ŒμŠ€νŠΈλ°μ΄ν„°_가곡, ν…ŒμŠ€νŠΈλͺ©ν‘œ)
       :
    ν›ˆλ ¨μš©λͺ©ν‘œμ˜ˆμΈ‘ = 릿지λͺ¨λΈ.predict(ν›ˆλ ¨μš©λ°μ΄ν„°_가곡)
    ν…ŒμŠ€νŠΈλͺ©ν‘œμ˜ˆμΈ‘ = 릿지λͺ¨λΈ.predict(ν…ŒμŠ€νŠΈλ°μ΄ν„°_가곡)

라쏘 μ•Œκ³ λ¦¬μ¦˜μΌ λ•ŒλŠ” 라쏘 λͺ¨λΈμ„ μ •μ˜ν•΄μ„œ ν›ˆλ ¨μ„ ν•˜λŠ”λ°μš”.

  else:
    #=====================================
    # 라쏘λͺ¨λΈ
    라쏘λͺ¨λΈ = Lasso(alpha=μ•ŒνŒŒκ°’)
    라쏘λͺ¨λΈ.fit(ν›ˆλ ¨μš©λ°μ΄ν„°_가곡, ν›ˆλ ¨μš©λͺ©ν‘œ)
    
    ν›ˆλ ¨μ μˆ˜=라쏘λͺ¨λΈ.score(ν›ˆλ ¨μš©λ°μ΄ν„°_가곡, ν›ˆλ ¨μš©λͺ©ν‘œ)
    ν…ŒμŠ€νŠΈμ μˆ˜=라쏘λͺ¨λΈ.score(ν…ŒμŠ€νŠΈλ°μ΄ν„°_가곡, ν…ŒμŠ€νŠΈλͺ©ν‘œ)
      :
    ν›ˆλ ¨μš©λͺ©ν‘œμ˜ˆμΈ‘ = 라쏘λͺ¨λΈ.predict(ν›ˆλ ¨μš©λ°μ΄ν„°_가곡)
    ν…ŒμŠ€νŠΈλͺ©ν‘œμ˜ˆμΈ‘ = 라쏘λͺ¨λΈ.predict(ν…ŒμŠ€νŠΈλ°μ΄ν„°_가곡)


ν›ˆλ ¨ μ μˆ˜μ™€ ν…ŒμŠ€νŠΈ 점수λ₯Ό ν‘œν˜„ν•˜κΈ° μœ„ν•΄ print() ν•¨μˆ˜λ₯Ό μ“°λŠ” λŒ€μ‹ ,
ν•΄λ‹Ή μš”μ†Œλ“€μ„ ν‘œμ‹œν•  HTML νƒœκ·Έλ₯Ό 미리 쀀비해두면,

ν›ˆλ ¨μ μˆ˜ : <span id="train_score" style=''></span><br/>
ν…ŒμŠ€νŠΈμ μˆ˜ : <span id="test_score" style=''></span><br/>


μ•„λž˜μ²˜λŸΌ document λͺ¨λ“ˆμ„ 톡해 λ‚΄μš©μ„ 직접 κ°±μ‹ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
그러면 μ μˆ˜κ°€ 2, 3번 화면에 ν‘œμ‹œλ  일도 μ—†μŠ΅λ‹ˆλ‹€.

  if μ•Œκ³ λ¦¬μ¦˜=='릿지':
  
         :
         
    document.getElementById("train_score").innerHTML=ν›ˆλ ¨μ μˆ˜
    document.getElementById("test_score").innerHTML=ν…ŒμŠ€νŠΈμ μˆ˜
    
         :
         
  else:
  
         :
         
    document.getElementById("train_score").innerHTML=ν›ˆλ ¨μ μˆ˜
    document.getElementById("test_score").innerHTML=ν…ŒμŠ€νŠΈμ μˆ˜
    
         :


κ·Έλž˜ν”„λ₯Ό κ·Έλ¦¬λŠ” μœ„μΉ˜ λ˜ν•œ μ •μ˜ν•  수 μžˆλŠ”λ°μš”.
μ—­μ‹œ 사전에 HTML νƒœκ·Έλ₯Ό λ§ˆλ ¨ν•΄ 두고,

<div id="graph"></div>

κ·Έλž˜ν”„λ₯Ό κ·Έλ¦¬λŠ” 뢀뢄을 μ•„λž˜μ™€ 같이 λ³€κ²½ν•΄μ£Όλ©΄ λ©λ‹ˆλ‹€.
그러면 κ·Έλž˜ν”„ λ˜ν•œ 2, 3번 ν‘œμ‹œλ  일이 μ—†μŠ΅λ‹ˆλ‹€.

<λ³€κ²½μ „>

fig

<λ³€κ²½ν›„>

pyscript.write("graph",fig)

 

자유둜운 UI 적용


그리고 HTML 의 css μŠ€νƒ€μΌ μ‹œνŠΈλ₯Ό 잘 ν™œμš©ν•˜μ‹€ 수 μžˆλ‹€λ©΄ 
μ•„λž˜μ²˜λŸΌ 우츑 상단에 κ·Έλž˜ν”„λ₯Ό ν‘œμ‹œν•˜λŠ” λ“±μ˜ λ°©λ²•μœΌλ‘œ 자유둭게 화면을 κ΅¬μ„±ν•˜μ‹€ 수 μžˆμŠ΅λ‹ˆλ‹€.

μ΅œμ’… μ†ŒμŠ€μ—λŠ” μ—†μ§€λ§Œ μ•„λž˜ νƒœκ·Έλ₯Ό <body> μ•„λž˜ λ„£μ–΄μ£Όμ‹œλ©΄
κ·Έλž˜ν”„κ°€ 우츑 상단에 λ”± κ³ μ •λ˜μ–΄ ν‘œμ‹œλ©λ‹ˆλ‹€.

<style>
#graph {
  position:fixed;
  right:20px;
  top:20px;
  border:1px solid;
  width:1000px;
  height:500px;
}
</style>


참고둜 이 κΈ€μ˜ μ΅œμ’…μ†ŒμŠ€λŠ” μ§€λ‚œ κ²Œμ‹œκΈ€μ„ μ°Έμ‘°ν•΄ μ£Όμ„Έμš”.
https://itadventure.tistory.com/558

 

마무~리

 

μ΄μƒμœΌλ‘œ νŒŒμ΄μŠ€ν¬λ¦½νŠΈμ—μ„œ μ•„λ³΄μΉ΄λ„λ‘œ λ¨Έμ‹ λŸ¬λ‹ν•˜λŠ” 방법에 λŒ€ν•΄ μ‚΄νŽ΄λ³΄μ•˜λŠ”λ°μš”.
μ΄λ²ˆμ‹œκ°„μ—λŠ” 특히 νŒŒμ΄μŠ€ν¬λ¦½νŠΈμ™€ μžλ°”μŠ€ν¬λ¦½νŠΈκ°„ μ—°λ™ν•˜λŠ” 뢀뢄에 λŒ€ν•΄ μ‚΄νŽ΄λ³΄μ•˜μŠ΅λ‹ˆλ‹€.


아무μͺΌλ‘ ν•„μš”ν•˜μ‹  λΆ„κ»˜ 도움이 λ˜μ…¨μ„μ§€μš” :)
λ°©λ¬Έν•΄μ£Όμ‹œλŠ” λͺ¨λ“  λΆ„λ“€κ»˜ 늘 κ°μ‚¬λ“œλ¦½λ‹ˆλ‹€.

μœ μ΅ν•˜μ…¨λ‹€λ©΄ 곡감  ν•œλ°©, λŒ“κΈ€μ€ ꡿작!
κ°μ‚¬ν•©λ‹ˆλ‹€~


λ‹€μŒ κ²Œμ‹œκΈ€ : https://itadventure.tistory.com/560

 

νŒŒλ„(18) - λžœλ€κ³ μ–‘μ΄ 이미지 뢈러였기

β€» 'νŒŒλ„'λŠ” 크레이의 '파이슀크립트 도전기'의 μ€„μž„λ§μž…λ‹ˆλ‹€. μ§€λ‚œ κ²Œμ‹œκΈ€μ—μ„œ μ—°μž¬λ˜λŠ” κΈ€μž…λ‹ˆλ‹€. : https://itadventure.tistory.com/559 νŒŒλ„(17) - μžλ°”μŠ€ν¬λ¦½νŠΈμ™€ 파이슀크립트, μ†μž‘λ‹€! 🍬 'νŒŒλ„'λŠ”

itadventure.tistory.com

 

λ°˜μ‘ν˜•