HTML structure design : HTML 구조화 설계
웹페이지 만들어 보기
진행된 코드
<!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>
<nav>
<ul>
<li>Home</li>
<li>Home</li>
<li>About</li>
<li>Map</li>
</ul>
</nav>
<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>
<ul>
<li>
<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>
<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>
<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>
<footer><span>Copyright ©Pennek</span></footer> //span 태그, copyright 표시
</body>
</html>
오늘의 태그
- span : 글자에 간단히 스타일을 줄 때 사용. div의 inline 버전. 더미 태그.
- © : copyright 심볼 나타내기. 태그 안에 줄글로 적음.
'HTML & CSS' 카테고리의 다른 글
| [edwith] 초보 HTML&CSS 6강 - 개발자도구(Elements tab)을 활용한 HTML CSS 디버깅 (0) | 2019.06.03 |
|---|---|
| [edwith] 초보 HTML&CSS 5강 - ID와 Class (0) | 2019.06.02 |
| [edwith] 초보 HTML&CSS 3강 - UI 레이아웃을 위한 HTML 태그 (0) | 2019.06.01 |
| [생활코딩] HTML - Emmet 활용법 (0) | 2019.05.31 |
| [생활코딩] HTML - DOCTYPE (0) | 2019.05.31 |
댓글