๋ฐ์ํ
1. HTML
- HTML์ ๋ผ๋, CSS๋ ๊พธ๋ฏธ๊ธฐ
- HTML ๊ธฐ์ด
- HTML๋ ํฌ๊ฒ head์ body๋ก ๊ตฌ์ฑ
- head์๋ ํ์ด์ง ์์ฑ์ ๋ณด,
- body์๋ ํ์ด์ง ๋ด์ฉ
- head ์์ ๋ค์ด๊ฐ๋ ๋ํ ์์๋ค
: meta, script, link, title - body ์์ ๋ค์ด๊ฐ๋ ๋ํ ์์๋ค
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ํ์ดํ</title>
</head>
<body>
<!-- ๊ตฌ์ญ์ ๋๋๋ ํ๊ทธ๋ค -->
<div>๊ตฌ์ญ ๋๋๊ธฐ</div>
<p>๋ฌธ๋จ</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- ๊ตฌ์ญ ๋ด ์ฝํ
์ธ ํ๊ทธ๋ค -->
<h1>h1 ์ ๋ชฉ์ ๋ํ๋ด๋ ํ๊ทธ. ํ์ด์ง๋ง๋ค ํ๋์ฉ ์จ์ฃผ๋ฉด ๊ตฌ๊ธ ๊ฒ์ ์ ๋จ.</h1>
<h2>h2 ์์ ๋ชฉ</h2>
<h3>์ด์ธ์ h3~h6</h3>
<hr> <!-- hr์ ๊ฐ๋ก์ -->
span ํ๊ทธ: ํน์ <span style="color:red">๊ธ์</span>๋ฅผ ๊พธ๋ฐ
<hr>
a ํ๊ทธ: <a href="http://naver.com/"> ํ์ดํผ๋งํฌ </a>
<hr>
img ํ๊ทธ: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input ํ๊ทธ: <input type="text" />
<hr>
button ํ๊ทธ: <button> ๋ฒํผ</button>
<hr>
textarea ํ๊ทธ: <textarea>text๋ฅผ ์์ฑํ ์ ์๋ ๊ณณ</textarea>
</body>
</html>โ
๐ฐ ๋จ์ถ ํค TIP!
โ ์ ๋ ฌ ๋จ์ถ ํค
- window : Ctrl + Alt + L
- mac : cmd + Alt + L
โก ์ฃผ์ ๋จ์ถ ํค
- window : Ctrl + /
- mac : cmd + /
2. CSS
- CSS ๊ธฐ์ด
- css ์ฌ์ฉ๋ฒ : <head> ์์ <style>๋ก ๊ณต๊ฐ ๋ง๋ค์ด ์ฌ์ฉ
<head> <meta charset="UTF-8"> <title>๐ mingu world ๐</title> <style> .mytitle { color: red; } </style> </head>โ - CSS
- ๋ฐฐ๊ฒฝ : background-color, background-image, background-size
- ์ฌ์ด์ฆ : width, height
- ํฐํธ : font-size, font-weight, font-family, color
- ๊ฐ๊ฒฉ : margin, padding
2. Bootstrap (๋ถํธ์คํธ๋ฉ)
- ๋ถํธ์คํธ๋ฉ ๊ธฐ๋ณธ ํ
ํ๋ฆฟ
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- ์ 3๊ฐ์ ๋ฉํ ํ๊ทธ๋ *๋ฐ๋์* head ํ๊ทธ์ ์ฒ์์ ์์ผํฉ๋๋ค; ์ด๋ค ๋ค๋ฅธ ์ฝํ ์ธ ๋ค์ ๋ฐ๋์ ์ด ํ๊ทธ๋ค *๋ค์์* ์์ผ ํฉ๋๋ค --> <title>๋ถํธ์คํธ๋ฉ 101 ํ ํ๋ฆฟ</title> <!-- ๋ถํธ์คํธ๋ฉ --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- IE8 ์์ HTML5 ์์์ ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ํ HTML5 shim ์ Respond.js --> <!-- WARNING: Respond.js ๋ ๋น์ ์ด file:// ์ ํตํด ํ์ด์ง๋ฅผ ๋ณผ ๋๋ ๋์ํ์ง ์์ต๋๋ค. --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (๋ถํธ์คํธ๋ฉ์ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ฌ๊ทธ์ธ์ ์ํด ํ์ํฉ๋๋ค) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- ๋ชจ๋ ์ปดํ์ผ๋ ํ๋ฌ๊ทธ์ธ์ ํฌํจํฉ๋๋ค (์๋), ์ํ์ง ์๋๋ค๋ฉด ํ์ํ ๊ฐ๊ฐ์ ํ์ผ์ ํฌํจํ์ธ์ --> <script src="js/bootstrap.min.js"></script> </body> </html>โ
๋ฐ์ํ