1014 html table 태그 정리

CI : 그 회사를 떠올릴 수 있는 특징 콘텐츠

     로고 

CIP: CI 개발하는 과정  

 

7. a(Anchor)

- 링크 생성

 

임시 링크 사용방법

<a href="#"> top 기능이 돼버림.

<a href="#none"> 

그럼 이제 클릭을 해도 클릭은 되는데 위로 가지 않음.

 

네이버

이렇게 쓰는 게 링크이다. 

 

해보기 

 

 

8. img 

- 웹 페이지에 이미지 불러오기

- 크기를 조절했다고 해서 파일의 용량이 줄어들지 않는다.

 

 

2) 텍스트 및 이미지 위치 조정

 

 

 

9. div

- 여러 개의 요소를 그룹화 

- div 태그로 한 번에 묶어서 움직이면 됨.

 

 

* 테이블(table)

1) 웹 표준 이전에 레이아웃에 활용

2) 웹 표준 이후에 정보 전달에 활용 

 

* 특징

1) 각 행의 셀 개수는 동일

2) 같은 행에 있는 셀들은 높이가 동일

3) 같은 열에 있는 셀들은 길이가 동일 

4) 울타리 같은 넉김쓰

 

줄=행=row

열=column

칸=cell 

 

* 관련 태그

1) table : 테이블의 외곽선 표시

2) tr(Table Row) : 표의 행(줄) 구분

3) td(Table Data cell) : 셀(칸) 생성

4) th(Table Header) : 제목 셀 지정 

 

* 주요 속성

1) colspan : 열 병합

2) rowspan : 행 병합

- colspan="N"

- rowspan="N" 

--------------------

3) border : 테두리

4) cellspacing : 셀 사이 여백

5) cellpadding : 셀 안쪽 여백

6) width : 너비

7) height : 높이

8) align : 수평 정렬, left/center/right

9) valign : 수직 정렬, top/middle/bottom 

 

- 태그들마다 사용할 수 있는 속성이 다르구나 확인 

- td에는 width가 적용됨. 

- padding 네 방향에서 다 적용

 

 

<img src="" alt="" longdesc="" />

alt : 이미지 대신 전달할 텍스트 (대체 텍스트)

longdesc : 직접 설명을 하거나 매우 긴 설명.

듣는 사람이 미리 알 수 있게끔 

만약 설명이 너무 길다면 

desc.html을 하나 만들어서 그 페이지의 경로를 써놔도 됨.

 

 

10) caption : 표의 제목

11) summary(속성) : 표의 제목

12) col : 같은 순서에 있는 칸들을 그룹화

13) colgroup : col의 집합

14. thead / tfoot / tbody : 각 셀들의 역할 별 구분 

- thead : 제목, tfoot : 결과, tbody : 내용

- 필요하지 않은 태그들은 생략 가능

- 태그 사용시 반드시 위 순서대로 사용

15) id(속성) : 제목 셀에 이름 부여

16) headers(속성) : 해당 셀의 제목셀 지정 

 

 

id: 다른 태그들과 구분하기 위한 고유의 값 (홈페이지 가입하는 아이디와 같은 개념

겹치면 안 된다.)