μ½”λ”© 지식 없이 WordPressμ—μ„œ μ›ν˜• 차트λ₯Ό λ§Œλ“œλŠ” 방법

μ›ν˜• 차트λ₯Ό ν‘œμ‹œν•˜λ©΄ μ›Ή νŽ˜μ΄μ§€μ— λ‹€μ–‘ν•œ μœ ν˜•μ˜ 데이터λ₯Ό ν‘œμ‹œν•˜λŠ” 데 νŽΈλ¦¬ν•  수 μžˆμŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ 코더가 μ•„λ‹ˆκ±°λ‚˜ CSS에 λŒ€ν•œ νŽΈμ§‘ 기술이 μΆ©λΆ„ν•˜λ‹€λ©΄ μ–΄λ €μšΈ 수 μžˆμŠ΅λ‹ˆλ‹€.

그런데 ElementsKitμ—μ„œλŠ” 그렇지 μ•ŠμŠ΅λ‹ˆλ‹€!

μ›Ήμ‚¬μ΄νŠΈμ— ElementsKit을 μ„€μΉ˜ν•˜λ©΄ λ“œλž˜κ·Έ μ•€ λ“œλ‘­λ§ŒμœΌλ‘œ μ›ΉνŽ˜μ΄μ§€μ— μ›ν˜• 차트λ₯Ό μ‰½κ²Œ μΆ”κ°€ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

이 λΈ”λ‘œκ·Έ κ²Œμ‹œλ¬Όμ—μ„œλŠ” λͺ‡ 가지 κ°„λ‹¨ν•œ 단계λ₯Ό 톡해 WordPressμ—μ„œ μ›ν˜• 차트λ₯Ό λ§Œλ“œλŠ” 방법을 λ°°μ›λ‹ˆλ‹€.

μ›ν˜• μ°¨νŠΈλž€ λ¬΄μ—‡μž…λ‹ˆκΉŒ?

데이터가 원 μ•ˆμ˜ μ—¬λŸ¬ μ„Ήμ…˜μœΌλ‘œ κ·Έλž˜ν”½μœΌλ‘œ ν‘œμ‹œλ˜λŠ” 경우λ₯Ό 파이 차트라고 ν•©λ‹ˆλ‹€. 데이터와 ν‘œν˜„ μŠ€νƒ€μΌμ€ λ‹€μ–‘ν•  수 μžˆμ§€λ§Œ λ°μ΄ν„°λŠ” κ·Έλž˜ν”½ 원 μ•ˆμ— ν‘œμ‹œλ©λ‹ˆλ‹€. λ•Œλ‘œλŠ” μ„œν΄μ˜ 데이터λ₯Ό μ‚¬μš©μž μ •μ˜ν•˜μ—¬ λ…νŠΉν•œ 것을 생각해 λ‚Ό 수 μžˆμŠ΅λ‹ˆλ‹€.

WordPressμ—μ„œ μ›ν˜• 차트λ₯Ό λ§Œλ“œλŠ” 방법은 λ¬΄μ—‡μž…λ‹ˆκΉŒ?

λͺ‡ 가지 κ°„λ‹¨ν•œ 단계λ₯Ό 톡해 WordPress λŒ€μ‹œλ³΄λ“œ λ‚΄μ—μ„œ λ°”λ‘œ μ›ν˜• 차트λ₯Ό λ§Œλ“œμ„Έμš”. μ—¬κΈ°μ—μ„œ κ³΅μœ ν•œ 지침을 λ”°λ₯΄μ„Έμš”.

1단계: ν”ŒλŸ¬κ·ΈμΈ μ„€μΉ˜

