1. 이미지 (image) 요소
ㅇ 이미지 속성 : (필수) src, alt, (선택) width, height 등
- src 속성 : 이미지 파일 경로
- alt 속성 : 이미지 대체 텍스트
- width, height 속성 : 폭,높이 (통상, 둘 중 하나 만 사용해야 이미지 왜곡 없음)
ㅇ 이미지 파일 형식 지원
- GIF, JPEG, PNG 등 (HTML 표준은 지원가능 이미지 형식을 굳이 명시 안함)
ㅇ 보이기 유형 (block,inline)
- 기본으로, inline 요소 임 ☞ CSS 박스 모델, block 요소, inline 요소 참조
ㅇ 이미지 주변
- 이미지 주변의 텍스트,공백,경계선 등의 조절은 CSS 스타일을 이용
- 기본으로, 경계선(border) 나타남
ㅇ 이미지 적응
- 장치 크기에 따라 다른 이미지를 적응적으로 적용하려면, 자바스크립트 활용
2. 웹페이지 내 이미지 삽입 방법 둘(2)
ㅇ ① 인라인(inline) 형태의 img 요소의 삽입
ㅇ ② 배경 이미지 형태의 img 요소의 삽입 (CSS 배경 이미지,CSS background-image)
3. 웹페이지 내 이미지 정렬
ㅇ 인라인 내 이미지 기준 정렬
- 이미지 기본 위치 : 기본적으로 텍스트 하단 기준선에 맞춰 정렬됨
- 텍스트 기준 상하정렬
. img 태그 align 속성에 top,middle,bottom 속성값으로 상하 기준 정렬
. CSS 속성 vertical-align: text-top/text-middle/text-bottom 로써 상하 기준 정렬
ㅇ 블록 내 이미지 중앙 정렬
- img 요소의 부모 요소에 text-align 속성을 추가
- img 요소를 display: block 속성값에 의해 block 요소로 만들고,
margin: 0px auto 속성값에 의해 중앙 정렬