HTML Images(이미지)

html에서 이미지는 <img>태그를 사용하여 정의된다.

<img>태그는 이전에 언급했던 빈 태그(Empty Tag)로서 속성만을 가지고 종료태그가 존재하지 않는다.

 

 

<기억하기>

이미지는 기술적으로 웹페이지에 직접 삽입되지 않는다. 이미지는 웹페이지에 연결되는 방식으로 들어간다.

위에서 언급한 <img>태그는 참조된 이미지를 저장할 수 있는 공간을 만들어주는 역할을 한다.

 

 

img 태그에는 다음 두 가지 필수속성이 존재한다.

1. src - 이미지의 경로를 지정한다.

2. alt - 이미지의 대체 텍스트를 지정한다.

이미지의 경로 : 실제로 이미지가 저장되어 있는 공간(보통 url이 들어간다.)

대체 텍스트 : 이미지를 설명해주는 글이나 문구

 

 

그래서 html로 이미지를 나타내기 위해서는 다음의 구조를 사용하여 표현한다.

<img src="이미지의 경로" alt="대체 텍스트 내용">

웹페이지가 로드될 때 웹브라우져는 src에 있는 이미지의 경로를 바탕으로 웹서버에서 이미지를 가져와 페이지에 삽입한다. 그렇기 때문에 src에 들어가는 이미지의 경로는 정확해야하며 이미지 경로가 정확하지 않는 경우 대체텍스트와 함께

이미지의 링크가 끊어진 상태임을 표시하는 아이콘이 나타나게 된다.

이미지 경로가 유효하지 않은 경우

 

다음과 같이 유효한 이미지 경로를 포함하는 코드를 입력하면 이미지 파일을 페이지에 삽입할 수 있다.

<img src="testImg.png" alt="예쁜 건물 사진">

웹페이지에 이미지 파일이 정상적으로 삽입되어 나타난 모습, 대체텍스트가 보이지 않는다는 점에 주목하자

위의 코드의 경우 src에 단순히 파일의 이름이 기록되었는데 이러한 방식으로 파일의 이름이 기록되는 경우는 페이지를 여는

파일과 동일한 디렉터리에 위치한 경우를 의미한다. 이미지 경로에 대한 내용은 차후에 좀 더 자세히 다루도록 하겠다.

출력된 이미지를 보면 알 수 있지만 이미지가 정상적으로 로딩되어 페이지에 삽입된 경우 사용자에게 대체 텍스트는 나타나지 않는다는 사실을 잘 기억해두도록 하자.

 

위에서 확인했지만 alt 속성은 표시될 이미지가 없을경우, 해당 이미지경로가 유효하지 않은 경우 보여질 대체텍스트를 지정하는데 사용된다. alt 속성의 값은 해당 이미지를 적절하게 설명할 수 있는 단어들이어야 한다.

alt 속성은 권장이 아닌 필수적인 요소로서 해당 속성이 부재될 경우 해당 웹페이지는 유효성 검사를 통과하지 못한다.

 

실제로 이 alt 속성은 화면을 볼 수 없는 시각장애인들이 화면에 표시되는 내용을 인식할 수 있도록하는 소프트웨어인

화면판독기(Screen Reader)의 동작에 사용된다.

 

이미지를 삽입할 때에는 alt 속성 또한 반드시 추가해줘야 한다는 사실을 반드시 기억하자

 

대체텍스트를 적절하게 기입하는 방식이나 관련 내용에 대해서는 차후에 자세히 알아보는 것으로 하겠다.

 

 

 

이전단계에서는 기존의 사진 크기를 그대로 유지하면서 사진이 삽입되었다.

하지만 페이지를 구성하면서 해당 이미지의 크기를 직접 원하는 크기, 비율로 조절하여 사용하고 싶은 경우가 있을 것이다.

별도의 에디터를 사용해서 사진의 크기, 비율을 변경한 사진파일을 하나 더 만들어서 사용하는 방법도 있겠지만

style 속성을 사용해서 편리하게 이를 처리할 수 있다.

<img src="testImg.png" alt="예쁜 건물 사진" style="width:300px;height:300px;">

어떠한 문법적구조로 style 속성을 사용하여 이미지의 크기를 조절하였는 지 잘 기억하도록 하자.

또한 이미지 파일의 크기를 픽셀단위로(값 뒤에 px를 사용) 지정하였음을 기억하자.

 

style 속성이 아닌 width, height 속성을 사용해서도 이를 수행할 수 있다.

<img src="testImg.png" alt="예쁜 건물 사진" width="300" height="300">

코드로 표현된 방식은 다르지만 그 결과는 다음과 같이 동일하다.

지정한 대로 이미지의 크기와 비율이 변경된 것을 확인할 수 있다.

width, height, style 속성 모두 HTML5 표준에서 유효하지만 style 속성을 사용해야 style sheet에 의한 이미지의 기본적 크기변경을 방지할 수 있기 때문에 이미지 파일의 크기를 별도로 지정하고자 하는 경우 style 속성을 사용하도록 권장되는 편이다.

 

실제로 이미지를 불러올 때에는 다음과 같이 width와 height 속성을 지정하여 이미지의 크기를 미리 설정해두는 것이 좋다.

이러한 속성이 설정되어 있는 경우 페이지가 로드될 때, 이미지파일에 필요한 공간이 예약된다.

이러한 속성을 설정하지 않은 경우 브라우져가 이미지의 크기를 알지 못하기 때문에 페이지가 로드되는 과정에서 레이아웃이 변화하게 될 수 있기때문에 width와 height를 이용하여 이미지의 크기를 미리 설정해두는 것이 좋다.

---