ID를 주는 이유
1. 각 element를 각각 따로 제어하기 위해서
2. 검색하기 쉽게
Class를 주는 이유
1. 같은 스타일을 다른 element들에 적용하기 위해
진행된 코딩
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>
<h1>Company Name</h1>
<img src="...." alt="logo">
</header>
<section id="nav_section">
<nav>
<ul>
<li>Home</li>
<li>Home</li>
<li>About</li>
<li>Map</li>
</ul>
</nav>
<section id="roll_section">
<button></button>
<div><img src="dd" alt=""></div>
<div><img src="dd" alt=""></div>
<div><img src="dd" alt=""></div>
<button></button>
</section>
<section id="text_section">
<ul>
<li class="me_description">
<h3>About me</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores optio at expedita, nobis, ab eveniet tempora veritatis placeat odit sint, vero accusamus nostrum! Dolorum eum architecto aliquam amet quo, ut?</div>
</li>
<li class="me_description">
<h3>What I do</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores optio at expedita, nobis, ab eveniet tempora veritatis placeat odit sint, vero accusamus nostrum! Dolorum eum architecto aliquam amet quo, ut?</div>
</li>
<li class="me_description">
<h3>Contact me</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores optio at expedita, nobis, ab eveniet tempora veritatis placeat odit sint, vero accusamus nostrum! Dolorum eum architecto aliquam amet quo, ut?</div>
</li>
</ul>
</section>
</section>
<footer><span>Copyright ©Pennek</span></footer>
</body>
</html>'HTML & CSS' 카테고리의 다른 글
| [edwith] 초보 HTML&CSS 7강 - CSS를 HTML에서 사용하는 방법 (0) | 2019.06.03 |
|---|---|
| [edwith] 초보 HTML&CSS 6강 - 개발자도구(Elements tab)을 활용한 HTML CSS 디버깅 (0) | 2019.06.03 |
| [edwith] 초보 HTML&CSS 4강 - HTML 구조화 설계 (0) | 2019.06.02 |
| [edwith] 초보 HTML&CSS 3강 - UI 레이아웃을 위한 HTML 태그 (0) | 2019.06.01 |
| [생활코딩] HTML - Emmet 활용법 (0) | 2019.05.31 |
댓글