태그의 종류
태그는 그 의미에 맞춰서 사용해야 한다.
www.w3schools.com/Tags/ (태그의 종류 참고)
기본예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<h1>반갑습니다.</h1>
여기 여러분들이 좋아하는 과일이 있어요.
<ul>
<li><a href="www.apple.com">사과</a></li>
<li>바나나</li>
<li>메론</li>
<li>귤</li>
</ul>
</div>
</body>
</html>
2. HTML Layout 태그
‘레이아웃(Layout)’이란 ‘배치’라는 뜻으로, HTML 태그로 감싸진 각 정보 요소를 화면상의 어느 위치에 어떻게 자리잡을지를 결정하는 것을 말합니다.
레이아웃을 위한 태그
레이아웃을 구성하는 태그도 역시 그 의미에 맞춰서 쓴다.
- header
- section
- nav
- footer
- aside
html태그는 레이아웃을 할 때도 그 의미에 맞는 것을 찾아 사용해야 검색도 더 잘되고, 가독성 있는 코드를 만들 수 있게 됩니다.
기본예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>header</header>
<div id="container">
<nav><ul>
<li>home</li>
<li>news</li>
<li>sports</li>
</ul></nav>
<aside><ul>
<li>로그아웃</li>
<li>오늘의 날씨</li>
<li>운세</li>
</ul></aside>
</div>
<footer>footer</footer>
</body>
</html>
3. HTML 구조설계
이미지로 HTML 구조를 확인해보자
google search : html strcture design
이미지 출처 : http://webstyleguide.com/wsg3/figures/6-page-structure/6-1-700.jpg
기본예제
!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>What we do</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing</div>
</li>
<li>
<h3>What we do</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique accusamus, corporis, dolorum fugiat tenetur porro. Aspernatur commodi, ea suscipit non? Molestiae nulla explicabo debitis provident nostrum dolorem minima reiciendis suscipit?</div>
</li>
<li>
<h3>What we do</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing</div>
</li>
</ul>
</section>
</section>
<footer>
<span>Copyright @codesquad</span>
</footer>
</body>
</html>
4. class 와 id 속성
ID
- 고유한 속성으로 한 HTML 문서에 하나만 사용 가능합니다.
- 고유한 ID 값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이합니다.
Class
- 하나의 HTML문서 안에 중복해서 사용 가능합니다.
- 하나의 태그에 여러 개의 다른 class 이름을 공백을 기준으로 나열할 수가 있습니다.
- 홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해서는 class의 사용이 필수적입니다.
# data- 속성
어느 엘리먼트에나 data- 로 시작하는 속성은 무엇이든 사용할 수 있습니다. 화면에 안 보이게 글이나 추가 정보를 엘리먼트에 담아 놓을 수 있습니다.
<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
...
</article>
소스보기를 통해 정보가 노출될 수 있기 때문에 중요한 정보는 data- 속성을 이용하지 않는 것이 좋습니다.
출처
위의 내용은 부스트코스의 ‘Full-Stack Web Developer’ 과정을 공부한 내용입니다.
출처 : http://www.edwith.org/boostcourse-web/joinLectures/12943
