HTML_사진 삽입 (feat. <img>)

<img>

  홈페이지를 구성하는 요소들이 텍스트(글자)만 있는 것은 아니다.

  대부분의 페이지는 이미지, 영상과 같은 콘텐츠가 포함되어 있는데

  오늘은 사진, 이미지를 첨부하는 법을 배울 것이다.

 

  먼저 사진을 구해 htm과 같은폴더에 넣거나

  깔끔하게 하기위해 하위폴더를 만들어 저장해야한다.

  그리고 태그로 이를 불러오면 되는데 우리가 배웠던 <a>태그와 비슷하다는 것을 알 수 있다.

  <img src="image.jpeg">로 구성되는데

  src가 경로를 붙여넣는 속성이 되는 것이고,

  가운데에 적힌 "image.jpeg"가 이미지를 불러올 경로&이미지 파일이름 이다.

  작성자는 연습사진에 이미지파일을 넣어놔서 아래와같이 '/'를 사용해 경로를 포함했다.

  이렇게 첨부를 하게되면 첨부한 사진 원본크기대로 출력이 되는데

예재

  이와 같이 크기 조절이 필요할 것 같다.

 

속성

  이때 사용되는 속성이 width, height를 사용하면 된다.

  <img src="image.jpeg" width="100" height="100">를 작성하면

예재

  위와 같이 사진크기가 조정된다.

  하지만 width(가로) height(세로)를 원본 비율과 다르게 설정하면 사진이 늘어나거나 이상해질 수 있다.

  그래서 한개만 설정하게되면 원본 비율은 유지하되 크기를 원하는대로 조절할 수 있다.

 

  다음은 alt속성이다.

  예를들어 해당 파일이 다른경로로 이동되거나 삭제가 된다면

  작성한 src경로에선 파일을 찾을 수 없기 때문에 흔히 말하는 엑박(엑스박스or 엑스의압박)이 발생한다.

  엑박이란 파일이 보이지 않을때 사용하는 파생표현이다.

  이때 사용자는 이게 무슨사진인지 모를 수 있는데 alt속성을 활용해 대체문구를 표기할 수 있다.

 

예재

이런식으로 대체문구를 지정할 수있다.

이외에도 사진테두리를 두껍게 할 수 있는 border="두께지정(숫자)"

이미지의 설명을 추가할 수 있는 title="설명"

이미지의 정렬방식을 설정할 수 있는 align="left or right or center or top or top or bottom or middle ......"

등의 속성이 있다.

 

하이퍼텍스트 <a>와 <img>의 태그를 섞어 응용하면

클릭했을때 어떠한 링크로 이동할 수 있는 사진을 출력할 수 있다.

ex) <a href="https://3pdev.tistory.com/"> <img src="image.jpeg"> </a>