[코딩]Day04_Day1~3복습, 실습| 테이블 태그

• div, list 구조를 잘 짜놓는게 중요함!!
• **같은 패턴의 데이터는 리스트 구조나 div구조(이중구조)로 표현한다!!!
• 리스트 구조

​

<ul>

<li>

이미지

레시피

제목

내용

출처

</li>

<li>

이미지

레시피

제목

내용

출처

</li>

<li>

이미지

레시피

제목

내용

출처

</li>

</ul>

---

<div>

<div>

이미지

레시피

제목

내용

출처

</div>

<div>

이미지

레시피

제목

내용

출처

</div>

<div>

이미지

레시피

제목

내용

출처

</div>

</div>

​

---

• html --> CSS 적용 --> 자바스크립트
• [Meta 태그]

• 선택자 {

속성: 값;

속성: 값;

}

• 선택자 종류: 태그(h1), 클래스(.클래스네임)

---

***테이블 태그

내용물을 일목요연하게 보여주기 위해 사용(예: 시간표, 일정표 등)

​

<table></table>: 테이블 태그

행을 정의하는 <tr>, 열을 정의하는 <td>와 함께 사용해서 테이블 구조를 표현

​

-<tr></tr> 태그: 행(줄)을 정의

-<td>~<td> 태그: 열(칸, 셀)을 정의

​

-<th>~</th> 태그: 제목셀을 만들 때 사용(제목셀 --> 첫 번째 행, 첫 번째 열)

--> 굵게, 가운데 정렬로 텍스트가 배치됨

​

-테이블 태그 내의 제목 표현

<caption>~</caption>

​

 

테이블 태그는 블럭요소 (줄이 자동으로 바뀜)

-셀 병합

:두 개 이상의 셀을 합쳐서 하나의 칸으로 만들 때 사용

colspan="칸수": 수평으로 칸을 합칠 때 사용

rowspan="칸수": 수직으로 칸을 합칠 때 사용