해당 그림과 같이 만들기 위해
- thead, tbody, tfoot 나누기
- 4*4 행렬 생성
- rowspan을 통한 세로 묶기
- colspan을 통한 가로 묶기
- 밥,국,반찬은 굵은 글씨이므로 클래스 설정해서 css font-weight:bold 설정
.menu {
font-weight: bold;
}
<table>
<thead>
<tr>
<th></th>
<th>아침</th>
<th>점심</th>
<th>저녁</th>
</tr>
</thead>
<tbody>
<tr>
<td class="menu">밥</td>
<td>현미밥</td>
<td rowspan="2">호박죽</td>
<td>흰쌀밥</td>
</tr>
<tr>
<td class="menu">국</td>
<td>콩나물국</td>
<td>갈비탕</td>
</tr>
<tr>
<td class="menu">반찬</td>
<td colspan="3">배추김치</td>
</tr>
</tbody>
</table>결과물은 아래와 같음
Semantic 활용 차이점
semantic을 사용하지 않는다면 아래와 같이 div class를 지정해야하므로 가독성이 떨어짐
<body>
<div class="header">Header 영역</div>
<div class="nav">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</div>
<div class="main">Content 영역</div>
<div class="footer">footer 영역</div>
</body>semantic을 사용한다면 class 비사용으로 더 간결한 코드 작성 가능
<body>
<header>header 영역</header>
<nav>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</nav>
<main>content</main>
<footer>footer</footer>
</body>즉 semantic tag는 의미를 갖는 태그로 적절한 분배가 필요
span과 div의 공통점, 차이점
공통점 = 무언가를 나누는 역할 -> semantic처럼 큰 의미로 나누는건 아님
차이점
1. div는 보통 이미지나 표 등 보이는 영역을 나눌 때 / span는 텍스트 영역 설정할 때 사용
2. div는 해당 영역 만큼 설정(컨테이너) / span는 해당 부분만큼만 설정(특정아이템)
3. div = block / span = inline -> 즉 block은 세로, inline은 가로로 나열되는 방식
4. block은 가로,세로 수정 가능 / inline은 불가능
열심히 개발공부하기