μ—¬κΈ°μ„œ 우리의 λͺ©ν‘œλŠ” μ½”λ“œλ₯Ό μž‘μ„±ν•˜μ§€ μ•Šκ³  WordPressμ—μ„œ μ›ν˜• 차트λ₯Ό λ§Œλ“œλŠ” κ²ƒμž…λ‹ˆλ‹€. κ·Έλž˜μ„œ μš°λ¦¬λŠ” κ°€μž₯ 인기 μžˆλŠ” ν”ŒλŸ¬κ·ΈμΈμ„ μ‚¬μš©ν•  κ²ƒμž…λ‹ˆλ‹€. μ—˜λ ˆλ©˜ν„° μ• λ“œμ˜¨ ElementsKit.

이λ₯Ό μœ„ν•΄ κ·€ν•˜μ˜ WordPress λŒ€μ‹œλ³΄λ“œ > ν”ŒλŸ¬κ·ΈμΈ > μƒˆλ‘œ μΆ”κ°€. 이제 상단 검색창, Elementorλ₯Ό κ²€μƒ‰ν•˜μ„Έμš”. 찾으면 μ„€μΉ˜ν•˜κ³  ν™œμ„±ν™”ν•˜μ‹­μ‹œμ˜€.

λ§ˆμ°¬κ°€μ§€λ‘œ ElementsKit을 μ„€μΉ˜ν•˜κ³  ν™œμ„±ν™”ν•˜μ‹­μ‹œμ˜€.

2단계: ν”ŒλŸ¬κ·ΈμΈ μ„€μ • 선택

ElementsKit ν”ŒλŸ¬κ·ΈμΈμ—μ„œ 일뢀 섀정을 지정해야 ν•©λ‹ˆλ‹€. 이λ₯Ό μœ„ν•΄ WordPress λŒ€μ‹œλ³΄λ“œλ‘œ μ΄λ™ν•˜μ—¬ ElementsKit으둜 마우슀λ₯Ό κ°€μ Έκ°‘λ‹ˆλ‹€. 이제 μ›ν˜• 차트 μœ„μ ―μœΌλ‘œ μ›ν˜• 차트λ₯Ό λ§Œλ“€ κ²ƒμ΄λ―€λ‘œ 'μœ„μ ―'을 μ„ νƒν•˜μ‹­μ‹œμ˜€.

μœ„μ ― λͺ©λ‘μ—μ„œ '파이 차트' μœ„μ ―μ„ μΌœμ£Όμ„Έμš”. κ·ΈλŸ¬λ‚˜ μ›Ή νŽ˜μ΄μ§€ ꡬ좕에 λŒ€ν•œ μ΅œμƒμ˜ κ²½ν—˜μ„ μ–»μœΌλ €λ©΄ λͺ¨λ“  μœ„μ ―μ„ μΌœλŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€.

μ›ν˜• 차트 μŠ€νƒ€μΌ

3단계: μƒˆ νŽ˜μ΄μ§€ λ§Œλ“€κΈ°

이제 μ›Ή νŽ˜μ΄μ§€μ— 차트λ₯Ό 생성할 μ€€λΉ„κ°€ λͺ¨λ‘ μ™„λ£Œλ˜μ—ˆμŠ΅λ‹ˆλ‹€. μ‚¬μš©μž μ •μ˜ 데이터가 ν¬ν•¨λœ 차트λ₯Ό ν‘œμ‹œν•  νŽ˜μ΄μ§€λ₯Ό λ§Œλ“­λ‹ˆλ‹€. λ˜λŠ” κΈ°μ‘΄ νŽ˜μ΄μ§€ 쀑 ν•˜λ‚˜λ₯Ό 선택할 수 μžˆμŠ΅λ‹ˆλ‹€.

νŽ˜μ΄μ§€λ₯Ό λ§Œλ“€κ³  Elementor둜 νŽΈμ§‘ν•˜μ„Έμš”

파이 κ·Έλž˜ν”„λ₯Ό ν‘œμ‹œν•˜κΈ° μœ„ν•΄ μ–΄λ–€ νŽ˜μ΄μ§€λ₯Ό μ„ νƒν•˜λ“  였λ₯Έμͺ½ μƒλ‹¨μ—μ„œ 'Elementor둜 νŽΈμ§‘'을 μ„ νƒν•˜μ„Έμš”.

