Codeit_이미지

---

<img> 태그

---

<img> 태그

이미지를 넣기 위해서는 <img> 태그를 사용하면 된다.

img 태그는 불러오기 위한 용도 이기 때문에 meta 태그 처럼 시작 태그는 있지만 종료 태그가 없다.

이미지는 확장자를 잘 생각하고 삽입해야 한다. 비트맵은 웹에서 사용불가 하다.

이미지는 외부에서(인터넷) 가져올 수 도있고, 내부 파일에 다운받아서 가져올 수 도 있다.

외부에서 가져올 시 이미지 주소 복사를 클릭 후 가져온다.

이미지 삽입 시 자동 왼쪽 정렬 되어 있다.

 

이미지를 가운데 정렬하는 방법

img {

    display: block;

    margin: 0 auto;

}

 

 

<img> 태그의 속성

• <img src="사진이 있는 주소" alt="대체텍스트" width=300 height=300>
• src : 사진이 있는 주소 입력
• alt : 이미지가 뜨지 않았을 시 에 대체할 대체텍스트를 반드시 입력해주어야 한다.
• width : width 라는 속성을 써서 가로 길이를 정할 수 있다.
• height : height 라는 속성을 써주면 세로 길이를 정할 수 있다.
• width와 height 속성 둘 중 하나만 작성 시 해당 속성의 비율에 따라서 자동 변경 된다. 즉 비율을 잘 생각해서 이미지를 삽입한다.
  
• width와 height는 왠만하면 CSS에서 작성한다. 이유는 직접 작성하면 코드 수정이 어렵기 때문이다.
• width와 height는 단위를 작성해 주지 않으면 px로 인식한다.

img 확장자

• jpg(jpeg)는 해상도가 높아야 하는 visual, background 이미지에 사용한다. 원페이지 작성 시 적합하다.
• gif : 압축률이 높으나 256가지 컬러 밖에 사용못해 이미지가 깨져보인다. 흑백로고 또는 단색이미지에 적합하다.
• png : 압축률이 높고 투명배경저장이 가능하다. (png24로 저장해야 투명배경 저장이 잘된다.)