[HTML] HTML 이미지와 테이블

이미지 <img>

 

비트맵과 벡터이미지

1. 비트맵은 각 픽셀이 모여 만들어진 정보의 집합으로 레스터 이미지라고도 부른다. 픽셀 단위로 화면에 렌더링한다. 그림판, 포토샵 등 툴로 편집할 수 있다.
2. 벡터이미지는 수학적 정보의 형태들이 만들어내는 결과물이다. 이미지가 가지고 있는 점, 선, 면의 위치, 색상 등의 정보를 가지고 있으며 그를 화면에 렌더링합니다. 확대 및 축소를 해도 이미지가 깨지지 않습니다. 일러스트 같은 툴로 편집할 수 있다.

 

jpg(jpeg)

압축율이 훌륭하여 사진이나 예술분야에서 많이 사용된다.

• 손실 압축(알고리즘)을 사용한다 <-- 계속해서 카피앤페이스를 하면 화질이 떨어진다.
• 표현색상(24비트, 약 1600만 색상)이 뛰어나 고해상도 표시 장치에 적합.
• 가장 널리 쓰이는 이미지 포멧

 

GIF

: 이미지 파일 내에 이미지 및 문자열 같은 정보를 저장할 수 있다.

•  비손실 압축
•  8비트(256색상) 컬럼만 지원
•  여러 장의 이미지를 한 개의 파일에 저장할 수 있음(짤, 애니메이션)

 

PNG

GIF의 대체 포멧으로 개발되었습니다.

•  비손실 압축
•  8비트, 24비트 컬러 이미지 처리 가능
•  W3C 권장 포멧
•  알파 채널 지원(투명도) <-- 최대 장점

 

WEBP

: JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포멧입니다.

•  완벽한 손실/비손실 압축 지원
•  GIF 같은 애니메이션을 지원
•  알파 채널 지원(손실, 비손실 모두)
•  완벽한 포멧
•  아직까지는 모든 브라우저에서 사용이 불가능해서 대중화 되지 못했다.

 

브라우저 호환성 확인
https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

 

이미지 태그

<img src="이미지가 위치하는 주소 또는 파일경로(파일명)" alt="이미지를 대체할 문자">

 

무료  png 이미지 사이트
https://www.iconfinder.com/

free에서 찾아보기

* 파일 경로 작성 방법

1.절대 경로
고유한 경로입니다. c:/min/html/img/ironman1.png <-- 처음부터 끝까지 다 적어주는것.
http:// https:// file:// 전체 경로를 사용합니다.

1)웹사이트에서 이미지->오른쪽버튼->이미지 주소 복사 후 src에 붙여넣기

2)정확한 고유 경로를 사용해보기

- 정식으로 서버에 등록한 것이 아니므로 라이브서버에서는 안보일 수도 있다.
- 라이브서버는 웹에 등록되어있다는 전제하에 사이트를 띄운다.

 

2.상대 경로

이미지를 삽입할 HTML 문서를 기준으로 경로를 사용합니다.

- 이미지가 HTML 문서와 같은 폴더 안에 있는 경우 -> 파일명 또는 ./파일명
- ./파일명 <-- 지금부터 습관을 들이면 리액트를 사용할 때 편해진다.

  ./ : 현재경로

- 이미지가 하위폴더에 있는 경우 -> ./하위폴더명/파일명 또는 하위폴더명/파일명
- 이미지가 상위폴더에 있는 경우 -> ../파일명
- 이미지가 상위폴더에 다른폴더 하위에 있는 경우 -> ../다른폴더/파일명

 

학습 참고 사이트

tcp 스쿨

http://www.tcpschool.com

w3스쿨스

http://www.w3schools.com

 

테이블<table>

 

테이블이란 여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표입니다. HTML에서는 <table> 태그를 이용하여 표 및 웹사이트의 틀을 작성할 수 있습니다.
(예전 사이트에서 자주 쓰던 태그. 현재는 정말 표만들기에만 사용한다.)

•  <table> 태그로 시작하고 </table> 태그로 닫습니다.
•  <tr> 태그로 테이블의 층을 구성합니다.
•  <th> 태그로 각 열의 제목을 나타내고 가운데 정렬이 된다, <td> 태그로 테이블의 셀을 나눠줍니다.

<table>
  <tr>
    <th>1번열</th>
    <th>2번열</th>
  </tr>
  <tr>
    <td>1번셀</td>
    <td>2번셀</td>
  </tr>
</table>

1번열	2번열
1번셀	2번셀

 

<table> 속성

• border : 테이블 테두리의 두께를 설정합니다. (기본 0)
• width : 테이블의 가로폭을 설정합니다.(px, %)
• height : 테이블의 세로 폭을 설정합니다.
• align : 테이블의 위치를 설정합니다. (left, center, right)

 

<tr>, <th>, <td> 속성

• width : 셀의 가로 폭을 설정합니다. (한 셀에서 적용하면 그 줄 모두가 해당된다.)
• height : 셀의 세로 폭을 설정합니다.
• align : 셀의 텍스트 위치를 설정합니다. (left, center, right)

 

colspan 속성

• 가로로 열을 합칩니다.
• colspan="합칠 열의 개수"

 

rowspan 속성

• 세로로 행을 합칩니다.
• rowspan="합칠 행의 개수"

 

콜그룹 <colgroup>

• 태그 뒤에 나오는 컬럼(th 또는 td)에 적용할 스타일을 해당 태그에서 미리 설정할 수 있도록 합니다. 
• 특히 각 컬럼의 길이를 설정하는데 가장 많이 사용됩니다.

 

캡션 <caption>

• 표에 캡션(제목)을 붙일 때 사용합니다. 기본 위치는 표의 상단 가운데입니다.

 

 

HTML

 

블록 요소(Block level Elments)

•   기본적으로 줄 바꿈이 일어나는 형태로 영역의 너비가 상위 영역의 전체 너비만큼 되는 형태입니다.
•   (h, p, ul, li, div, form ...)

 

인라인 요소(Inline Elments)

•   줄 바꿈이 일어나지 않는 요소들입니다.
•   (img, strong, span, a ...)

 

** 블록 요소와 인라인 요소의 규칙

•   대부분의 요소는 같은 형태의 다른 요소를 포함할 수 있습니다.
•   (블록 요소 안에 블록 요소, 인라인 요소 안에 인라인 요소)

 

블록 안 블록

<ul>
<il></li>
</ul>

 

인라인 안 인라인

<a href="zipcode.html"><strong>우편번호 페이지</strong></a>

 

- 대부분의 블록 요소는 다른 인라인 요소도 안에 포함할 수 있습니다.

<ul>
  <li><img src="apple.jpg"></li>
</ul>

 

- 인라인 요소는 블록 요소를 포함할 수 없습니다.