ElementsKit의 λͺ¨λ“  κΈ°λŠ₯을 μ‚¬μš©ν•  수 μžˆλŠ” νŽΈμ§‘κΈ° νŽ˜μ΄μ§€λ‘œ λ¦¬λ””λ ‰μ…˜λ©λ‹ˆλ‹€. 

4단계: μ›ν˜• 차트 μœ„μ ― μΆ”κ°€

μ™Όμͺ½ νŒ¨λ„μ—μ„œ μ›ν˜• 차트 μœ„μ ―μ„ κ²€μƒ‰ν•˜μ—¬ νŽ˜μ΄μ§€μ— λŒμ–΄λ‹€ λ†“μŠ΅λ‹ˆλ‹€.

μ›ν•˜λŠ” 경우 νŽ˜μ΄μ§€μ— μœ„μ ―μ„ λŒμ–΄μ„œ 놓기 전에 νŠΉμ • μœ ν˜•μ˜ μ„Ήμ…˜μ„ 생성할 수 μžˆμŠ΅λ‹ˆλ‹€.

μ›ν˜• 차트 λ“œλž˜κ·Έ μ•€ λ“œλ‘­

μ„Ήμ…˜μ„ μΆ”κ°€ν•˜λ €λ©΄ λ”ν•˜κΈ° μ•„μ΄μ½˜μ„ ν΄λ¦­ν•˜κ³  μ„Ήμ…˜μ„ μΆ”κ°€ν•˜μ„Έμš”.

5단계: μ›ν˜• 차트 μ‚¬μš©μž 지정

기본적으둜 μ›ν˜• μ°¨νŠΈμ—λŠ” λͺ‡ 가지 사전 섀정이 μžˆμŠ΅λ‹ˆλ‹€. λͺ‡ 번의 클릭만으둜 μ΄λŸ¬ν•œ 섀정을 μ‚¬μš©μž μ •μ˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

μ›ν˜• 차트 μ‚¬μš©μž μ •μ˜

μ½˜ν…μΈ  νƒ­μ—μ„œλŠ” μ›ν˜• 차트 μŠ€νƒ€μΌ, 차트 μ½˜ν…μΈ  및 차트의 λ°±λΆ„μœ¨μ„ λ³€κ²½ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

μ›ν˜• 차트 μŠ€νƒ€μΌ: μ—¬κΈ°μ—μ„œ λ‹¨μˆœ λ˜λŠ” μ½˜ν…μΈ  포함을 선택할 수 μžˆμŠ΅λ‹ˆλ‹€.

차트 λ‚΄μš©: 이 μ„Ήμ…˜μ—μ„œλŠ” μ°¨νŠΈμ— λ°±λΆ„μœ¨μ΄λ‚˜ μ•„μ΄μ½˜μ„ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μ•„μ΄μ½˜μ„ μ„ νƒν•˜λ©΄ μ•„μ΄μ½˜μ„ λ§žμΆ€μ„€μ •ν•  수 μžˆλŠ” μ—¬λŸ¬ μ˜΅μ…˜μ΄ ν‘œμ‹œλ©λ‹ˆλ‹€. μ°¨νŠΈμ— ν‘œμ‹œν•˜λ €λ©΄ 맞좀 μ•„μ΄μ½˜μ„ μ—…λ‘œλ“œν•˜μ„Έμš”.

λ°±λΆ„μœ¨: μ—¬κΈ°μ„œ 차트의 λ°±λΆ„μœ¨μ„ μ„ νƒν•˜κ³  μ„€μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

λ‹€μŒμœΌλ‘œ μŠ€νƒ€μΌ νƒ­μœΌλ‘œ μ΄λ™ν•˜μ—¬ μ°¨νŠΈμ— μŠ€νƒ€μΌμ„ μ§€μ •ν•©λ‹ˆλ‹€.

