์๋ ํ์ธ์ ๋ถ์คํฐ์ฝ์ค 3๊ธฐ ์ํฌํฐ์ฆ ํ๋ธ์ ๋๋ค. ๐ฟ
๋ถ์คํฐ์ฝ์ค๋?
์ปค๋ฅํธ์ฌ๋จ์ ๋ค์ด๋ฒ๊ฐ ์ค๋ฆฝํ ๋น์๋ฆฌ ๊ต์ก ์ฌ๋จ์
๋๋ค.
์ํํธ์จ์ด ๊ฐ๋ฐ์ ์์ฑ ๊ต์ก ํ๋ก๊ทธ๋จ, ๋ถ์คํธ์ฝ์ค์ ํจ๊ป
๋น์ ์ ๊ฐ๋ฐ ์ปค๋ฆฌ์ด๋ฅผ ์
๊ทธ๋ ์ด๋ํ์ธ์!
์ ํฌ์คํ ์ ๊ฐ์ ๋ด ์๊ฐํด๋ณด๊ธฐ์ ์์ ์์ ๋ค๋ฃจ๋ ์ฝ๋๋ฅผ ์ง์ ํฌ๋กฌํ๋ฉด์์ ํ์ธ ํด๋ณผ ์ ์๋๋ก ์งํํฉ๋๋ค. ๊ด๋ จ๋ ๊ฐ๋ ๊ณผ ๊ฐ์๋ ํจ๊ป ์ฌ๋ ค๋๋ฆฌ๋ ๋งํฌ์์ ํ์ธํด๋ณด์ค ์ ์์ต๋๋ค.
www.boostcourse.org/cs124/joinLectures/52258
์๋ฐ์คํฌ๋ฆฝํธ์ ์์
๋ถ์คํธ์ฝ์ค ๋ฌด๋ฃ ๊ฐ์
www.boostcourse.org
๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํ๋ ์์ํฌ
https://www.boostcourse.org/cs124/lecture/147573
์๋ฐ์คํฌ๋ฆฝํธ์ ์์
๋ถ์คํธ์ฝ์ค ๋ฌด๋ฃ ๊ฐ์
www.boostcourse.org
์ค๋๋ ์ฐ๋ฆฌ๊ฐ ๋ง๋๋ ์ํํธ์จ์ด๋ ํผ์์ ๋ง๋๋ ๊ฒ์ด ์๋๋๋ค. ๋ค๋ฅธ ์ฌ๋๋ค์ด ์ด๋ฏธ ์ ๋ง๋ค์ด ๋์ ์ฝ๋๋ฅผ ๊ฐ์ง๊ณ ๋น ๋ฅด๊ฒ ์กฐ๋ฆฝํด์ ์ฐ๋ฆฌ๊ฐ ์ํ๋ ์ฝ๋๋ฅผ ๋ง๋ค ์ ์๋ค๋ ๊ฒ์ด์ฃ . ์ด๋ฒ ์๊ฐ์๋ ๋ค๋ฅธ ์ฌ๋๋ค์ ์ํํธ์จ์ด๋ฅผ ๊ฐ์ ธ์์ ์ฌ์ฉํ ์ ์๋ ๋ฐฉ๋ฒ์ ๋ํด์ ์์๋ด ์๋ค.
์ํํธ์จ์ด์ ์ฌํ์ฑ
์ด๋ ๊ฒ ๋ค๋ฅธ ์ฌ๋๊ณผ ์ฝ๋๋ฅผ ํตํด์ ํ๋ ฅํ๋ ๋ชจ๋ธ์๋ ๋ ๊ฐ์ง๊ฐ ์์ต๋๋ค.
๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ํ๋ก๊ทธ๋จ์ ํ์ํ ๋ถํ์ด ๋๋ ์ํํธ์จ์ด๊ฐ ์ ๋ฆฌ๋์ด ์๋ ๊ฒ์ ๋๋ค. ํ๋ ์์ํฌ๋ ๋ง๋ค๊ณ ์ ํ๋ ํ๋ก๊ทธ๋จ์ ์ข ๋ฅ์ ๋ฐ๋ผ์ ๊ณตํต์ ์ธ ๋ถ๋ถ์ ๋ฏธ๋ฆฌ ๋ง๋ค์ด๋๋ ๊ฒ์ ๋๋ค. ํ์ํ ๋ถ๋ถ๋ง ์ฝ๊ฐ ์์ ํด์ ์ฌ์ฉํ ์ ์๋ ๊ฒ์ด์ฃ . ์ฆ, ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์ฐ๋ฆฌ๊ฐ ํ์ํ ๋ถ๋ถ์ ๊ฐ์ ธ์์ ์ฌ์ฉํ๋ ๊ฒ์ด๋ผ๋ฉด, ํ๋ ์์ํฌ๋ ์ง์ ํ๋ ์์ํฌ ์์ผ๋ก ๋ค์ด๊ฐ์ ๋ํ ์ผ์ ์์ ํด์ ์ฌ์ฉํ๋ ๊ฒ์ด๋ผ๊ณ ์๊ฐํ์๋ฉด ๋ฉ๋๋ค.
jQuery ๋ผ์ด๋ธ๋ฌ๋ฆฌ
๊ฐ์ฅ ์ ๋ช ํ Javascript ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค ํ๋๋ jQuery์ ๋๋ค. ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ฉด ์์ฐ์ฑ์ ๋์ผ ์ ์์ต๋๋ค. ์ธํฐ๋ท์์ jQuery๋ฅผ ๋ค์ด๋ก๋ํ๋ ๋ฐฉ๋ฒ๋ ์๊ณ , CDN์ด๋ผ๋ ๋ฐฉ๋ฒ์ ์ฌ์ฉํด๋ ๋ฉ๋๋ค. CDN์ ์ฌ์ฉํ๋ฉด ์ฝ๋๋ฅผ ํ ์ค ์ถ๊ฐํ๋ ๊ฒ๋ง์ผ๋ก๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๊ฐ์ ธ์์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด jQuery์ ๊ตฌ๊ธ CDN์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค. (jQuery ํํ์ด์ง์์ ์ฐพ์ ์ ์์ต๋๋ค.)
https://developers.google.com/speed/libraries
Hosted Libraries | Google Developers
A stable, reliable, high-speed, globally available content distribution network for the most popular open-source JavaScript libraries.
developers.google.com
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
์ด ํ ์ค์ <head>์ ์ถ๊ฐํ๋ฉด ๋๋ค๋ ๊ฒ์ด์ฃ .
jQuery๋ฅผ ์ฌ์ฉํ๋ฉด ๋ฐ๋ณต๋ฌธ์ ์ฌ์ฉํ์ง ์๊ณ ๋ ๋ชจ๋ ํ๊ทธ๋ฅผ ํ ๋ฒ์ ์ฒ๋ฆฌํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด์ ๋ค์๊ณผ ๊ฐ์ด ์ฌ์ฉํ ์ ์์ต๋๋ค.
$('a').css("color",powderblue);
๋ฐ๋ณต๋ฌธ์ ์ฌ์ฉํ์ง ์๊ณ ์ด ํ ์ค๋ง์ผ๋ก ๋ชจ๋ a ํ๊ทธ์ ์๊น์ powderblue๋ก ๋ฐ๊ฟ ์ ์๋ ๊ฒ์ ๋๋ค.
ํ์ง๋ง jQuery๋ ์๋ก์ด ์ธ์ด๊ฐ ์๋๋๋ค. ์ฐ๋ฆฌ๊ฐ ์ง์ ํจ์๋ฅผ ๋ง๋๋ ๋์ ์ด๋ฌํ ์ผ์ ํ๋ ํจ์๊ฐ jQuery ์์ ๋ฏธ๋ฆฌ ๋ง๋ค์ด์ ธ ์๋ ๊ฒ์ด์ฃ .
์ด๋ ๊ฒ ์ ์ ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ ์ฌ์ฉํ๋ฉด ํจ์จ์ ์ผ๋ก ์ฝ๋ฉ์ ํ ์ ์๊ฒ ๋ฉ๋๋ค.
๊ทธ๋ผ ์์ ์ฝ๋๋ฅผ ํ๋ฒ ์์ ํด๋ณผ๊น์?
var Links = {
setColor:function(color){
$('a').css("color",color);
}
}
var Body = {
setColor: function(color){
$("body").css("color",color);
},
setBackgroundColor:function (color){
$("body").css("background-color",color);
}
}
function nightDayHandler(self) {
var target = document.querySelector("body");
if (self.value === "night") {
Body.setBackgroundColor("black");
Body.setColor('white');
Links.setColor('powderblue');
self.value = 'day';
}else {
Body.setBackgroundColor('white');
Body.setColor('black');
Links.setColor('blue');
self.value = 'night';
}
}
์ ๋ฒ ํฌ์คํ ์ ์์๋ ์์ ์ฝ๋์ js๋ฅผ ์ด๋ ๊ฒ ์์ ํด๋ณผ ์ ์์ต๋๋ค. ์ฝ๋๊ฐ ํจ์ฌ ๊ฐ๊ฒฐํด ์ก๋ค์.
https://modernalchemist.tistory.com/63?category=958380
[๋ถ์คํธ์ฝ์ค]์๋ฐ์คํฌ๋ฆฝํธ์ ์์(ํ์ผ๋ก ์ชผ๊ฐ์ ์ ๋ฆฌ ์ ๋, script์ src)
์๋ ํ์ธ์ ๋ถ์คํฐ์ฝ์ค 3๊ธฐ ์ํฌํฐ์ฆ ํ๋ธ์ ๋๋ค. ๐ฟ ๋ถ์คํฐ์ฝ์ค๋? ์ปค๋ฅํธ์ฌ๋จ์ ๋ค์ด๋ฒ๊ฐ ์ค๋ฆฝํ ๋น์๋ฆฌ ๊ต์ก ์ฌ๋จ์ ๋๋ค. ์ํํธ์จ์ด ๊ฐ๋ฐ์ ์์ฑ ๊ต์ก ํ๋ก๊ทธ๋จ, ๋ถ์คํธ์ฝ์ค์ ํจ๊ป ๋น์
modernalchemist.tistory.com
์๊ฐํด๋ณด๊ธฐ
jQuery๋ฅผ ์ง์ ์์ ์ HTML ํ์ผ์ ์ถ๊ฐํด๋ณด๊ณ , ์ด๋ฅผ ์ด์ฉํด์ ๋ชจ๋ h1 ํ๊ทธ์ ๊ธ์ ํฌ๊ธฐ๋ฅผ ๋ฐ๊พธ๋ ์ฝ๋๋ฅผ ์์ฑํด ๋ด ์๋ค.
var Fonts = {
setFont: function(size){
$("h1").css("font-size",size);
}
}
๋ค ํจ๊ป ๋ฐฐ์ฐ๊ณ ์ฑ์ฅํ๋ ๋ถ์คํธ์ฝ์ค
๋ถ์คํธ์ฝ์ค(boostcourse)๋ ๋ชจ๋ ํจ๊ป ๋ฐฐ์ฐ๊ณ ์ฑ์ฅํ๋ ๋น์๋ฆฌ SW ์จ๋ผ์ธ ํ๋ซํผ์ ๋๋ค.
www.boostcourse.org
hhhminme - Overview
๊พธ์คํ ๊ณต๋ถ์ค์ธ ์ด๋ณด ๊ฐ๋ฐ์์ง๋ง์ hub@kakao.com. hhhminme has 12 repositories available. Follow their code on GitHub.
github.com