HTML Images 이미지 기본 서식

<이미지 구문>

​

• <img> 태그는 empty 태그로써, closing tag를 동반하지 않고 단독으로 쓰인다.
• <img> 태그가 가질 수 있는 속성은 2가지다.

- src : 이미지 url

- alt : 이미지에 대한 대체 텍스트

---

 

<이미지의 크기 조절>

​

​

• 이미지의 크기를 표현 하는 방법은 2가지가 있다.

​

1) CSS의 style 속성을 이용하여 width와 height에 value를 주는 방법

​

2) HTML의 width와 height 속성을 이용 하는 방법

​

• 이미지의 크기는 반드시 지정되어야 한다. 그렇치 않을 경우, 이미지를 로드할 때 웹페이지가 깜빡 거리는 현상이 나타난다.
• 그리고 웬만하면 style 속성으로 사용하는 것이 좋다. 상위 그룹에서 크기를 변경하더라도, CSS style에는 적용되지 않으므로.

---

 

<표현 가능한 이미지의 범위>

​

1) Sub-folder 안에 있는 이미지를 끌어올 수 있음. <img src="/images/html5.gif">

2) 타 웹사이트의 이미지를 끌어올 수 있음 <img src=" 웹URL .jpg">

3) 움짤 이미지도 표현 가능

4) 이미지를 클릭하면 링크로 연결되게끔 작업도 가능.

---

 

<이미지 정렬>

​

• 이미지 정렬 기능은 CSS 의 Float 특성을 사용 하면, 텍스트의 왼쪽과 오른쪽에 배치시킬 수 있다.

---