๐ 01. ๋ถํธ์คํธ๋ฉ ์ค์น
Bootstrap
๊ฐ๋ ฅํ๊ณ ํ์ฅ ๊ฐ๋ฅํ๋ฉฐ ๊ธฐ๋ฅ์ด ํ๋ถํ ํ๋ก ํธ์๋ ํดํท. Sass๋ก ๋น๋ ๋ฐ ์ปค์คํฐ๋ง์ด์งํ๊ณ , ์ฌ์ ๋น๋๋ ๊ทธ๋ฆฌ๋ ์์คํ ๋ฐ ๊ตฌ์ฑ ์์๋ฅผ ํ์ฉํ๊ณ , ๊ฐ๋ ฅํ JavaScript ํ๋ฌ๊ทธ์ธ์ผ๋ก ํ๋ก์ ํธ์ ์๊ธฐ
getbootstrap.kr
๋ถํธ์คํธ๋ฉ์ด๋ ์ฝ๊ฒ ์ค๋ช ํ๋ฉด ์นํ์ด์ง ํ ํ๋ฆฟ ๋ชจ์์ด๋ค. PPT๋ฅผ ๋ง๋ค ๋ ํ ํ๋ฆฟ์ ์ฐพ์์ ๋ค์ด๋ฐ๋ ๊ฒ์ฒ๋ผ, ์นํ์ด์ง๋ฅผ ๋ง๋ค๊ธฐ ์ํ ํ ํ๋ฆฟ๋ค์ด ๋ถํธ์คํธ๋ฉ ์์ ์๋ค.
๋ถํธ์คํธ๋ฉ์ "์คํํฐ ํ ํ๋ฆฟ"์ ์ฅ๊ณ ์ html์ ๋ณต๋ถํ์ฌ, ์ฐ๋ฆฌ๊ฐ ๋ถํธ์คํธ๋ฉ์ ์ฌ์ฉํ ์ ์๋๋ก css์ jsํ์ผ์ ์ถ๊ฐ์ํจ๋ค. ์คํํฐ ํ ํ๋ฆฟ์ ๋ถ์ฌ๋ฃ๊ฒ ๋๋ฉด ๋ถํธ์คํธ๋ฉ์ผ๋ก ์ํ๋ ๊ธฐ๋ฅ์ ๊ตฌํํ ์ ์๋ค.
์ด์ ์ธ์คํ๊ทธ๋จ ํ๋ฉด ์๋จ์ "๋ด๋น๊ฒ์ด์ ๋ฐ"๋ฅผ ์นํ์ด์ง์ ์ถ๊ฐํ๋๋ก ํ์.
๐ 02. ๋ด๋น ๋ฐ ๋ง๋ค๊ธฐ
"๋ด๋น๊ฒ์ด์ ๋ฐ"๋ ์์ ์ฌ์ง์ฒ๋ผ ์๋จ์ ๋ฉ๋ด๋ฅผ ํ๊ธฐํ๊ธฐ ์ํ ๋ฐ์ธ๋ฐ, ์ด๊ฒ ์ญ์ ๋ถํธ์คํธ๋ฉ์์ ๊ธฐ๋ณธ ํ์ ์ ๊ณตํ๋ค. ๋ถํธ์คํธ๋ฉ์์ "๋ด๋น ๋ฐ"๋ฅผ ๊ฒ์ํ๋ฉด ๋๋ค.
๋ด๋น ๋ฐ๋ฅผ ๊ธฐ๋ณธ์ผ๋ก ํ๊ณ ํฌ๋กฌ์ ๊ฐ๋ฐ์ ๋ชจ๋(F12)๋ฅผ ์ด์ฉํ๋ฉด ์นํ์ด์ง์ html์ ๋ณผ ์ ์๋๋ฐ, ์ฌ๊ธฐ์ ํ๋ํ๋ ๋น๊ตํ๋ฉฐ html์ ์์ ํ๋ฉด ๋๋ค.
๋จผ์ , ์ผ์ชฝ ์๋จ์ ์ธ์คํ๊ทธ๋จ ๋ก๊ณ ๋ฅผ ๋ง๋ค๋๋ก ํ์.
์นํ์ด์ง์ ์ฌ์ง์ ๋ฃ์ผ๋ ค๋ฉด ์ด๋ฏธ์ง ์ฝ์ html ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋๋ฐ, ํ๊ทธ๋ช <img>์ src ์์ฑ์ผ๋ก ์ด๋ฏธ์ง url์ ์ ์ผ๋ฉด ๋๋ค.
๋ง์ฝ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ๊ณ ์ถ๋ค๋ฉด img ์์ style ์์ฑ์ ๋ฃ์ด ์์ ํ๋ฉด ๋๋ค. style๋ก ๋ฃ์ ์์ฑ์ด ๋ฐ๋ก css์ด๋ค. height๋ฅผ ํฝ์ ๋จ์๋ก ์ฃผ๊ณ , object-fit์ contain์ผ๋ก ํ๋ฉด ๊ฐ๋ก, ์ธ๋ก ๋น์จ์ ๋ง์ถฐ์ ์๋์ผ๋ก ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ๋ค.
์ธ์คํ๊ทธ๋จ ๋ก๊ณ ๋ฅผ ๋ด๋น ๋ฐ์ ์ฝ์ ํ๋ค๋ฉด, ์ด๋ฒ์ ์ธ์คํ๊ทธ๋จ ์๋จ์ ๊ฒ์์ฐฝ์ ๋ฃ์ด๋ณด๋๋ก ํ์.
๊ฒ์์ฐฝ์ ๋ถํธ์คํธ๋ฉ์ ๋ด๋น ๋ฐ ์์ค ์ฝ๋๋ฅผ ์ฝ๊ฐ๋ง ์์ ํ๋ฉด ๋ง๋ค ์ ์๋ค. ์ด ๋, css๋ก width๋ฅผ 200px์ ์ฃผ์๋๋ฐ, ์ด๊ฑธ ํ์ง ์์ผ๋ฉด ๋ด๋น ์ ์ฒด๊ฐ ๊ฒ์์ฐฝ์ด ๋๋ค. width์ ํ์๋ก ์ง์ ํด์ฃผ์ด์ผ ํ๊ณ , ์ ๋นํ ๊ฐ๋ก ๊ธธ์ด๋ฅผ ์ ํด์ width์ ๋ฃ์ด์ค๋ค.
์ด์ ๋ด๋น ๋ฐ ์ค๋ฅธ์ชฝ์ ์์ด์ฝ๋ค์ ๋ง๋ค์ด๋ณด์.
์ธ์คํ๊ทธ๋จ ์์ด์ฝ๋ค์ ์ด๋ฏธ์ง๋ก ๋ฃ์ด๋ ๋์ง๋ง, "๊ตฌ๊ธ ๋จธํฐ๋ฆฌ์ผ ์์ด์ฝ"์ ์ด์ฉํ์ฌ ๋ฃ์ด๋ณด๋๋ก ํ๊ฒ ๋ค. ์๋ ๋งํฌ์์ ์ฝ๊ฒ ๋ฐ์์ ์ฌ์ฉํ ์ ์๋ค. web์์ ์ฌ์ฉํ ๋๋ <span> html ์์ค๋ฅผ ์ฌ์ฉํ๋ฉด ๋๊ณ , ๋ณต์ฌํด์ html์ ๋ถ์ฌ๋ฃ์ผ๋ฉด ๋๋ค.
https://fonts.google.com/icons
Material Symbols and Icons - Google Fonts
Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.
fonts.google.com
ํ์ง๋ง ๊ทธ ์ ์, ์ฐ๋ฆฌ๊ฐ ๋ถํธ์คํธ๋ฉ์ ์ฐ๊ธฐ ์ํด ์คํํฐ ํ ํ๋ฆฟ์ ๋ณต์ฌํด์ค ๊ฒ์ฒ๋ผ ๋จธํฐ๋ฆฌ์ผ ์์ด์ฝ ์ญ์ css์ js๋ฅผ ์ฌ์ฉํ ์ ์๋๋ก url์ ์ ์ด์ฃผ์ด์ผ ํ๋ค. <head> ๋ถ๋ถ์ ๊ตฌ๊ธ ๋จธํฐ๋ฆฌ์ผ ์์ด์ฝ ์ฌ์ฉ์ ์ํ url์ ์ ์ด์ฃผ๋ฉด ๋๋ค.
๊ทธ ํ, ๋ด๋น ๋ฐ ์์ ๋ณต์ฌํ๋ <span> ํ๊ทธ๋ฅผ ๋ถ์ฌ๋ฃ์ผ๋ฉด ๋๋ค.
๐ 03. <div>๋ก ํ๋ฉด์ ๋ถํ ํด๋ณด์
์ธ์คํ๊ทธ๋จ ํผ๋ํ๋ฉด์ ๋ณด๋ฉด ์ผ์ชฝ๊ณผ ์ค๋ฅธ์ชฝ์ด ๋๋์ด์ ธ ์๋ค. ์ผ์ชฝ์ ํผ๋, ์ค๋ฅธ์ชฝ์๋ ์น๊ตฌ ์ถ์ฒํ๋ฉด์ด ๋จ๊ฒ ๋๋๋ฐ, <div> ํ๊ทธ๋ฅผ ํ์ฉํ์ฌ ๋ฐ๋ ๋ถ๋ถ์ ๋๋ ์ ์๋ค. <div> ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ ํ๋ฉด์ด ์ด๋ป๊ฒ ๋๋์ด์ง๋์ง ์ดํด๋ณด๋๋ก ํ์. ๋ค์๊ณผ ๊ฐ์ด html์ ์์ฑํ๋ฉด ํ๋ฉด์ ์(skyblue ์์), ์๋(yellow ์์)์ผ๋ก ๋๋์ด์ง๊ฒ ๋๋ค.
์ธ์คํ๊ทธ๋จ ํ๋ฉด์ ๋ง๋ค๊ธฐ ์ํด์๋ ํ๋ฉด์ ์ผ์ชฝ, ์ค๋ฅธ์ชฝ์ผ๋ก ๋๋์ด์ผ ํ๋๋ฐ ์ด๋ด ๋๋ css "display" ๋ฅผ ํ์ฉํ๋ฉด ๋๋ค. "display : flex" ์ต์ ์ ํตํด ํ๋ฉด์ ๊ฐ๋ก๋ก ๋์ด์ํฌ ์ ์๋ค.
์ค์ ์ธ์คํ๊ทธ๋จ ํ๋ฉด์ฒ๋ผ ์๋จ์ ๋ด๋น ๋ฐ์ ์ค๋ฅธ์ชฝ ํ๋ฉด์ด ํญ์ ๊ณ ์ ๋๊ธฐ ์ํด์๋ ๋ด๋น ๋ฐ์ ์ค๋ฅธ์ชฝ <div> ์ css "position"๋ฅผ ํ์ฉํ๋ฉด ๋๋ค. "position : fixed"๋ฅผ ํตํด ์คํฌ๋กค์ ์ํฅ์ ์ ๋ฐ๊ณ ํญ์ ๊ณ ์ ๋๋๋ก ๋ง๋ค์ด ๋ณด์.
๐ 04. ํผ๋ํ๋ฉด ๋ง๋ค๊ธฐ (์ผ์ชฝ)
์ธ์คํ๊ทธ๋จ ์ผ์ชฝ ํ๋ฉด์ ์ฌ๋ฌ ๊ฐ์ ํผ๋๊ฐ ์๊ธฐ๊ฒ ๋ ํ ๋ฐ, ์ด๊ฒ์ ์ธ๋ก๋ก ์ ๋ ฌํ๊ธฐ ์ํด์๋ <div> ํ๊ทธ css "flex-direction"์ column์ผ๋ก ์ค์ ํ๋ฉด ๋๋ค. ๋ค๋ง, ๋ฐ๋ณต์ ์ผ๋ก ์ฌ๋ฌ ๊ฐ์ <div>๋ฅผ ๋ง๋ค๊ฒ ๋๋ฉด ์ผ์ผ์ด style์ ๊ธธ๊ฒ ๋ฃ์ด์ค์ผ ํ๋ ๋ฒ๊ฑฐ๋ก์์ด ์๊ธธ ์ ์๋๋ฐ, ์ด๋ css๋ฅผ ๊ฐ๊ฒฐํ๊ฒ ํํํ ์ ์๋ ๋ฐฉ๋ฒ์ ํ์ฉํ๋ฉด ๋๋ค. ๋ฐ๋ก html ์์ค ์์ <style> ํ๊ทธ๋ฅผ ๋ฐ๋ก ๋ง๋ค์ด ๊ด๋ฆฌํ๋ ๊ฒ์ด๋ค.์๋์ ๊ฐ์ด <style>ํ๊ทธ ์์ "left_body" ๋ผ๋ css๋ฅผ ๋ง๋ค์ด๋ณด์.
๊ทธ ํ ์ฌ์ ์ ๋ง๋ค์ด ๋์ <div> ์ left_body๋ผ๋ class๋ฅผ ์ถ๊ฐํ๋ฉด(<div class = "left_box">) ์์ <style> ํ๊ทธ์ ์์ฑํ "left_body" css์ 5๊ฐ์ง ์์ฑ์ด ๋ชจ๋ ์ ์ฉ๋๋ค.
- margin-right : ์์ ์ค๋ฅธ์ชฝ์ ๋ฐ๊นฅ ์ฌ๋ฐฑ์ ์ค์ ํ๋ค.
- width : ๋๋น ์ค์
- height : ๋์ด ์ค์
- display: flex : ์์๋ค์ ์์ ๋กญ๊ฒ ์์น์ํจ๋ค.
- flex-direction : column : ์ธ๋ก๋ก ์ ๋ ฌ์ํจ๋ค.
์ด์ฒ๋ผ, css๋ ์๋จ์ ์ ์ํด๋๊ณ ์ฌ๋ฌ ํ๊ทธ์์ class๋ฅผ ํ์ฉํ์ฌ ์ถ๊ฐํ ์ ์๋ค. ์ฐธ๊ณ ๋ก <div class = "border feed_box"> ์์ border๋ ํ ๋๋ฆฌ๋ฅผ ๋ง๋๋ css์ด๋ค. ์ฌ๋ฌ๊ฐ์ ํผ๋๋ฐ์ค๋ฅผ ํ ๋๋ฆฌ๋ฅผ ํตํด ๊ตฌ๋ถํ๊ธฐ ์ํด border๋ฅผ ์ฃผ์๋ค.
์ด์ ์ง์ง ์ธ์คํ๊ทธ๋จ ํผ๋ํ๋ฉด์ฒ๋ผ ๋ณด์ด๊ธฐ ์ํด ๋จผ์ ์ผ์ชฝ ํ๋ฉด์ ๋ง๋ค์ด๋ณด๋๋ก ํ์. ์๋์ ๋ค์๊ณผ ๊ฐ์ด ์์๋ฅผ ์ ํ๋ค.
๐ 04-1. ํผ๋ ์ด๋ฏธ์ง ์ฝ์ ํ๊ธฐ
๋จผ์ ์ธ์คํ๊ทธ๋จ ํผ๋์๋ ์ฌ์ง์ด ์์ด์ผ ํ๋ค. ๊ณ ๋ฅธ ์ฌ์ง์ "์ด๋ฏธ์ง ๋งํฌ ๋ณต์ฌ" ํ์ฌ html์ "feed_box" <div>์ <img>ํ๊ทธ์ ๋ถ์ฌ ๋ฃ์ผ๋ฉด ๋๋ค. ์ด๋ฏธ์ง๋ <img>ํ๊ทธ์ class๋ฅผ ํ์ฉํ์ฌ, ์์ <style> ํ๊ทธ์์ ์์ฑํ ์์ฑ์ ๋ฐ๋ฅธ๋ค.
<style>์ feed_img ์์ฑ์ object-fit : contain์ผ๋ก ์ฃผ์๊ธฐ ๋๋ฌธ์ ๊ฐ๋ก ์ธ๋ก ๋น์จ์ด ์๋์ผ๋ก ๋ง์ถฐ์ฃผ๊ฒ ๋๊ณ , width : 100%์ด๊ธฐ ๋๋ฌธ์ ์ผ์ชฝ๋ฐ๋์ ๋๋น ๊ธฐ์ค์ผ๋ก ๋ฑ ๋ง๋ ์ด๋ฏธ์ง๊ฐ ๋ค์ด๊ฐ๊ฒ ๋๋ค.
๐ 04-2. ํผ๋ ์์ ์์ด์ฝ ์ฝ์ ํ๊ธฐ
ํผ๋ ์์ ์์ด์ฝ์ ์์ฑํ๋ ๊ฒ์ ์์ ๊ตฌ๊ธ ๋จธํฐ๋ฆฌ์ผ ์์ด์ฝ์ ๋ด๋น ๋ฐ์ ๋ฃ์ ๊ฒ์ ์์ฉํ๋ฉด ๋๋ค.
ํผ๋ ์์ ์์ด์ฝ ์ญ์ <style> ํ๊ทธ ๋ด์ ์์ฑ์ ์ ๋ ฅํ์ฌ html์ ๋ฐ๋ณต์ ์ผ๋ก ์์ฑํด์ผํ๋ ๋ฒ๊ฑฐ๋ก์์ ์ค์ผ ์ ์๋ค.
- padding : ๋ด์ฉ(content)๊ณผ ํ
๋๋ฆฌ(border) ์ฌ์ด์ ๊ฐ๊ฒฉ์ธ ํจ๋ฉ ์์ญ์ ํฌ๊ธฐ๋ฅผ ์ค์ ํ๋ค.
padding : 5px 5px 0px 5px ์ ์ฒซ ๋ฒ์งธ ์์ฑ๊ฐ๋ถํฐ ๋ง์ง๋ง ์์ฑ๊ฐ๊น์ง ์,์ฐ,ํ,์ข(์๊ณ๋ฐฉํฅ)์ ๋ฐฉํฅ์ ๊ฐ์ง๋ค.
(ex) ์ธ ๋ฒ์งธ ์์ฑ๊ฐ์ padding-bottom : 0px ๊ณผ ๊ฐ์ ์๋ฏธ์ด๋ค.) - justify-content(์น ํ์ด์ง์ ์ถ์ ๋ฐ๋ผ ์์ ์ฌ์ด์ ๊ณต๊ฐ์ ๋ง๋ฌ) : space-between(๊ฐ ์์ ์ฌ์ด์ ๊ณต๊ฐ์ด ์์)
- padding-right : ๊ฐ ํ ๋๋ฆฌ(์ฌ๊ธฐ์๋ ์์ด์ฝ)์ ๊ฐ๊ฒฉ์ 1px์ฉ ๋์ด๋ค.
์ฌ๊ธฐ์ ์ฃผ์ํ ์ ์ ์ข์์,์ฝ๋ฉํธ,๋ณด๋ด๊ธฐ ์์ด์ฝ๊ณผ ๋ถ๋งํฌ ์์ด์ฝ์ ๋จ์ด๋จ๋ ค์ผ ํ๋ค๋ ์ ์ธ๋ฐ ๊ฐ๊ฐ ๋ค๋ฅธ <div> ํ๊ทธ๋ก ๋ถ๋ฆฌํ์ฌ ๋จ์ด๋จ๋ ธ๋ค.
๐ 04-3. ํผ๋ ์์ ๋ด์ฉ ๋ฐ ๋๊ธ ์์ฑํ๊ธฐ
<style>์์ ์์ฑ์ ํตํด ํผ๋ ์์ ์ข์์, ๋ด์ฉ, ๋๊ธ์ ์ด๋ป๊ฒ ํํํ ์ง ์ค์ ํ๋ค.
- padding ์ ์์ฑ ๊ฐ์ด ๋ ๊ฐ ๋ผ๋ฉด ๊ฐ๊ฐ ์ํ, ์ข์ฐ ๋ฐฉํฅ์ ๊ฐ๊ฒฉ์ด๋ค.
- feed_content : ํผ๋ ์์ ๋ค์ด๊ฐ "๋ด์ฉ"์ ์์ญ์ ์ด๋ป๊ฒ ์ค์ง ์ค์ ํ๋ค.
- feed_like : ํผ๋ ์์ ๋ค์ด๊ฐ "์ข์์"์ ์์ญ์ ์ด๋ป๊ฒ ์ค์ง ์ค์ ํ๋ค.
- feed_reply : ํผ๋ ์์ ๋ค์ด๊ฐ "๋๊ธ"์ ์์ญ์ ์ด๋ป๊ฒ ์ค์ง ์ค์ ํ๋ค.
- feed_txt : ํผ๋ ์์ ๋ค์ด๊ฐ ํฐํธ์ ์ฌ์ด์ฆ๋ฅผ ์ด๋ป๊ฒ ์ค์ง ์ค์ ํ๋ค.
ํผ๋ ์์ ์ด๋ค ๊ฒ๋ค์ ๋ฃ์์ง ์์ฑํ๋ค. ์ข์์, ๋ด์ฉ, ๋๊ธ๋ง ์ฑ์ฐ๋ฉด ๋๊ณ , ๊ฐ๊ฐ class๋ฅผ ํตํด <style>์์ ์์ฑํ ์์ฑ๊ฐ๋ค์ ๋ถ๋ฌ์ ์ ์ฉ์ํจ๋ค. ์ฐธ๊ณ ๋ก <b>๋ ๊ตต์ ๊ธ์จ๋ฅผ ๋ง๋๋ ํ๊ทธ, <p>๋ ๋ฌธ๋จ์ ๋ง๋๋ ํ๊ทธ์ด๋ค.
๋๊ธ์ ์ฌ๋ฌ ๊ฐ๋ฅผ ์์ฑํ์๊ณ , <style>์์ ์์ฑํ ์์ฑ ์ค flex-direction : column ์ ํตํด ์ธ๋ก๋ก ๋์ด๋ ์ ์๋๋ก ํ์๋ค. ๋ง์ฝ row ๋ฅผ ์
๋ ฅํ๋ค๋ฉด, ๊ฐ๋ก๋ก ๋์ด๋๋ค.
๐ 04-4. ํผ๋์ ํ๋กํ ์ฌ์ง ๋ฐ ์์ด๋ ์ฝ์ ํ๊ธฐ
ํผ๋ ์๋จ์ ํ๋กํ ์ฌ์ง๊ณผ ์์ด๋๋ฅผ ํด๋ณด์. ๋๋ ์ถ์์ด๋ฅผ ์ข์ํด์ ํ๋กํ ์ฌ์ง์ ์ถ์์ด๋ก ํ๋ค.
<style> ๋ด์ ํ๋กํ ์ฌ์ง๊ณผ ์ด๋ฆ์ ํด๋นํ๋ ์์ฑ์ ์์ฑํ๋ค.
- feed_name : ํ๋กํ ์ด๋ฆ์ ํด๋นํ๋ ์์ฑ์ด๋ค. align-items๋ฅผ center๋ก ์ค์, ํ๋กํ ์ด๋ฏธ์ง ๊ธฐ์ค์ผ๋ก ์ ๊ฐ์ด๋ฐ์ ์ด๋ฆ์ด ์์นํ๋๋ก ํ๋ค.
- feed_name.txt : ํ๋กํ ์ด๋ฆ์ ํด๋นํ๋ ์์ฑ์ด๋ฉฐ, font-weight๋ฅผ bold๋ก ์ค์, ๋๊บผ์ด ๊ธ์จ๋ก ํ์๋๋๋ก ํ๋ค.
- profile_box : border-radius ๋ ํ ๋๋ฆฌ๋ฅผ ๋ฅ๊ธ๊ฒ ๋ง๋๋ ์์ฑ์ด๋ค.
- profile_img : object-fit์ ์์์ ์ฝํ ์ธ ํฌ๊ธฐ๋ฅผ ์ด๋ค ๋ฐฉ์์ผ๋ก ์กฐ์ ํด์ ์์์ ๋ง์ถ ๊ฒ์ธ์ง ์ง์ ํ๋ค. cover๋ฅผ ์ค์ ์ฝํ ์ธ ํฌ๊ธฐ๋ฅผ ์ข ํก๋น๋ฅผ ์ ์งํ๋ฉฐ ๋๋น์ ๋์ด๋ฅผ ๊ฐ๋ ์ฑ์ธ๋๊น์ง ํ๋ํ๋ค.
๐ 04-5. ํผ๋์ '๋๊ธ ๋ฌ๊ธฐ...' ๋ฐ์ค ์ถ๊ฐํ๊ธฐ
๐ ์์ฝํด๋ณด๋ฉด
์ค๋ณต๋๋ html ์์ฑ์ ๋ฐฉ์งํ๊ธฐ ์ํด <style> ๋ด์ ์์ฑ์ ์์ฑํ์ฌ, ์ฌ๋ฌ ํ๊ทธ์์ class๋ฅผ ํ์ฉํ์ฌ ์์ฑ๊ฐ์ ์ค ์ ์๋ค.
์ถ์ฒ :
https://cholol.tistory.com/548
์ด ๊ฒ์๋ฌผ์ ๋ชจ๋ ์ ์๊ถ์ ๋ง์ด์ฎธ(mychew__)๋๊ป ์์ผ๋ฉฐ, ์ ๋ ์ค์ง ํ์ต๊ณผ ๊ธฐ๋ก์ ๋ชฉ์ ์ผ๋ก ํฌ์คํ ํ ๊ฒ์์ ์๋ ค๋๋ฆฝ๋๋ค.
์ข์ ๊ฐ์ ์ปจํ ์ธ ๋ฅผ ์ ๊ณตํด์ฃผ์ ๋ง์ด์ฎธ๋๊ป ๊ฐ์ฌ์ ๋ง์ ๋๋ฆฝ๋๋ค. (_ _)