1) HTML Tags
✔ 학습 목표
1.HTML 태그를 이해하고, 이를 사용할 줄 압니다.
📎 HTML tag의 종류
태그는 그 의미에 맞춰서 사용해야 한다.
- 링크
- 이미지
- 목록
- 제목
-
anchor 태그, img 태그, ul/li 태그, heading 태그, p 태그 등이 자주 사용된다.
-
그 밖에 가장 많이 사용하는 div태그가 있습니다.
-
div 태그는 block 엘리먼트라고 하는데 일반적인 영역을 표현할 때 가장 많이 사용한다. (dummy 영역)
-
많은 태그를 모두 외울 필요는 없으며, 필요한 태그를 찾아서 적절한 의미에 맞는 태그를 사용하는 것이 중요합니다.
👀 실습코드
<!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="http://www.apple.com">사과</a></li>
<li>사과</li>
<li>메론</li>
<li>귤</li>
</ul>
</div>
</body>
</html>💡 사용한 코드
div, h1, ul, li, a, href
참고자료
2) HTML Layout 태그
✔ 학습 목표
1.레이아웃(전체 페이지 구성)을 위한 적절한 HTML 태그들을 이해합니다.
🔍 레이아웃을 위한 태그
- header
- section
- nav
- footer
- aside
HTML5 layout tag
👀 실습코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>사이트야</title>
</head>
<body>
<div>
<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>💡 사용한 코드
header, footer, nav, aside, id
3) HTML 구조설계
✔ 학습 목표
1.CSS 없이 먼저 HTML구조를 설계할 수 있습니다.
📎 HTML 구조설계
구조화 설계는 마치 문서를 쓴다고 생각하면 쉽다.
현업에서는 Presentation 문서형태의 기획서나 디자인 파일을 받아서 그것을 기반으로 HTML개발을 시작한다
즉 어떠한 화면을 보면서 그대로 구현하는 것
그 화면을 보면서 구조를 분석해야 한다.
먼저 영역을 나눠서 상단/본문/네비게이션 이런 식으로 큰 부분부터 분리
그 뒤에 각 영역 안에 내용의 구조를 잡는 것이 일반적
각 영역 안의 내용 역시 여러 가지 형태
목록을 나타내거나, 이미지를 나타내거나, 문단을 나타낼 수 있고
이때마다 적절한 태그를 쓰면 된다.
그러면서 영역 안에 또 다른 영역이 있다면 점점 안으로 좁혀가면서 HTML tag를 사용하면서 완성해나가는 것이다.
이때 CSS코드를 같이 구현하지 않고 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>
<div> <!-- section태그를 사용했었지만, 별 의미없는 container에는 section태그가 적절하지 않아서 수정합니다 -->
<nav><ul>
<li>Home</li>
<li>Home</li>
<li>About</li>
<li>Map</li>
</ul></nav>
<div>
<button></button>
<div><img src="dd" alt=""></div>
<div><img src="dd" alt=""></div>
<div><img src="dd" alt=""></div>
<button></button>
</div>
<div>
<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>
</div>
</div>
<footer>
<span>Copyright @codesquad</span>
</footer>
</body>
</html>예제의 lorem... 은 별의미없는 글자들을 채우기 위해서 보통 사용하는 문장이다.
4) class 와 id 속성
✔ 학습 목표
1.CLASS와 ID의 목적을 이해하고, 구분해서 작성할 수 있다.
🔍 ID
- 고유한 속성으로 한 HTML 문서에 하나만 사용 가능하다.
- 고유한 ID 값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이하다.
🔍 Class
- 하나의 HTML문서 안에 중복 사용 가능
- 하나의 태그에 여러 개의 다른 class 이름을 공백을 기준으로 나열할 수 있다.
- 홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해서는 class의 사용이 필수적이다.
이렇게 구분할 수 있지만, 많은 회사마다 개발단계에서 어떠한 약속(convention)을 만들어서 자신들만의 규칙을 사용한다.
예를 들어 ID사용을 금하는 곳,
class로만 사용하는 곳,
그건 팀이 결정하기 나름이다.
👀 실습코드
<!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>
<ul>
<li class="our_diescriptipn">
<h3>What we do</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing</div>
</li>
<li class="our_diescriptipn">
<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 class="our_diescriptipn">
<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>