img 요소

(2020-09-18)

1. 이미지 (image) 요소이미지 속성 : (필수) src, alt, (선택) width, height 등
     - 이미지 파일 경로 : src 속성 이용
     - 이미지 대체 텍스트 지정 : alt 속성 이용

  ㅇ 보이기 유형(block,inline) 
     - inline 요소 임

  ㅇ 이미지 파일 형식
     - GIF, JPEG, PNG이미지 주변
     - 이미지 주변의 텍스트,공백,경계선 등의 조절은 CSS 스타일을 이용
     - 기본으로, 경계선(border) 나타남

  ㅇ 이미지 적응
     - 장치 크기에 따라 다른 이미지를 적응적으로 적용하려면 자바스크립트 등을 활용


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 속성값에 의해 중앙 정렬

HTML 요소
   1. HTML 요소의 구성   2. HTML 요소의 종류   3. 기본 구조 요소 (html,head,title,body 등)   4. 의미 구조 요소 (header,section,footer 등)   5. meta 요소   6. a 요소   7. img 요소   8. 기타 요소   9. html 속성   10. 뷰포트  


Copyrightⓒ written by 차재복 (Cha Jae Bok)               기술용어해설 후원
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"