๊ฐ๋ ์ ๋ฆฌ
ID์ ๊ฐ์ ๊ณ ์ ํด์ผํ๋ค.
<label for="name">NAME</label>
<input id="name" placeholder="Name" type="text" />html ๋ด๋ถ์์๋ ๋ฐ๋ก ์ค๋ฅ๋ฅผ ์ก์์ฃผ์ง ์๊ธฐ๋๋ฌธ์ ์ฝ๋๋ฅผ ์งค๋ ์ ๊ฒฝ์ ๋ง์ด ์จ์ผํ๊ณ ,
id๊ฐ์ ๊ณ ์ ํด์ผํ๋ค.
์ดํดํ๊ฒ ์ฝ๊ฒ ์ฝ๋๋ฅผ ๊ตฌ์ฑํด๋ผ. semantic
<!DOCTYPE html>
<html>
<head>
<title>HELLO</title>
</head>
<body>
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>HELLO</title>
</head>
<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>์์ ์๋์ ์ฝ๋๋ ๋๊ฐ์ด ์๋ํ๋ค.
์์ ์ฝ๋์ ์๋์ฝ๋๋ฅผ ๋น๊ตํด์ ๋ดค์์๋ ์๋์ ์ฝ๋๊ฐ ํ ์ฌ ์ง๊ด์ ์ด๊ณ ์ดํดํ๊ธฐ๊ฐ ์ฝ๋ค.
์ฝ๊ฒ ์ดํดํ ์ ์๋๋ก ์ง๊ด์ ์ด๊ณ ๋ณด๊ธฐ์ฝ๊ฒ ์ง๋๊ฒ์ด ์ฐ์ .
class ์ด๋ฆ์ ์ ํ ๊ฒฝ์ฐ ์ด๋ฆ์ ๊ธธ๊ฒํ๋๊ฒ ์ข๋ค.
BEM CSS : id๋ ๊ฑฐ์ ์ฌ์ฉํ์ง์๊ณ class๋ง ์ฌ์ฉํ์ฌ ์ด๋ฆ์ผ๋ก ์ ์ ์๋๋ก ํ๊ธฐํ๋ ๋ฐฉ์
[CSS ๋ฐฉ๋ฒ๋ก ] BEM ๋ฐฉ์
์ค๋์ CSS ๋ฐฉ๋ฒ๋ก ์ ๋ค๋ค๋ณด๊ฒ ์ต๋๋ค ;-) ๋ง์ด ๊ฑฐ์ฐฝํ๊ธด ํ๋ฐ ์ฝ๊ฒ ํ์ด์ฐ๋ฉด 'CSS ํด๋์ค๋ค์์ ์ด๋ป๊ฒ ์ง์ผ๋ฉด ์ข์์ง' ๊ณ ๋ฏผํด๋ณด๋ ๊ฑฐ์ฃ . ๋ฐฉ๋ฒ๋ก ์๋ ์ฌ๋ฌ ๊ฐ์ง๊ฐ ์๋๋ฐ, ์ต๊ทผ BEM์ ์ค๋ฌด์ ๋์ ํ
nykim.work
๋๋ฌด ์ฝ๊ฒ ์์ฑ์ ํด๋๋ฉด ์ค๋ณต์ด ๋๋ ๊ฒฝ์ฐ๊ฐ ์๊ธธ ์ ์์ผ๋
๊ธธ๊ฒ ์์ฑํ๋ ํธ์ด ์ข๋ค.
class ๋ช ๋ด์ ๋ถ๋ชจ์ ๊ฐ๋ ์ ์ด์ฃผ๋ ํธ์ด ์ข๋ค.
<div id="status-bar">
<div class="status-bar__column">
<span>4:20</span>
</div>
</div>
form
post๋ก ๋ณด๋ด๋ ๊ฒ์ด ๋ง์ง๋ง ๋ฐฑ์๋๊ฐ ์์ด์ผ์ง๋ง ์ฌ์ฉํ ์ ์๋ ์ ๋ณด
get์ url์ ํฌํจ๋์ด๋ ์๊ด์ด์๋ ์ ๋ณด๋ค๋ง ์ฌ์ฉ
๊ฐ์ ์ฝ๋๊ฐ ๋ฐ๋ณต๋ ๊ฒฝ์ฐ ๋ณ์๋ก ๋ง๋๋๊ฒ์ด ์ข๋ค.
๊ฐ์ ์ฝ๋๋ฅผ ์ฌ๋ ค๋ฒ ์ฌ์ฉํ์ง์๋๋ก