μ›ν˜• 차트 크기: μ›ν•˜λŠ” 경우 μ›ν˜• 차트 크기λ₯Ό μ‘°μ •ν•©λ‹ˆλ‹€. 크기λ₯Ό μ μ–΄λ‘κ±°λ‚˜ λ§‰λŒ€λ₯Ό λ“œλž˜κ·Έν•˜μ—¬ 크기λ₯Ό λŠ˜λ¦¬κ±°λ‚˜ 쀄일 수 μžˆμŠ΅λ‹ˆλ‹€.

ν…Œλ‘λ¦¬ 크기: μ—¬κΈ°μ—μ„œ μ‘°μ • λ§‰λŒ€λ₯Ό μ‚¬μš©ν•˜μ—¬ ν…Œλ‘λ¦¬ 크기λ₯Ό μ„€μ •ν•©λ‹ˆλ‹€.

색상 μœ ν˜•: μ›ν•˜λŠ” λŒ€λ‘œ 차트의 μ‚¬μš©μž μ •μ˜ 색상을 μ„ νƒν•©λ‹ˆλ‹€.

λ°” 색상: νŽ˜μ΄μ§€ λ””μžμΈμ— 맞게 λ§‰λŒ€ 색상을 μΆ”κ°€ν•©λ‹ˆλ‹€.

λ°” 배경색: μ›ν˜• μ°¨νŠΈμ— 배경색을 μΆ”κ°€ν•˜λ©΄ 보기가 더 μ’‹μ•„μ§‘λ‹ˆλ‹€.

μ•„μ΄μ½˜ 색상: 차트 μ•„μ΄μ½˜μ„ μΆ”κ°€ν•œ 경우 μ—¬κΈ°μ—μ„œ μ‚¬μš©μž μ •μ˜ 색상을 선택할 수 μžˆμŠ΅λ‹ˆλ‹€.

더 λ§Žμ€ μ‚¬μš©μž μ •μ˜λ₯Ό μ›ν•˜λŠ” 경우 κ³ κΈ‰ μ„€μ •μœΌλ‘œ μ΄λ™ν•˜μ—¬ ν•„μš”ν•œ 변경을 μˆ˜ν–‰ν•˜μ—¬ 차트λ₯Ό μ‚¬μš©μž μΉœν™”μ μœΌλ‘œ λ§Œλ“œμ‹­μ‹œμ˜€.

6단계: νŽ˜μ΄μ§€ 전망 μ‚¬μš©μž μ •μ˜

Elementorλ₯Ό μ‚¬μš©ν•˜μ—¬ νŽ˜μ΄μ§€ 전망을 μ‚¬μš©μž μ •μ˜ν•  μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€. 이λ₯Ό μœ„ν•΄ μ„Ήμ…˜ 상단에 점선 λ²„νŠΌμ΄ μžˆμŠ΅λ‹ˆλ‹€. 그것을 ν΄λ¦­ν•˜λ©΄ λ ˆμ΄μ•„μ›ƒ νƒ­μœΌλ‘œ λ¦¬λ””λ ‰μ…˜λ©λ‹ˆλ‹€.

Elementor둜 νŽ˜μ΄μ§€ λ ˆμ΄μ•„μ›ƒ νŽΈμ§‘

νŽ˜μ΄μ§€ λ ˆμ΄μ•„μ›ƒμ„ μ‚¬μš©μž μ •μ˜ν•  수 μžˆλŠ” λͺ¨λ“  μ˜΅μ…˜μ΄ μ œκ³΅λ©λ‹ˆλ‹€.

7단계: 미리보기 및 κ²Œμ‹œ

λ§ˆμ§€λ§‰μœΌλ‘œ λͺ¨λ“  μž‘μ—…μ„ μ œλŒ€λ‘œ μˆ˜ν–‰ν–ˆλ‹€λ©΄ 파이 차트 미리보기λ₯Ό ν™•μΈν•˜μ„Έμš”. μ™„λ²½ν•΄ 보인닀면 κ²Œμ‹œ λ²„νŠΌμ„ λˆ„λ₯΄μ„Έμš”.

