이미지 태그 - 바로 실행해보면서 배우는 HTML5/CSS3
바로 실행해보면서 배우는 HTML5/CSS3
  • 이미지 태그
    learn
    Practice
    learn
    06 멀티미디어 관련 태그
    이미지 태그

    가장 먼저 살펴볼 멀티미디어는 이미지입니다.


    <img> 사용법과 속성


    웹 페이지에 이미지를 넣고 싶다면, <img> 태그를 이용합니다. 이미지 태그는 넣고자 하는 이미지에 대한 속성을 필히 작성해야 하는 태그이며, 빈 요소이기 때문에 종료 태그를 작성하지 않습니다.

    src 속성은 source의 약자로 근원이라는 뜻을 가집니다. <a> 태그를 사용할 때 href 속성에 URL 값을 입력했던 것처럼, src는 불러올 이미지의 파일 경로 또는 URL을 속성값으로 가집니다. 즉, "이미지 URL"부분에 배치하고자 하는 이미지의 파일 경로나 URL을 넣으면 해당 이미지가 웹 페이지에 출력되는 것이죠.

    <img> 태그는 src 속성 이외에 alt라는 중요한 속성이 하나 더 있습니다. altAlternative text의 약자로 대체 문구라는 뜻을 가집니다. alt 속성은 말 그대로 이미지가 정상 출력되지 않거나 이미지 파일이 아예 존재하지 않는 경우, 이미지 대신 표시할 문구를 값으로 가집니다.

    두 가지 예시를 통해 <img> 태그의 사용법을 살펴봅시다. 먼저 파일 이름을 사용한 예시입니다. 이미지 파일이 저장되어 있는 경로와 파일명을 알고 있다면 이미지를 쉽게 불러올 수 있습니다. 여러분 눈에 보이지 않지만 해당 실습에는 'happy_dog.jpg'라는 파일이 업로드되어 있으니, 다음 코드를 오른쪽 실습 창에 작성한 뒤 실행 버튼을 클릭해봅시다.

    그 다음은 이미지 URL을 src 값으로 사용한 예시입니다. 검색 포털에서 여러분이 출력하고 싶은 이미지를 찾은 뒤, 오른쪽 마우스를 클릭하면 이미지 주소 복사를 선택할 수 있습니다. 이 항목을 클릭하여 이미지 URL을 복사합니다.

    이제 <img> 태그를 사용할 차례입니다. src 속성에 전 단계에서 복사한 이미지 URL을 붙여넣고, alt 속성까지 추가하여 그 이미지를 대체할 문장을 아래와 같이 작성합니다.

    이번에는 alt가 제대로 출력되는지 직접 확인하겠습니다. src를 비운 <img> 태그를 아래와 같이 추가한 코드를 오른쪽 실습 창에 직접 작성한 뒤 실행해봅시다.


    이미지 크기 조정


    <img> 태그에서 이미지의 높이나 너비를 지정하는 속성 또한 추가할 수 있습니다. 예시와 같이 코드를 작성하면 사이즈가 조정되는 것을 쉽게 확인할 수 있습니다.

    이미지의 사이즈를 조정할 때 width, height 속성을 사용할 수 있지만, 이는 사용법에 대해 알려드리는 것일 뿐 권장 사항은 아닙니다. HTML은 웹 페이지의 구조를 정의할 때, CSS는 웹 페이지와 관련된 모든 스타일을 정의할 때 사용합니다. 각자의 역할이 뚜렷하게 정해져 있는 것이죠. 그러므로 특별한 경우 외에 이미지 사이즈 조정 등 스타일과 관련된 부분은 CSS로 조정하길 권장해 드립니다.

    Practice

    다음 내용을 오른쪽 실습 창에서 진행해봅시다.

    1. 직접 출력할 이미지를 찾아 그 URL을 복사하여 웹 페이지에 출력합니다.
    2. 이미지가 정상 출력되지 않을 때 보여질 대체 문구도 함께 작성합니다.
    3. 이미지의 가로, 세로 길이를 조정해봅시다.
    learn
    Practice
    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!
    Registered Questions(0)