0213/이미지, table tag

쌍용교육센터에서 공부한 내용을 정리하며 기록하는 글이고 주관적인 생각이 들어갈 수 있습니다.
잘못된 내용이나 피드백 및 생각 공유는 언제든 환영입니다.
댓글로 남겨주시면 확인 후 수정하겠습니다.
내용에 대한 소스 코드는 https://github.com/2jaehoon/html에 올려두었습니다.

 

이미지 태그

  - < img >

  - web page에서 필요한 이미지를 HTML에 넣어 보여줄 때 사용

  - 모든 이미지를 보여줄 수 있다.( jpg, gif, png를 주로 사용한다. )

<img src= "이미지 경로" alt = "엑박이 뜰 때 제공할 문자열" title = "풍선도움말"
width = "넓이" height = "높이" border = "이미지테두리선 두께" usemap = "맵의 사용"/>
<!--
이미지 경로 종류 : URL, URI
URL : http://localhost/html_prj/폴더명/이미지명.png
현재 서버, 외부 서버에 존재하는 이미지를 모두 사용할 수 있다.

URI : ../폴더명/이미지명.jpg
현재 서버에 존재하는 이미지만 사용할 수 있다.     
-->

 

map

  - 좌표를 사용하여 이미지를 자르지 않고 특정부분에 링크를 설정할 수 있는 태그

  - 영역을 rect, circle, ploy로 설정할 수 있다.

  - 브라우저마다 인식하는 속성이 다르다.( id속성으로 인식, name속성으로 인식)

  - map 설정(링크를 설정할 좌표를 설정)

<!--
name값과 id값 동일하게 설정
name 속성과 id속성은 모든 태그에서 사용할 수 있는 속성: global attribute
-->
<map name="map이름" id="map아이디">
<area shape="rect,circle,ploy" coords="설정할 좌표" href="링크" title="풍선도움말" alt="링크설명"/> 
<!-- rect설정 -->
<area shape="rect" coords="x1,y1,x2,y2" href="링크" title="풍선도움말" target="이름"/>
</map>
<!--
target
frame 또는 iframe의 name 속성이 존재하지 않으면
새창(새탭)으로 보여진다.
-->

 

  - map을 사용할 태그 설정

<img src="이미지경로" usemap="#map이름"/>

 

HTML 특수문자 (escape character)

  - 모든 Markup Language는 동일한 특수문자를 가진다.

  - 특별한 기능을 가진 문자

  - 형식: &문자열;

특수문자	코드 값	기능
 	 	한 칸 띄우기 (web browser는  whitespace를 한 칸만 인식)
&lt;	&#60;	< 기호 출력
&gt;	&#62;	> 기호 출력
&amp;	&#38;	& 기호 출력
&copy;	&#169;	ⓒ 기호 출력
&quot;	&#34;	"를 출력

 

* ML(Markup Language)  작성 특징

  - <태그명 속성="값"> 이러한 형식을 가진다.

  - <공백없이 태그명을 정의  ( 공백을 허용하지 않는다. - <뒤에 공백이 들어가면 태그로 인식하지 못한다. )

     XML에서는 에러가 발생

  - > 앞에는 속성을 공백으로 구분하기 때문에  공백을 허용한다.

        ( > 앞에는 공백이 들어가도 태그로 인식한다. )

  - <태그명 > 은 해석,   < 태그명> 은 해석하지 않는다.

 

흘러가는 글자

<marquee scrollamount="속도">글자</marquee>

 

 

table

  - 표 만들 때 사용

  - 데이터를 종류별로 만들어 보여주기 위해 사용

  - table 작성에 사용되는 태그들 <table>, <tr>, <th>, <td>, <thead>, <tbody>, <tfoot>

  -  <table> : 테이블이 시작할 때

   - <tr> : 행을 만들 때

   - <th> : 열의 제목을 만들 때

   - <td> : 열을 만들 때

   - <thead> : 테이블에서 header 부분(제목부분)임을 의미적으로 보여줄 때

                         (감싸진 <tr>은 가장 위에서 보여진다.)

   - <tbody> : 테이블에서 body 부분(데이터를 보여주는 부분)임을 의미적으로 보여줄 때

                         (감싸진 <tr>은 <thead> 아래에서 보여진다.)

   - <ftoot> : 테이블에서 footer 부분(데이터들의 결과를 보여주는 부분)임을 의미적으로 보여줄 때

                       (감싸진 <tr>은 <tbody> 아래에서 보여진다.)

  - 속성

<table border="테이블 선의 두께" bordercolor="선의 색" bgcolor="바닥색" background="바닥이미지"
cellpadding="td안쪽 여백" cellspacing="td간의 간격" width="테이블넓이" height="테이블높이"
align="수평정렬">

<tr bgcolor="바닥색" background="바닥이미지" align="자식td의 값 수평정렬"
valign="자식td의 값 수직정렬" height="행의 높이">

<td width="넓이" height="높이" align="td의 값 수평정렬" valign="td의 값 수직정렬"
colspan="합칠칸의 수" rowspan="합칠행의 수" bgcolor="바닥색" background="바닥이미지">

<!-- <th>태그는 td태그의 속성과 같다. 글자가 진하게 가운데 정렬이 기본속성  -->

- table 순서

<table>
<tr>
<td>데이터</td><td>데이터</td>
</tr>

<tr>
<td>데이터</td><td>데이터</td>
</tr>
</table>

 

 

* table align속성을 사용하지 않으면 table은 table의 실제 높이로 body 행의 높이가 설정된다.

 

* table align속성을 사용하면 table은 table의 행의 높이가 무시된다.(글자의 높이로 취급)

 

* 복잡한 모양의 테이블 생성

  - td나 th에  colspan, rowspan을 사용하여 칸이나 행을 합쳐 복잡한 모양의 테이블을 만든다.

 

* 칸 합치기, 행 합치기

  - <td>,<th>에서 colspan="합칠 칸의 수" rowspan="합칠 행의 수"

1. 동일한 칸을 가진 테이블 생성

2. 합치고 싶은 시작하는 td에서 colspan="합칠칸의 수를 써주고"

3. 뒤에 <td>를 삭제한다.

 

1. 동일한 칸을 가진 테이블 생성

2. 합치고 싶은 행이 시작되는 td에서 rowspan="합칠 행의 수를 써주고"

3. 아래에 <td>를 삭제한다.