img 요소

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

  ㅇ 이미지 보이기 유형 : inline 요소 임

  ㅇ 이미지 파일 형식
     - 가능한 이미지 파일 형식 : GIF, JPEG, PNG이미지 정렬
     - 인라인 내 이미지 기준 정렬
        . 이미지 기본 위치     : 기본적으로 텍스트 하단 기준선에 맞춰 정렬됨
        . 텍스트 기준 상하정렬 
           .. img 태그 align 속성에 top,middle,bottom 속성값으로 상하 기준 정렬
           .. CSS 속성 vertical-align: text-top/text-middle/text-bottom 로써 상하 기준 정렬
     - 블록 내 이미지 중앙 정렬 
        . img 요소의 부모 요소에 text-align 속성을 추가
        . img 요소를 display: block 속성값에 의해 block 요소로 만들고,
          margin: 0px auto 속성값에 의해 중앙 정렬

  ㅇ 이미지 주변
     - 이미지 주변의 텍스트,공백,경계선 등의 조절은 CSS 스타일을 이용

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


2. 웹페이지이미지 삽입 방법 둘

  ㅇ ① 인라인(inline) 형태로써, img 요소의 삽입
  ㅇ ② CSS 배경 이미지(CSS background-image)로써, 이미지 삽입


[HTML 요소] 1. HTML 구성 요소/종류 2. 기본 구조 요소 (html,head,title,body 등) 3. a 요소 4. form 요소 5. img 요소 6. html 속성 7. 기타 요소 8. 시맨틱 웹 9. 시맨틱 요소

 
        최근수정     요약목록     참고문헌