[HTML+CSS3] 이미지삽입하기

웹에서 사용할 수 있는 이미지 파일 형식

파일형식	설명
GIF(Graphic Interchange Form)	파일 크기가 작음 아이콘이나 불릿 등 작은 이미지에 주로 사용  투명한 배경이나 움직이는 이미지 만들 수 잇음
JPG/JPEG (Joint Photographic Experts Group)	다양한 색상과 명암표현 but 저장 반복시 화질 저하
PNG(Portable Network Graphics)	투명 배경을 만들면서 다양한 색상 표현 가능 네트워크용으로 개발 -> 多 사용

 

<img> 태그 - 이미지 삽입하기 

- src 속성을 사용해 이미지 파일이 있는 경로를 알려주어야 화면에 이미지 표시 가능

<img src = "경로" [속성 = "값"]

 

src 속성 - 이미지 파일 경로 지정하기

'경로' : 현재 HTML 문서에서 이미지 파일까지 찾아가기 위한 길 

 

(1) 컴퓨터에 이미지 파일이 있는 경우(내 컴퓨터의 이미지 파일 경로 지정하기)

    웹문서파일(html)과 이미지 파일이 같은 경로에 있다면

          src속성의 값 : 이미지 파일의 이름

<img src = "이미지파일이름.jpg">

    웹문서파일이 있는 폴더의 하위 폴더에 이미지 파일이 저장되어있다면

             src속성의 값: 하위폴더+이미지 파일 이름

<img src = "하위폴더이름/이미지파일이름.jpg">

      다른 폴더에 있는 경우 ( 같은 레벨에 있는 폴더끼리 파일을 사용해야 함)

      ex. 한단계 위로 올라갔다가 하위폴더로 내려와야 하는 경우

body {
	background-image : url("../images/background.png");
}

..  :  파일경로에서 한단계 위로 올라가는 기호

/  :  파일 경로에서 하위폴더로 내려오는 기호

 

(2) 웹 상의 이미지 링크를 사용하는 경우 (웹 상의 링크를 복사해 이미지 경로 지정하기)

    크롬브라우저 : 마우스 오른쪽 버튼 클릭 후 [이미지 주소 복사] 

    인터넷 익스플로러 브라우저 : 마우스 오른쪽버튼 클릭 후 [속성] 선택, 창에서 [주소]부분 복사

            이미지 주소 = 이미지 파일의 경로

            src 속성의 값: 복사한 웹 이미지 파일의 경로

 

alt 속성 - 이미지를 설명해주는 대체 텍스트

대체 텍스트? 화면 낭독기가 alt 속성의 텍스트(이미지에 관한 설명)를 읽어줌 (for 시각장애인)

<img src="이미지파일이름.jpb" alt="~~">

 

width, height 속성 - 이미지 크기 조정하기

width,height 속성을 사용X : 원본 이미지 크기 그대로 표시

 

<figure>, <figcaption> 태그 - 이미지에 설명 글 붙이기

<figure> 태그 - 설명 글을 붙일 대상 지정

                   - 웹문서에서 멀티미디어파일을 비롯해 사진이나 표, 소스코드 등을 웹문서 안에서 한 단위                        가 되는 요소를 묶을 때 사용

<figure> 요소 </figure>

<figcaption> 태그 - 설명 글 붙이기

<figcaption> 설명 글 </figcaption>

합치면..

<figure>
	<img src="이미지파일이속한폴더이름/이미지파일이름.jpg" alt = "~~">
    <figcaption> 이미지파일 설명 
</figure>