HTML 구조설계
현업에서는 Presentation 문서형태의 기획서나 디자인 파일을 기반으로 HTML개발을 시작한다.
즉, 어떠한 화면을 보면서 그대로 구현하는 것. 화면을 보면서 구조를 분석하는 능력이 필요하다.
HTML 구조설계 순서
1. 영역을 나눠 상단/본문/네비게이션 식으로 큰 부분부터 분리.
2. 각 영역 안에 내용의 구조를 잡는 것이 일반적.
3. 영역 안의 영역으로 점점 좁혀가며 완성.
튼튼한 뼈대를 위해 HTML로 문서의 구조를 잡은 다음 CSS코드를 구현하는 것이 개발 단계에서 유리하다.
<!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>
<div>
<nav><ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul></nav>
<div>
<button></button>
<div><img src="1" alt="slide1"></div>
<div><img src="2" alt="slide2"></div>
<div><img src="3" alt="slide3"></div>
<button></button>
</div>
<div>
<ul>
<li>
<h3>About us</h3>
<div>test1</div>
</li>
<li>
<h3>What we do</h3>
<div>test2</div>
</li>
<li>
<h3>Contact us</h3>
<div>test3</div>
</li>
</ul>
</div>
</div>
<footer>
<span>Copyright @codesquad</span>
</footer>
</body>
</html>