🙈 주절주절
테이블 하니까 급식 먹던 시절, 스터디 플래너에 있는 타임 테이블이 기억이 났다.
공부보다 10분 간격에 색만 칠하던 그때가;)
테이블 생성 <table>
표를 만들 때 사용하는 태그입니다. 과거에는 테이블을 사용하여 레이아웃을 구성했지만, 기능 상의 한계로 인하여 최근에는 공간 분할 태그인 <div> 태그를 사용합니다. 부모 태그로 행을 작성한 후 자식 요소로 칸을 작성해주는 식으로 사용합니다.
<table> : 표를 감싸는 태그
<tr> : 표 내부의 행
<th> : 표 내부의 제목 칸, 굵은 글씨
<td> : 행 내부의 일반 칸
<table>
<tr>
<th>메뉴</th>
<th>종류</th>
<th>가격</th>
<th>추가</th>
</tr>
<tr>
<td>떡볶이</td>
<td>분식</td>
<td>4,000</td>
<td>치즈 추가 가능</td>
</tr>
<tr>
<td>고구마 튀김</td>
<td>튀김</td>
<td>3,000</td>
<td>(기본 2개)</td>
</tr>
<tr>
<td>새우 튀김</td>
<td>튀김</td>
<td>3,000</td>
<td>(기본 2개)</td>
</tr>
<tr>
<td>치킨덮밥</td>
<td>덮밥</td>
<td>4,500</td>
<td>소스 추가 가능</td>
</tr>
</table>
| 메뉴 | 종류 | 가격 | 추가 |
|---|---|---|---|
| 떡볶이 | 분식 | 4,000 | 치즈 추가 가능 |
| 고구마 튀김 | 튀김 | 3,000 | (기본 2개) |
| 새우 튀김 | 튀김 | 3,000 | (기본 2개) |
| 치킨덮밥 | 덮밥 | 4,500 | 소스 추가 가능 |
<table> 속성
border : 테두리 두께
cellspacing : 테두리 간격 사이의 너비
cellpadding : 셀 내부의 간격
align : 테이블 정렬 속성
width & height : 테이블의 너비와 높이
bgcolor 와 bordercolor : 테이블 배경색과 테두리 색
<table border="10" cellspacing="1" cellpadding="8" align="center" width="500" height="300" bgcolor="beige" bordercolor="gray">| 메뉴 | 종류 | 가격 | 추가 |
|---|---|---|---|
| 떡볶이 | 분식 | 4,000 | 치즈 추가 가능 |
| 고구마 튀김 | 튀김 | 3,000 | (기본 2개) |
| 새우 튀김 | 튀김 | 3,000 | (기본 2개) |
| 치킨덮밥 | 덮밥 | 4,500 | 소스 추가 가능 |
<td > 속성
colspan : 해당 칸이 점유하는 열의 수
rowspan : 해당 칸이 점유하는 행의 수
<!--변경된 부분-->
<th colspan="4">메뉴판</th> <td>고구마 튀김</td>
<td rowspan="2"">튀김</td>
<td>3,000</td>
<td rowspan="2">(기본 2개)</td>| 메뉴판 | |||
|---|---|---|---|
| 메뉴 | 종류 | 가격 | 추가 |
| 떡볶이 | 분식 | 4,000 | 치즈 추가 가능 |
| 고구마 튀김 | 튀김 | 3,000 | (기본 2개) |
| 새우 튀김 | 3,000 | ||
| 치킨덮밥 | 덮밥 | 4,500 | 소스 추가 가능 |
HTML 요소는 Semantic 하게 작성되어야 한다.
Semantic 해야 하는 이유 :
- SEO (Search Engine Optimization, 검색최적화)
- 검색엔진은 HTML 코드를 분석해서 사이트를 노출시킨다.
- 크롤러가 페이지의 구성 요소들이 무엇을 의미하는지 이해하여 사이트 노출에 영향을 준다.
- 유지 보수성
- 페이지를 유지보수 할 때, <div> 태그만 있다면 요소 찾는데 어려움을 겪는다.
- 시멘틱 태그를 활용해 컨텐츠를 적절히 구분하면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Semantic tag</title>
</head>
<body>
<header style="background-color: bisque; height: 50px">header : 헤더 (로고, 메뉴 아이템 등)</header>
<!-- main : 콘텐츠 영역임을 표시한다. 한 html 페이지 당 한 번 사용하는 것이 바람직하다. (중첩X) -->
<main style="background-color: cornflowerblue; height: 1000px; display: flex">
<section style="background-color: crimson; width: 80%">
section
<!-- <article> : 하나의 의미있는 요소 (ex. 기사 리스트 중에서 기사 하나) -->
<article style="background-color: blanchedalmond">article1</article>
<article style="background-color: rgb(81, 55, 24)">article2</article>
<article style="background-color: burlywood">arrticle3</article>
<article style="background-color: pink">article4</article>
</section>
<aside style="background-color: khaki; width: 20%">aside : 콘텐츠와 직접적인 연관이 없는 옆에 있는 부분 (ex. 광고)</aside>
</main>
<footer style="background-color: gray; height: 50px">footer : 푸터 (하단 영역)</footer>
</body>
</html>
'[Study] FE > HTML & CSS & JS' 카테고리의 다른 글
| [포스코X코딩온] CSS_04 position & backgound (0) | 2023.03.07 |
|---|---|
| [포스코X코딩온] CSS_03 속성 정리 (0) | 2023.03.06 |
| [포스코X코딩온] CSS_02 선택자 (0) | 2023.03.05 |
| [포스코X코딩온] CSS_01 적용 방식 (0) | 2023.03.03 |
| [포스코X코딩온] HTML_01 구조 설명 & tag (0) | 2023.03.02 |