[ ์ค๋ ํ ๊ณต๋ถ ๋ฒ์ ]
์ด๋ฒ๋ ๋ 3์ ๊ฒฝ, ๋ด์ผ๋ฐฐ์๋จ ํฉ๋ฅ ์ ์น๊ฐ๋ฐ, ์ฑ๊ฐ๋ฐ ๊ณผ์ ์ ์๊ฐํ์๊ธฐ์ ์ด๋ฒ์ ์๋ก ๋ฐฐ์ด ๊ฒ๋ค๋ง ๋ค์ ๋ณต๊ธฐ์ฐจ์์์ ์ ์ด๋ณด์๋ค. ์์ธํ ์ฝ๋๋ ๋์ GitHub_์ ๊ฒ์ํ ์์ ์ด๋ค.
vscode, mac, python3.x ํ๊ฒฝ์์ ๋ชจ๋ ์ฝ๋๋ฅผ ์์ฑํ์๋ค.
๊ฐ์ํ๊ฒฝ์ venv, anaconda ๋ค ์จ๋ดค๋๋ฐ ์ค์ ๋ ๋์ค์ ํฌ์คํ
ํด์ผ๊ฒ ๋ค.
์ฌ์ฉํ Visual Studio Extension : live session, ๋จ์ถํค โL โO
CSS : ๋ญ๊ฐ๋ฅผ ๊พธ๋ฏผ๋ค = ๊ฐ๋ฆฌํฌ ์ ์์ด์ผ ๊พธ๋ฏธ๊ธฐ ๊ฐ๋ฅ
HTML : ์ค๋ง์ถ๊ธฐ ์ค์, ๋จ์ถํค ์๋จน์๋ ์ํ์ ํ
style ๋ท๋ฐฐ๊ฒฝ ์ธํธ ์ฝ๋ : (๊ฐ์ด ๋ชจ์ฌ๋ค๋๋ค)
background-image: url(https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg);
background-size: cover;
background-position: center;
margin auto : ์ํ์ข์ฐ ์ต๋ํ ๋ฏผ๋ค (๋ฐ๊นฅ์ฌ๋ฐฑ)
(๊ตฌ๊ธ ์น ํฐํธ ์ด์ฉ)
ํฐํธ๋ฃ๊ธฐ : ํ์ดํ ์๋ link href= ~, <style * { font-family ~
CSS ํ์ผ ๋ถ๋ฆฌ : cssํ์ผ ํ๋๋ฅผ ๊ฐ์ ํด๋ ๋ด ๋ง๋ค์ด์ค๋ค
<link rel="stylesheet" type="text/css" href = "(cssํ์ผ์ด๋ฆ).css">
๋ถํธ์คํธ๋ฉ ๊ฐ์ ธ์ค๊ธฐ (๋ฒํผ์ ๊ฐ์ ธ์ฌ๋?) : <button class=""~ >
display flex ์ด์ฉํ๋ฉด flex์ ๋ด์ฉ๋ฌผ ์ ๋๋จ :
background, flex๋ ์ ๋ ๊ฒ 3์ค, 4์ค ๋ชจ์ฌ๋ค๋
<style>
.mytitle {
background-color: green;
width: 100%;
height: 250px;
background-image: url(https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg);
background-position: center;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
mytitle ์์ button์ ์ด๋ ๊ฒ ํํํ์ :
solid white : ์ ๊ตต๊ธฐ๊ฐ ํฐ์์ด๊ณ ์ค์ ์ด๋ค
transparent : ํฌ๋ช
.mytitle > button {
width: 200px;
height: 50px;
background-color: transparent;
color: white;
border-radius: 50px;
border: 1px solid white;
}
hover : ๋ง์ฐ์ค ์ฌ๋ฆฌ๋ฉด ์ค์ ๋๊บผ์์ง๋ ํจ๊ณผ
.mytitle > button:hover {
border: 2px solid white;
}
์ด๋ฏธ์ง ์ด๋์์ง๊ฒ ์กฐ์ (0.5 ์์น ์กฐ์ ํ๋ฉด ๋ฐ๊ณ ์ด๋์ ์กฐ์ ๊ฐ๋ฅ)
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg);
background-position: center;
background-size: cover;
๋ง์ง ์ํ์ข์ฐ ์กฐ์
.wrap {
width: 1200px;
margin: 20px auto 0px auto;
}
๋ง๊ฐ ์ด๋ชจํฐ์ฝ ๋ชจ์ ๋งํฌ
๊ทธ๋ฆผ์ ๋ค์ด๊ฐ ํฌ์คํธ๋ฐ์ค CSS : box-shadow
.mypost {
margin: 20px auto 0px auto;
background-color: green;
width: 500px;
box-shadow: 0px 0px 3px 0px gray;
padding: 20px;
}
๋ฒํผ ๋ฌถ์ด์ค๋ ํ๋์ฉ ํด์ flex๋ก ๋ฌถ๊ธฐ
์ค๋ฅ ์ฝ๋ :
<div class="d-grid gap-2 d-md-block">
<button class="btn btn-primary" type="button">๊ธฐ๋กํ๊ธฐ</button>
<button class="btn btn-primary" type="button">๋ซ๊ธฐ</button>
</div>
๋ชจ๋ฐ์ผ์ฒ๋ฆฌ : %
.wrap
max-width: 1200px;
width: 95%;
.mypost
max-width: 500px;
width: 95%;
์๋ฐ์คํฌ๋ฆฝํธ : ๋ธ๋ผ์ฐ์ ๊ฐ ์์๋ค์ ์ ์๋ ์ธ์ด
alert ์คํ ๋ง ์ฃผ์ (์คํ๋ก ๊ฝค๋ ์ค๋ฅ๋ฌ์์)
script ์์ ์ญ ~ ์จ๋ด๋ ค๊ฐ๋๊ฒ ์๋ฐ์คํฌ๋ฆฝํธ
์ฌ์ค์ ์ฝ์์ฐฝ์ด ์คํฌ๋ฆฝํธ์ฐฝ์ด๋ ๋๊ฐ์ ๊ฒ
script๋ถ๋ถ์ด ํฐ ํ๋ฉด(๋ก๋ ์๋ ํ๋ฉด)์์ ๋จผ์ ์ฝํ
1์ฃผ์ฐจ ์์ > ๋์ ํ๊ณ๋?
์ํํ์ผ์ชฝ ์์๋๋น ๊ตฌํ์ ์ ๋ชปํ์๋ค.
ํผ๋๋ฐฑ ํ
์์ธํ ์ฝ๋๋ ๋์_GitHub ์ ์ฌ๋ฆด ์์ ์ด๋ค. (์ผ๋ฅธ ์ฌ๋ ค์ผ๊ฒ ๋ค..!)
์ง.ํ์ ํ๋จ ๋ฐฉ๋ฒ (javascript ๋ณต์ต) > js, jQuery, Ajax๋ฌธ๋ฒ์ html ํ์ผ์ script์ ๋ค์ด๊ฐ ์๊ธดํ๊ฒ ์ฐ์ธ๋ค.
let even = 4;
console.log(even % 2); // 2๋ก ๋๋ ๋๋จธ์ง๊ฐ 0์
๋๋ค.
let odd = 5;
console.log(odd % 2); // 2๋ก ๋๋ ๋๋จธ์ง๊ฐ 1์
๋๋ค.
์ง.ํ์ onclick ํจ์
(ํ์ง๋ฒํผ,๋ฅผ button ์์ฑ์ ๋ฃ์ด์ค๋ค)
ํจ์๋ script์ ์์ฑ
(์ฌ๊ธฐ์ Ajax๊น์ง ๋ค์ด๊ฐ๋ฉด ๋ฒํผ ์์ฑ์ id๊ฐ๋ ํ์ํ๋ค! classํ์ํ๋ ๊ฒ์ฒ๋ผ)
<script>
let count = 1;
function hey() {
if (count % 2 == 0) {
alert('์ง์ง๐');
} else {
alert('ํํ๐
');
}
count += 1;
}
</script>
jQuery ์ฌ์ฉ ์ html์ import๋ฅผ ๊ผญ ํด์ค์ผ ํ๋ค.
(์ฌ์ฉํ๋ค๋ ์ ์ธ)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
jQuery๊ฐ ๋ญ๊น์?
js library = jQuery (js์ ๋๋ง์ ๊ธฐ๋ฅ ๋ชจ์๋์๊ฑฐ, CSS ๋ถํธ์คํธ๋ฉ์ฒ๋ผ)
ํ์๋ถ๋ค๋ ์ด์์ง๋ถ๋ค๋ ๋ฉํ ๋๋ค๋ ๋ค๋ค ์๋ก ํ์ดํ ํด์ฃผ์ ์ ๊ธด ์๊ฐ๋์ (๋ฌด๋ ค 12์๊ฐ!)์ ํ์ต์ ๋ฌด์ฌํ ๋ง์น ์ ์์๋ค!! (์ฒซ๋ ์ด๋ผ ์์ง ์ ์์ด ์๋์ด์ ํ๋ค๊ธฐ๋ ํ๋๋ฐ, ๊ทธ๋งํผ ์คํ๋ฅดํ์ ์ฝ๋ฉ์ ๋น ๋ฅธ ์ ์์ด ํ์ํ ์ปค๋ฆฌํ๋ผ์ด๊ตฌ๋๋ฅผ ๋ค์ํ๋ฒ ๋๊ผ๋ค..!) ๋ฉํ ๋์ด ์ฐ๋ฌ์ง์ง๋ง ๋ง๊ณ ์ ๋ฐ๋ผ์ค๋ผ๊ณ ํด์ฃผ์ จ๋ค..! (ํ) ์์ง ๋ง์ด ๋ถ์กฑํ์ง๋ง ์ธ์ ๊ฐ ๋ค์ ๋์๋ณด๋ฉด ์ฑ์ฅํ ๊ฒ์ด๋ผ ๋ฏฟ๊ณ ์ค๋ ํ๋ฃจ๋ฅผ ๋ง์น๋ค!
PS.๋น ๋ฅธ ์์ผ๋ด์ ๊นํ๋ธ๋ฅผ ํ์ฑํ์์ผ์ ์ปค๋ฐํด์ผ ํ ๊ฒ๋ง ๊ฐ๋ค (ํ์ผ์ด ๋์ณ๋๋ค..)
์ ๋ฆฌ ์ํด์ฃผ์ จ๋ค์!! ๊นํ ์ ๋ก๋๋ ์์ํ์ จ๊ตฐ์ ใ ใ ใ ์๋ ๋งค์ผ ๋ณด๋ฌ๊ฐ๊ฒ ์ต๋๋ค!