읽고 싢은 μΆ”κ°€ 자료:

디지털 λ§ˆμΌ€νŒ… λŒ€ν–‰μ‚¬ μ›Ήμ‚¬μ΄νŠΈλ₯Ό λ§Œλ“œλŠ” 방법 [λ…Έμ½”λ“œ μŠ€νƒ€μΌ]

WordPressμ—μ„œ μ²­μ†Œ 사업 μ›Ήμ‚¬μ΄νŠΈλ₯Ό λ§Œλ“œλŠ” 방법

WordPress μ›Ήμ‚¬μ΄νŠΈμ— μ±„μš© νŽ˜μ΄μ§€λ₯Ό λ§Œλ“œλŠ” 방법

μ›Ήμ‚¬μ΄νŠΈμ—μ„œ μ›ν˜• 차트λ₯Ό μ‚¬μš©ν•΄μ•Ό ν•˜λŠ” μ΄μœ λŠ” λ¬΄μ—‡μž…λ‹ˆκΉŒ?

μ›ν˜• 차트λ₯Ό μ‚¬μš©ν•˜λ©΄ μ›Ήμ‚¬μ΄νŠΈμ˜ 정보λ₯Ό μ‰½κ²Œ 이해할 수 μžˆμŠ΅λ‹ˆλ‹€. 색상과 λͺ¨μ–‘을 μ‚¬μš©ν•˜μ—¬ λ°±λΆ„μœ¨κ³Ό 비ꡐλ₯Ό ν‘œμ‹œν•˜λ―€λ‘œ λ°©λ¬Έμžκ°€ λ³΅μž‘ν•œ 데이터λ₯Ό μ‰½κ²Œ νŒŒμ•…ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μ›ν˜• 차트λ₯Ό μ‚¬μš©ν•˜λ©΄ μ›Ή μ‚¬μ΄νŠΈλ₯Ό λ”μš± ν₯미둭게 λ§Œλ“€κ³  μ‚¬λžŒλ“€μ΄ 정보λ₯Ό 더 잘 μ΄ν•΄ν•˜λ„λ‘ λ„μšΈ 수 μžˆμŠ΅λ‹ˆλ‹€.

μ΅œμ’… 단어

μ›ν˜• 차트λ₯Ό λ§Œλ“œλŠ” 것은 μ–΄λ €μš΄ μž‘μ—…μ΄ μ•„λ‹™λ‹ˆλ‹€. λ‹¨μˆœνžˆ νž˜μ„ μ‚¬μš©ν•˜μ‹­μ‹œμ˜€. ElementsKit의 κΈ°μ‘΄ ν”ŒλŸ¬κ·ΈμΈκ³Ό λ§ˆμ°¬κ°€μ§€λ‘œ 단일 μœ ν˜•μ˜ μž‘μ—…μ„ μœ„ν•œ 것이 μ•„λ‹™λ‹ˆλ‹€. ElementsKit만 μ‚¬μš©ν•˜λ©΄ 전체 μ›Ήμ‚¬μ΄νŠΈλ₯Ό λ””μžμΈν•  수 μžˆμŠ΅λ‹ˆλ‹€. κ·ΈλŸ¬λ‹ˆ 그것을 μ‹œλ„ν•˜κ³  κ·€ν•˜μ˜ μ›Ή μ‚¬μ΄νŠΈμ— λŒ€ν•œ μ™„λ²½ν•œ λͺ¨μ–‘을 μ–»μœΌμ‹­μ‹œμ˜€.

μ½”λ©˜νŠΈ

λ‹΅κΈ€μ“°κΈ°

이메일은 ν‘œμ‹œλ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. ν•„μˆ˜ ν•„λ“œλŠ” *둜그인이 λ©λ‹ˆλ‹€