1. HTML tag
태그는 링크, 이미지, 목록, 제목 등 의미에 맞춰 사용해야 한다.
자주 사용되는 태그로는 anchor 태그, img 태그, ul/li 태그, heading 태그, p 태그, div태그 등이 있다.
특히 div 태그는 block 엘리먼트라고 하는데 일반적인 영역을 표현할 때 가장 많이 사용한다.
태그들을 모두 외울 필요는 없으며, 필요한 태그를 찾아서 적절한 의미에 맞는 태그를 사용하는 것이 중요하다.
간단한 태그 실습 코드
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<h1>반갑습니다.</h1>
여기 여러분들이 좋아하는 과일이 있어요.
<ul>
<li><a href="https://www.apple.com/kr/">사과</a></li>
<li>바나나</li>
<li>메론</li>
<li>귤</li>
</ul>
</div>
</body>
</html>
결과
2. HTML Layout 태그
HTML 태그로 감싸진 각 정보 요소를 화면 상의 어느 위치에 어떻게 자리 잡을지를 결정하는 것
기본적으로 상단의 <header>, 하단의 <footer> 그리고 가운데의 본문 영역(nav, section, aside, article 등)이 있다.
HTML 태그는 레이아웃을 할 때도 그 의미에 맞는 것을 찾아 사용해야 검색도 더 잘되고, 가독성 있는 코드를 만들 수 있게 된다.
지금 언급된 태그들은 예를 들어 아래와 같은 화면으로 구성된다.
실습 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<header>header</header>
<div id="container">
<nav><ul>
<li>home</li>
<li>news</li>
<li>sports</li>
</ul></nav>
<aside><ui>
<li>로그아웃</li>
<li>오늘의 날씨</li>
<li>운세</li>
</ui></aside>
</div>
<footer>footer</footer>
</body>
</html>
결과
3. HTML 구조설계
구조화 설계는 Presentation 문서 형태의 기획서나 디자인 파일을 받고, 그것을 기반으로 HTML 개발을 시작한다.
즉, 어떠한 화면을 보면서 그대로 구조를 분석하고, 구현하는 것이다.
HTML에서는 먼저 영역을 나눠서 상단/본문/네비게이션 이런 식으로 큰 부분부터 분리한다.
그 뒤에 각 영역 안에 내용의 구조를 잡는 것이 일반적이다.
그때마다 적절한 태그를 쓰면 되는 것
그러면서 영역 안에 또 다른 영역이 있다면 점점 안으로 좁혀가면서 HTML tag를 사용하면서 완성해나가는 것이다.
이때 CSS코드를 같이 구현하지 않고 HTML로 먼저 문서의 구조를 잡아나가는 것이 개발 단계에서 유리하다.
실습 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1. 크게 header, section, footer로 나눈다.-->
<header>
<!--2. 그 후 각 영역에서 표현해야 하는 것들을 만든다.-->
<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="link1" alt="banner1"></div>
<div><img src="link2" alt="banner2"></div>
<div><img src="link3" alt="banner3"></div>
<button>오른쪽 화살표</button>
</section>
<section>
<ul>
<li><h3>What we do</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></li>
<li><h3>What we do</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></li>
<li><h3>What we do</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></li>
</ul>
</section>
</section>
<footer><span>Copyright @Company</span></footer>
</body>
</html>
결과
4. class와 id 속성
ID
- 고유한 속성, 한 HTML 문서에 하나만 사용 가능
- 고유한 ID 값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이하다.
Class
- 하나의 HTML문서 안에 중복해서 사용 가능
- 하나의 태그에 여러 개의 다른 class 이름을 공백을 기준으로 나열할 수가 있다.
- 홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해서는 class의 사용이 필수적이다.
<!--위의 코드에서 처음으로 나오는 section 부분-->
<!-- id 부여-->
<section id="nav-section">
<button>왼쪽 화살표</button>
<div><img src="link1" alt="banner1"></div>
<div><img src="link2" alt="banner2"></div>
<div><img src="link3" alt="banner3"></div>
<button>오른쪽 화살표</button>
</section>
<!-- id 부여(위 nav-section과 이름이 달라야 한다.)-->
<section id="roll-section">
<ul>
<!-- class 부여-->
<li class="description"><h3>What we do</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div></li>
<li class="description"><h3>What we do</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div></li>
<li class="description"><h3>What we do</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div></li>
</ul>
</section>
</section>
