1์ฃผ์ฐจ๋ ์ฅ๊ณ ๋ฅผ ๋ค๋ฃจ๊ธฐ ์ํด ์ ๋ง ๊ธฐ์ด์ ์ธ HTML๊ณผ CSS๋ฅผ ํ์ตํ๋ค.
์ฅ๊ณ ๋ฅผ ๋ฐฐ์ธ๋ templates์ ๊ตฌํํ๊ธฐ ์ํด์ html์ ์์ฑํด์ผํ๋๋ฐ ์ด๋ ๊ฐ ํ๊ทธ์ ์์ฑ๊ฐ์ ์๋ฏธ๋ฅผ ์ ์ดํดํ๊ธฐ ์ํ ๋น๋์
์ด๋ผ๊ณ ์๊ฐํ๋ฉด ๋ ๊ฒ ๊ฐ๋ค.
๋จผ์ ๊ธฐ๋ณธ html ์ฝ๋๋ฅผ ! + Tab์ ์ด์ฉํด ๋ถ๋ฌ์ค๋ฉด ์๋์๊ฐ์ ์ฝ๋๊ฐ ๋์จ๋ค
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
div
์ span
ํ๊ทธ๋ฅผ ์ด์ฉํ inline
๊ณผ block
ํ์
์ ์ฐจ์ด๋ฅผ ์์๋ณด์.
<head>
<style>
.blockTag{
background-color: yellowgreen;
}
.blockTag > div {
background: tomato;
border: 1px solid black;
}
.inlineTag span {
background: skyblue;
border: 1px solid black;
}
</style>
</head>
<body>
<div>
<div class="blockTag">block1
<div>block2</div>
<div>block3</div>
</div>
</div>
<div class="inlineTag">
<span>inline 1</span>
<span>inline 2</span>
<span>inline 3</span>
</div>
</body>
๐ ์ฝ๋ ์ํ ๊ฒฐ๊ณผ
๋จผ์ , div ํ๊ทธ๋ฅผ ์ดํด๋ณด์.
โ
block ํ์
์ผ๋ก ํ ์ค์ ์ฐจ์งํ๋ค.
โก background์ color๋ฅผ ์ ์ฉํ์ ๋ ๊ธ์ ํฌ๊ธฐ์ ์๊ด์์ด ํ ์ค ๋ชจ๋๋ฅผ ์ฐจ์งํ๋ ๊ฒ์ ๋ณผ ์ ์๋ค.
๋ค์์ผ๋ก span ํ๊ทธ๋ฅผ ์ดํด๋ณด์.
โ
inline ํ์
์ผ๋ก ๊ฐ๊ณ ์๋ ๊ธ์ ํฌ๊ธฐ๋งํผ์ ์ฐจ์งํ๋ค.
ํด๋์ค(class)๋ ์ด๋ฆ์ ์ง์ ํ๋ค๊ณ ์๊ฐํ๋ฉด ๋๋ค.
๐ธ div์ span ํ๊ทธ์ ์คํ์ผ์ ์ง์ ํ ๋ ํธ์ถํ๋ ๋ฐฉ๋ฒ ๐ธ
class๋ '.ํด๋์ค๋ช
'์ผ๋ก ํธ์ถํ๋ค.
์ผ๋ฐ ํ๊ทธ๋ 'ํ๊ทธ๋ช
'์ผ๋ก ํธ์ถํ๋ค.
class๊ฐ ํ๊ณ ์๋ ์์ํ๊ทธ๋ฅผ ํธ์ถํ๋ ค๋ฉด '.ํด๋์ค๋ช
> ์์ํ๊ทธ๋ช
'์ผ๋ก ํธ์ถํ๋ค.
๊ฐ์๋ฅผ ๋ณด๋ฉด์ style
ํ๊ทธ๋ฅผ ์ body
์์ ์
๋ ฅํ๋์ง ์๋ฌธ์ด ๋ค์๋ค.๐ค
ํ๊ต์์ ๋ฐฐ์ธ๋๋ ๋ค๋ฅธ ๊ฐ์๋ฅผ ๋ค์์๋ ๋จ ํ๋ฒ๋ body
์์ ์จ๋ณธ์ ์ด ์์๊ณ ,
์ฑ
์์๋ style
ํ๊ทธ๋ head
์ ์ํ๋ค๊ณ ๋์์์๊ธฐ ๋๋ฌธ์ ๊ฒ์์ ํด๋ดค๋๋ฐ....
์๋์์ ์ง์ ๋ฌผ์ด๋ดค๋ค.๐
์ง์์ธ์.....
๊ทธ ๋ต๋ณ๐ป
style
ํ๊ทธ์ ๊ฒฝ์ฐhead
์์ ๋ฃ๋ ๊ฒ๊ณผbody
์์ ๋ฃ๋๊ฒ์ ๋์ผํ ๊ฒฐ๊ณผ๋ฅผ ๋ณด์ฌ์ค๋ค.
์๋? ์นํ์ด์ง๋ฅผ ๋ถ๋ฌ์ฌ ๋head
์body
์์ ์๋ ๊ฒ์ ๋ชจ๋ ์ฐธ์กฐํ๊ธฐ ๋๋ฌธ์ด๋ค.
์คํ๋ คhead
์์style
์์ฑ์ ๋ชจ์๋์๋๋ณด๋ค ๊ฐ๋ ์ฑ์ด ๋จ์ด์ง๊ณhead
์์ ๋ฃ๋ ๊ฒ์ ๊ถ์ฅํ๋ค.
๊ทธ๋ ๋ค๋ฉด ์ ์ด ๊ฐ์์์๋ body
์์ style
์ ํ๊ทธ๋ฅผ ์ผ์๊น?
์ฌ์ค ์ด ์ ํ๋ฒ๋ถํํ
๋ฌผ์ด๋ณด๋๊ฒ ๊ฐ์ฅ ์ ํํ๊ฒ ์ง๋ง ๊ทธ๋ฅ ๊ฐ์๋ฅผ ๋ณด๋ฉด์ ๋๋ ์ ์
์์ฑ์ผ๋ก ๊ฐ์๋ฅผ ์งํํ๋ค๋ณด๋ head
๋ถ๋ถ์ ๋ณด์ฌ์คฌ๋ค๊ฐ ๋ค์ body
๋ถ๋ถ์ ๋ณด์ฌ์ฃผ๊ธฐ์ ์๋ค๊ฐ๋ค ํ๋ ์๊ฐ์ด ์๊ธฐ๋๋ฌธ์ ๊ทธ๋ฐ๊ฒ์๋๊น....โโ (๊ทธ๋ฅ ๋ด ์ถ์ธก์ ><)
<body>
<ul>
<li>๋ชฉ๋ก 1</li>
<li>๋ชฉ๋ก 2</li>
<li>๋ชฉ๋ก 3</li>
</ul>
</body>
๐ ์ฝ๋ ์ํ ๊ฒฐ๊ณผ
li
ํ๊ทธ๋ ๊ธฐ๋ณธ๊ฐ์ผ ๊ฒฝ์ฐ ๋ชฉ๋ก ์์ ์ ์ด ์๋์ผ๋ก ์๊ธด๋ค.
๋ง์ฝ, ์ ์ ์์ ๊ณ ์ถ๋ค๋ฉด...โ
<style>
li {
list-style: none;
}
</style>
์ด๋ ๊ฒ style
๋ด์์ list-style
์ ๊ฐ์ ์ง์ ํ๋ฉด ๋๋ค. ><
โก none ์ ์คํ์ผ์ ์์ค๋ค. ์ฆ, ์ง์ ํ์ง ์๊ฒ ๋ค๋ ๋ป`
ํ์๊ฐ์ ์ ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ก ๋ณด๋ด๋ ์ญํ
form
ํ๊ทธ์ ์์ฃผ์ฐ์ด๋ ๊ธฐ๋ณธ input type
์ ์์๋ณด์.
<form>
<input type="text">
<input type="submit">
<input type="checkbox">
<input type="radio">
</form>
๐ ์ฝ๋ ์ํ ๊ฒฐ๊ณผ
"text"
๐ ํ
์คํธ ์
๋ ฅ
"submit"
๐ ์ ์ถ ๋ฒํผ
"checkbox"
๐ ์ฒดํฌ๋ฐ์ค (์ฌ๋ฌ ๊ฐ ์ฒดํฌ ๊ฐ๋ฅ)
"radio"
๐ ์ ํ (ํ๊ฐ๋ง ์ ํ ๊ฐ๋ฅ)
radio์ checkbox ํ์ ์ label ํ๊ทธ๋ฅผ ์ด์ฉํด ํ ๋ฉ์ด๋ฆฌ๋ก ๋ฌถ์ด์ค์ ๋ช ์
checkbox
์ radio
ํ์
์ ์ฌ์ฉํ ๋ name
์์ฑ์ ์ด์ฉํด ๊ฐ์ name
์ ๊ฐ์ง ํ ๋ถ๋ฅ๋ฅผ ๋ฌถ์ด์ฃผ์ด์ผํ๋ค.
์๋๋ฉด!
radio
ํ์ ์ ๋ชจ๋ ํญ๋ชฉ ์ค ํ ๊ฐ๋ง ์ ํํ ์ ์์ด์ผํ๋ค.
๊ฐ์name
์์์ ํ๋๋ง ์ ํ์ด ๊ฐ๋ฅํ๋๋ก ํด์ผํ๋ฏ๋ก ๋์ผํname
๊ฐ์ผ๋ก ๋ฌถ์ด์ฃผ์ด์ผํ๋ค.
id
๊ฐ์?
๐id
๊ฐ์ ์ง์ ํด ๊ฐ์ ์ด๋ฆ์ ๋ถ์ฌํด์ค๋ค.
์ง์ง name๊ฐ์ ํ๋๋ง ๋ค๋ฅด๊ฒ ์ค๋ดค๋๋ฐ ๋ผ๋์ค๋ฒํผ์์๋ ๋ถ๊ตฌํ๊ณ ์ฒดํฌ๊ฐ ๋๊ฐ๊ฐ ๋๋ค
(์ ๊ธฐ๋ฐฉ๊ธฐ...๐ฒ๐ฒ)
label
ํ๊ทธ๋?!
๐ ํผ ์์์ ์ด๋ฆํ๋ฅผ ๋ถ์ด๊ธฐ ์ํ ๊ฒ์ผ๋ก, input ์
๋ ฅ ์ฐฝ ์์ ์๋ ํ
์คํธ
label
ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ง ์์์ ๋input
ํ๊ทธ๊ฐ ์ ์ฉ๋ ํ
์คํธ ๋ถ๋ถ(์
๋ ฅ ์นธ)์ ์ ํํ ํด๋ฆญํด์ค์ผ๋ง ์
๋ ฅ ๊ฐ๋ฅlabel
ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ ๋input
ํ๊ทธ์ ํด๋นํ๋ ํ
์คํธ(๊ธ์)๋ฅผ ํด๋ฆญํด๋ input type= "text"
๋ ์
๋ ฅ, "checkbox"
๋ ์ฒดํฌ, "radio"
๋ ์ ํ์ด ๊ฐ๋ฅ๐ input
ํ๊ทธ๋ ๊ธฐ๋ณธ์ ์ผ๋ก span
ํ๊ทธ์ ๊ฐ์ด inline
์์ฑ์ ๊ฐ๋๋ค.
๐๊ฐ๋
์ฑ์ ๋์ด๊ธฐ ์ํด์ form
ํ๊ทธ ์์ ul-li-input
ํ๊ทธ๋ฅผ ์ด์ฉํด <br>
ํจ๊ณผ
button
ํ์
์? <input type="button" value="๋ฒํผ๋ช
"></input>
button
๋ช
์ value
๋ฅผ ์ด์ฉํด ์ง์ ํ๋ค.
์ํ๊ฒฐ๊ณผ
๐ธ button
์คํ์ผ ์ ์ฉํ๊ธฐ
<style>
.colorBtn {
width: 100px;
height: 36px;
background-color: yellow;
color: darkbrown;
text-align: center;
line-height: 36px;
cursor: pointer;
}
</style>
<body>
<div class="colorBtn">๋ฐฑ์๋ ํด๋ฆญ!!</div>
</body>
์ํ๊ฒฐ๊ณผ
๋ฐฑ์๋ํด๋ฆญ!!
a
ํ๊ทธ์ img
ํ๊ทธ<a href="URL(์ฃผ์) ์
๋ ฅ">๋ฐ๋ก๊ฐ๊ธฐ๋ช
</a>
์ํ๊ฒฐ๊ณผ
๋ด ๋ฒจ๋ก๊ทธ ๋ฐ๋ก๊ฐ๊ธฐ ><
๋ณดํต a
ํ๊ทธ๋ ๋ด๊ฐ ๋ง๋ ์ฌ๋ฌ html ํ์ด์ง๋ฅผ ์๋ก ์ฐ๊ฒฐ์ํฌ๋ ์ฃผ๋ก ์ฌ์ฉํ๋ค...!
์ด๋ฏธ์ง๊ฐ ์๋ถ๋ฌ์ง๋๋ ๊ฒฝ๋ก ๊ผญ ํ์ธํ๊ธฐ!
<img src="์ด๋ฏธ์ง ๊ฒฝ๋ก">
์ํ๊ฒฐ๊ณผ
ํ์ด์ด์ด์ ํฉ๊ณ ๋ช ๋๋ฌด ๊ท์ฌ์....๐ญ๐ญ๐ญ๐ข
padding
โก ํฐ ํจ๋ฉ์ ์
์์๋ก ๋ด ๋ฉ์น๊ฐ ์ปค์ง๋ค, ๋ฉด์ ์ด ์ปค์ง๋ค.
<style>
div > span {
background: antiquewhite;
</style>
<body>
<div>
<span>ํฉ๊ณ ๋ช
</span>
<span>๋๋ฌด</span>
<span>๊ท์ฌ์</span>
</body>
์ํ๊ฒฐ๊ณผ
ํฉ๊ณ ๋ช ๋๋ฌด ๊ท์ฌ์
margin
โก ๋ฉด์ ์ ๊ทธ๋๋ก, ๊ฑฐ๋ฆฌ๋ง ๋ฉ๋ฆฌ ๋จ์ดํธ๋ฆผ (์ซ์ดํ๋ ์ฌ๋์ด๋ ๊ฐ์ด ์๊ธฐ ์ซ์ ๊ทธ๋ฐ๊ฑฐ)
<style>
div > span {
background: antiquewhite;
padding: 10px;
margin : 50px;
</style>
<body>
<div>
<span>ํฉ๊ณ ๋ช
์</span>
<span>์ง์ง</span>
<span>๋๋ฌด</span>
<span>๊ท์ฌ์</span>
</body>
์ํ๊ฒฐ๊ณผ
div
ํ๊ทธ์ background
color
๋ฅผ ๋ฃ์ด์ ๋ณด๊ธฐ์ฝ๊ฒ ํ์ธ ๊ฐ๋ฅ
๊ตณ์ด ์ฝ๋๋ฅผ ์ฐ์ง์์๊ป.... ๊ธธ์ด.
div > span:first-child
= ์ฒซ๋ฒ์งธ ์์ spanํ๊ทธ
๋ง ์ง์
div > span:last-child
= ๋ง์ง๋ง ์์ spanํ๊ทธ
๋ง ์ง์
๊ธฐ๋ณธ์ ์ผ๋ก padding๊ณผ margin ์์ฑ์ top, right, left, bottom ๋ชจ๋ ์ง์ ๋์ด ์๋ค.
padding-top
, padding-right
, padding-left
, padding-bottom
margin-top
, margin-right
, margin-left
, margin-bottom
์ผ๋ก
์ํ๋ ๋ถ๋ถ์๋ง ์์ฑ๊ฐ์ ์ง์ ํ ์ ์๋ค.
table
ํ๊ทธ๋ html
๊ณผ ๊ฐ์ด thead
, tbody
๋ก ์ด๋ฃจ์ด์ง๋ค. (tfoot
๋ ์์ง์๋...?)
tr
ํ๊ทธ๋ฅผ ์ด์ด th
๋ td
์์๋ค์ ๊ฐ๋ก๋ก ํ์ค ๋ฌถ์ ์ ์๋ค.
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
table > thead > tr > th {
border: 1px solid gray;
}
table > tbody > tr > td {
border: 1px solid gray;
background: pink;
}
</style>
<body>
<table>
<thead>
<tr>
<th>์ด๋ฆ</th>
<th>๋์ด</th>
<th>์ง์
</th>
</tr>
</thead>
<tbody>
<tr>
<td>์ ํ๋ง</td>
<td>๋ด๋ฏธ์ </td>
<td>์ ์งฑ๊ตฌ</td>
<td>์ ์งฑ์</td>
<td>ํฐ๋ฅ์ด</td>
</tr>
</tbody>
</table>
</body>
th
: table header
, ํค๋ ์นธ์ ๋ํ๋ด๋ ํ๊ทธ
๊ธฐ๋ณธ๊ฐ โก text-align:center
, font-weight:bold
๋ก ์ง์ ๋์ด ์๋ค.
tr
: table row
, ํ์ ๋ํ๋ด๋ ํ๊ทธ
td
: table data
, ์ผ๋ฐ์ ์ธ ์นธ์ ํ๋๋ด๋ ํ๊ทธ
๐ border-collapse๋?
table
ํ๊ทธ์ td
์ฌ์ด๊ฐ ๊ฒน์น์ง์๊ณ ๋ ์ค๋ก ํ์๋๋๋ก ํ๋ค.
์์ฑ๊ฐ
1) collapse : ํ
๋๋ฆฌ๋ฅผ ํ๋๋ก ํฉ์ณ ํ์ํ๋ค.
2) separate : ํ
๋๋ฆฌ๋ฅผ ๋ฐ๋ก ํ์ํ๋ค. (๊ธฐ๋ณธ๊ฐ)
์ํ๊ฒฐ๊ณผ
์ด๋ฆ ๋์ด ์ง์ ์ ํ๋ง 35 ํ์ฌ์ ๋ด๋ฏธ์ 29 ์ฃผ๋ถ ์ ์งฑ๊ตฌ 5 ์ ์น์์ ์ ์งฑ์ 1 ์๊ธฐ ํฐ๋ฅ์ด ? ๊ฐ(๊ฐ์์ง)
์งฑ๊ตฌ ์ท์ผ๋ก ์๊น ํด๋ดค๋๋ฐ...... ์........ ๊ตฌ๋ฆฌ๋ค................
๊ฒฌ๋....................!!
* {
border-collapse: collapse;
margin: 0px;
padding: 0px;
text-decoration: none;
color: black;
list-style: none;
}
*
: ๋ชจ๋ ์ ํ์
๐ ๋์์ธ ํ ๋ ๋ฏธ๋ฆฌ ์ธํ ํด๋๋(ํด๋ฌ์ผ ํธํ) ๊ธฐ๋ณธ ์คํ์ผ
position
: ์นํ์ด์ง ์ ์ฒด์ ์,์๋,์ผ์ชฝ,์ค๋ฅธ์ชฝ ์์น ์ง์
static
: ์์๋ฅผ ํ๋ฆ์ ๋ง์ถฐ ๋ฐฐ์น
relative
: ์ด์ ์์์ ์์ฐ์ค๋ฝ๊ฒ ์ฐ๊ฒฐํด ์์น ์ง์ , ์์ ์ ๊ธฐ์ค์ผ๋ก ๋ฐฐ์นํ๋ค.
absolute
: ์ํ๋ ์์น ์ง์ ํ์ฌ ๋ฐฐ์น, ์์น ์ ๋ถ๋ชจ ์์๋ฅผ ๊ธฐ์ค์ผ๋ก ๋ฐฐ์นํ๋ค.
fixed
: ์ง์ ํ ์์น์ ๊ณ ์ ํ์ฌ ๋ฐฐ์น, ์นํ์ด์ง๋ฅผ ๊ธฐ์ค์ผ๋ก ๋ฐฐ์นํ๋ค.
sticky
: ์์น์ ๋ฐ๋ผ ๋ฌ๋ผ์ง, ์คํฌ๋กค ์์ญ ๊ธฐ์ค์ผ๋ก ๋ฐฐ์นํ๋ค.
static
์ ์ธ ์์ฑ์ top
, left
, right
, bottom
์ง์ ๊ฐ๋ฅ