- ์์
๋ชฉํ
- ์๋ฒ-ํด๋ผ์ด์ธํธ ์ญํ ์ดํด
- HTML. CSS ๊ธฐ์ด์ง์ ์ดํด, ๋ถํธ์คํธ๋ฉ ์ฌ์ฉ
- Javascript ๊ธฐ์ด ๋ฌธ๋ฒ ์ฌ์ฉ
01~03. HTML, CSS ๊ธฐ๋ณธ ๊ฐ๋
- ๋ค์ด๋ฒ ์นํ์ด์ง์ ๊ธ์ ์์ ํ๋ค. ์น์๋น์ค์ ๋์์๋ฆฌ๊ฐ ๋ญ๊น?
- ํํธ1: ๋ด ์ปดํจํฐ์์๋ง ์์ ๋๋ค. ์๋ฆฌ๊ฐ ๋ญ๊น?
- ํํธ2: ๋ด๊ฐ ๋ณด๊ณ ์๋ ์นํ์ด์ง๋ ์ฌ์ค, ์ธํฐ๋ท๊ณผ ๊ด๋ จ์ด ์๋ค.
- ํํธ3: ์๋ก๊ณ ์นจํ๋ฉด ์์๋ณต๊ท๋๋ค.
- ์? ์๋ฒ๋ก ๋ถํฐ ์๋ก ์ ๋ณด๋ฅผ ๋ฐ์์ค๊ธฐ ๋๋ฌธ์ด๋ค.
- ๋ธ๋ผ์ฐ์ ์ ์ญํ : ์๋ฒ์ ์์ฒญํ๋ค -> ๋ฐ์์์ ๊ทธ๋ ค์ค๋ค.
- html: ๋ผ๋
- css: ๊พธ๋ฏธ๋ ๊ฒ(์: ์ปฌ๋ฌ, ํฐํธ์ฌ์ด์ฆ ๋ฑ์ ์ง์ ํ๋ ๊ฒ)
- js: ํด๋ฆญํ๋ฉด ์ด๋ํ๋ ๊ฒ, ์์ง์ด๋ ๊ฒ ๋ฑ
- ์ํ์๋งค์ฌ์ดํธ์์ ์๋ก๊ณ ์นจํ์ง ์์๋, ์ข์์ด ์ค์๊ฐ์ผ๋ก ๋ณด์ด๋ ๊ฒ?
- ์์๊ฒ ๊ทธ๋ฆฌ์ง์๊ณ , ๋ฐ์ดํฐ๋ง ์ฃผ๊ณ ๋ฐ๋ ํํ์ ์์์ด๋ค.
- "JSON ํ์" ์ด๋ผ๊ณ ๋ถ๋ฅธ๋ค.
04. ๋ก๊ทธ์ธํ์ด์ง ๋ง๋ค๊ธฐ
- HTML
- ๋ฉํํ๊ทธ, ํ์ดํ ํ๊ทธ ๋ฑ ํ๊ทธ๋ก ์ด๋ฃจ์ด์ ธ ์๋ค.
- ๋ก๊ทธ์ธํ์ด์ง ๋ณด๊ณ ๋ง๋ค์ด๋ณด๊ธฐ
<h1>๋ก๊ทธ์ธ ํ์ด์ง</h1>
<p>ID: <input type="text" /></p>
<p>PW: <input type="text" /></p>
<button>๋ก๊ทธ์ธํ๊ธฐ</button>
05. CSS ๊ธฐ์ด
- ์ ๋ชฉ์ ์ ์ ํ๊ธฐ
<head>
<meta charset="UTF-8">
<title>๋ก๊ทธ์ธ ํ์ด์ง</title>
<style>
.mytitle{
color:red;
}
</style>
</head>
<body>
<h1 class="mytitle">๋ก๊ทธ์ธ ํ์ด์ง</h1>
06.์์ฃผ ์ฐ์ด๋ CSS
- ๋ฐฐ๊ฒฝ์ ๋ด๊ฐ ์ํ๋ ์ด๋ฏธ์ง๋ฅผ ์ง์ ํ๊ธฐ
- ์ด๋ฏธ์ง url, position, size๋ ํญ์ ๊ฐ์ด ๊ฐ๋ค. ๊ธฐ์ตํ๊ธฐ!
.mytitle{
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-position: center;
background-size: cover;
}- ๋ฒํผ์์ฑ์ ๊ฐ์ด๋ฐ์ ๋ฐฐ์นํ๋ ค๋ฉด, block์ผ๋ก ํ์ํด์ผํจ
.mybtn{
width: 100px;
margin:30px auto;
display: block;
}07.ํฐํธ, ์ฃผ์, ํ์ผ๋ถ๋ฆฌ
- ํฐํธ์ฌ์ดํธ: ๊ตฌ๊ธ์นํฐํธ
- ์ฃผ์์ฒ๋ฆฌ: ์ปค๋งจ๋ + /
- ์คํ์ผ๋ถ๋ถ ํ์ผ๋ถ๋ฆฌ: style.css
08~09.๋ถํธ์คํธ๋ฉ ๊ธฐ์ด
- ์ฌ์ดํธ: https://getbootstrap.com/docs/4.0/components/alerts/
- ์ฌ๊ธฐ์ ๊ณจ๋ผ์ ์ฝ๋๋ถ์ฌ๋ฃ๊ธฐํ๋ฉด ๊ฐ๋ํ.
- ํค๋์ ํ์ํ ์ ๋ณด ๋ฃ์ด์ฃผ๊ธฐ
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
- ๋ถํธ์คํธ๋ฉ์์ Jumbotron, cards ๊ฒ์ํ์ฌ ๋ณต์ฌ, ๋ถ์ฌ๋ฃ๊ธฐ
- src์ ์ํ๋ (๊ณ ์์ด)์ฌ์ง ๋ฃ๊ณ
- div.wrap์ผ๋ก ๊ฐ์ธ์
- margin: auto; ๋ฃ์ด์ฃผ๋ฉด ๊ฐ์ด๋ฐ ์ ๋ ฌํ ์ ์๋ค.
๊ณ ์์ด ์ฌ์ง ์ฃผ์(๋๋ฌด๊ธธ์ด์ ใ ใ ใ ใ ใ ใ ใ )
src="data:image/jpeg;base64,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"
10. ๋ถํธ์คํธ๋ฉ์์ ๊ฐ์ ธ์จ ํฌ๋งท์ ๋ณํํ๊ธฐ
- ๋ณํํด์ ๋งํฌ ๋ฉ๋ชจ์ฅ ๋ง๋ค๊ธฐ
- ์๋จ ํค๋
<div class="jumbotron">
<h1 class="display-4">๋ํ๋ก ๋งํฌ ๋ฉ๋ชจ์ฅ!</h1>
<p class="lead">์ค์ํ ๋งํฌ๋ฅผ ์ ์ฅํด๋๊ณ , ๋์ค์ ๋ณผ ์ ์๋ ๊ณต๊ฐ์
๋๋ค.</p>
<hr class="my-4">
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">ํฌ์คํ
๋ฐ์ค ์ด๊ธฐ</a>
</p>
</div>
- ๊ณ ์์ด ์นด๋๋ก ๋ฐ๊พธ๊ธฐ
- ์๋ ์ฝ๋๋ฅผ 9์ค ๋ณต์ฌ+๋ถ์ฌ๋ฃ๊ธฐ
<div class="card">
<img class="card-img-top"
src="..."
alt="Card image cap">
<div class="card-body">
<p><a href="http://naver.com/" class="card-title">์ฌ๊ธฐ ๊ธฐ์ฌ ์ ๋ชฉ์ด ๋ค์ด๊ฐ์</a></p>
<p class="card-text">๊ธฐ์ฌ์ ์์ฝ ๋ด์ฉ์ด ๋ค์ด๊ฐ๋๋ค. ๋ํด๋ฌผ๊ณผ ๋ฐฑ๋์ฐ์ด ์ด์ฉ๊ณ </p>
<p class="card-comment">์ฌ๊ธฐ์ ์ฝ๋ฉํธ๊ฐ ๋ค์ด๊ฐ๋๋ค.</p>
</div>
</div>
11. ๋ฉ๋ชจ์ฅ ์ฌ์ด์ url, ์ฝ๋ฉํธ ์ ๋ ฅํ ์ ์๋ ํฌ์คํ ๋ฐ์ค ์ถ๊ฐํ๊ธฐ
<!-- input box -->
<div class="input-box">
<div class="article">
<div>Article URL</div>
<input type="url" class="article-input">
</div>
<div class="comment">
<label for="exampleFormControlTextarea1">Comment</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">๊ธฐ์ฌ ์ ์ฅ</button>
</div>
์์ง 1์ฃผ์ผ์ฐจ๋ฅผ ๋ค ๋ฃ์ง๋ชปํ๋๋ฐ, ์ดํ์น ๊ฐ๊ฐ 8๊ฐ๊น์ง ์๊ฐ ์.
๋ด์ผ์ JS๋ฐฐ์ธ ์ฐจ๋ก์.
HTML, CSS, JS์ฌ์ฉ๋ฒ์ ์๋๋ฐ ๋ถํธ์คํธ๋ฉ์ ์ฒ์ ํด๋ด์ ์ ๊ธฐํ๋ค.
์ด๋ฐ ํธ๋ฆฌํ ๊ณณ์ด ์๋ค๋..ใ ใ
