[생활코딩] 12강. 이미지 <img>

웹 페이지에 이미지를 삽입할 때는 <img>라는 tag를 사용한다.

 

<img src="이미지가 위치하는 URL" alt="대체 텍스트" width="폭" height="높이" longdesc="이미지와 관련된 링크" />

 

다른 tag들 처럼 닫히는 tag로 감싸줄 필요가 없다는 의미로 <img> tag의 후반부에 /를 써준다.

• src = source. 이미지가 위치하는 URL
• alt = alternative. 한국어로는 대체 텍스트라 한다. 이미지가 로딩되기 전이나, 이미지를 로딩할 수 없는 경우 이미지의 위치에 텍스트가 표시된다. 시각 장애인을 위한 장치와 검색엔진에서도 사용된다. 그래서 꼭 쓰는 것이 좋다.
• width, height = 이미지의 크기. px단위. 브라우저가 자동으로 이미지의 크기를 인식해서 제 크기로 표시해주지만, 별도의 크기를 원할 경우는 tag 내에 명시해 주면 됨. 명시해놓으면 웹 페이지의 로딩이 오래걸리는 동안 화면 내에서 갈피가 잡히지 않고 흔들리는 현상을 방지할 수 있다. 이미지가 로딩되기 전이더라도 미리 그 면적을 확보해놓기 때문에.
• longdesc = long description. 이미지와 관련된 링크. 이미지에 대한 좀 더 자세한 설명.

 

 

이렇게 나오게 된다..ㅎㅎ

강의에서 공개한 소스 코드에 있는 이미지는 불러올 수 없었기에, 내 맘대로 뽀로로 캐릭터 사진을 구글링 해서 데려왔다..ㅎㅎㅎ

 

 

만약에, 이렇게 불러온 이미지를 눌러서 어떤 문서(웹 페이지)로 이동하고 싶다면

<a href="이동하려는 웹 페이지 URL"><img src="이미지 위치"></a>

위와 같이 <img> tag를 <a> tag로 감싸면 된다!