chapter 4-4

<img> widht height

  1. 이미지 삽입: <img> 태그

    <img> 태그를 통해 이미지 파일을 문서에 삽입할 수 있습니다. 기본 사용 형태는 다음과 같습니다.

    <img src=”이미지 경로", alt=”대체 텍스트"> (닫는 태그 없음)

    src 속성은 이미지의 경로를 지정합니다. 여기서 이미지의 경로는, 절대 경로를 지정하지 않는 경우 해당 html 파일이 위치한 디렉토리를 기준으로 합니다.

    (절대 경로를 지정할 경우 ~, - 같은 단축기호는 쓸 수 없습니다. 이 기호는 쉘에서만 통용됩니다)

    로컬의 파일 뿐만 아니라, url을 지정하여 외부 서버에서 이미지를 불러올 수도 있습니다.

    alt 속성은, 인터넷이 끊긴다던지 파일 이름을 잘못 입력했다던지 등의 이유로 이미지 파일을 불러올 수 없는 경우, 대체할 텍스트를 입력합니다. 또한 스크린 리더가 그림을 설명하는 문구이기도 합니다.

    img14

    (왼쪽의 이미지는 브라우저마다 다르거나 없을 수 있습니다. 이 이미지는 크롬 기준)

    1. width, height 속성

      img 태그의 width, height 속성은 해당 이미지 파일의 크기를 결정합니다. 둘 중 하나만 써도 무방하며, 하나만 쓸 경우 나머지 속성은 원래 이미지의 비율에 맞추어 자동으로 설정됩니다. “크기”의 단위는, 두 가지로 나뉩니다.

      1. %(퍼센티지)

        현재 브라우저 창의 크기를 기준으로 크기를 계산합니다. 따라서 브라우저 창의 크기가 조절되면 이미지 파일의 크기 역시 달라집니다.

        ex. width=”50%”

      2. px(픽셀)

        모니터의 픽셀을 기준으로 크기를 계산합니다. 브라우저의 크기가 조절되어도 이미지의 크기가 변하지 않습니다.

        ex. width=”150” : 예시에서 보이듯, 픽셀은 단위를 입력하지 않고 숫자만 입력합니다.

Previouschapter 4-3Nextchapter 5-1

Last updated