1. HTML, CSS ๊ฐ๋ ์ ๋ฆฌ
1) HTML
- head์์๋ ํ์ด์ง์ ์์ฑ ์ ๋ณด๋ฅผ, body์์๋ ํ์ด์ง์ ๋ด์ฉ์ ๋ด์ต๋๋ค.
- head ์์ ๋ค์ด๊ฐ๋ ๋ํ์ ์ธ ์์๋ค: meta, script, link, title ๋ฑ
2) body
- ๋ํ ์ ์ผ๋ก ๋ค์ด๊ฐ๋ body ์์
<div>, <p>, <ul>, <li>, <h1~6>, <hr>, <span>, <a>, <img>, <input>, <button>, <textarea>
<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>
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>๋๋ ๋ฌด์์ผ๊น์?</textarea>
</body>
3) HTML ๋ถ๋ชจ-์์ ๊ตฌ์กฐ ์ดํด๋ณด๊ธฐ
- ๋นจ๊ฐ์ div ์์, ์ด๋ก์/ํ๋์ div๊ฐ ๋ค์ด์์ต๋๋ค.
- ์์ ๊ฐ์ ์ํฉ์์ ๋นจ๊ฐ์ div๋ฅผ ๊ฐ์ด๋ฐ๋ก ์ฎ๊ธฐ๋ฉด, ๋ด์ฉ๋ฌผ์ธ ์ด๋ก/ํ๋ div๋ ๋ชจ๋ ํจ๊ป ์ด๋ํ๊ฒ ์ฃ
- ์ฆ, ๋ฐ์ค๋ฅผ ์ฎ๊ธฐ๋ฉด ์์ ๋ด์ฉ๋ฌผ๋ ํจ๊ป ์ฎ๊ฒจ์ง๋ ๊ฒ๊ณผ ๊ฐ์ ์๋ฆฌ์
๋๋ค.
- ๊ฐ์ ์๋ฆฌ๋ก, ์ด๋ก div์ ๊ธ์จ์์ ๋ฐ๊พธ๋ฉด, ๋๋๋ฒํผ1์ ๊ธ์จ์๋ ๋ฐ๋๋ต๋๋ค!
2. CSS
1) ๊ธฐ์ด
<head> ~ </head> ์์ <style> ~ </style> ๋ก ๊ณต๊ฐ์ ๋ง๋ค์ด์ ์ฌ์ฉํฉ๋๋ค.
- ํด๋์ค ์ด๋ฆ : maintitle
- ์ฌ์ฉ ์์
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>๋ก๊ทธ์ธํ์ด์ง</title>
<style>
.maintitle {
color: red;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div class="maintitle">
<h1>CSS ๊ธฐ์ด</h1>
<h5>ํฐํธ ๋ฐ ์ฌ์ด์ฆ ๊ด๋ จ ์์</h5>
</div>
</body>
'coding > Frontend๐' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| frontend - 01 hello world! (2) | 2022.08.19 |
|---|