미세먼지가 걷혀진 하늘을 보니 마음도 개운해지는 기분이 드네요 ㅎㅎ 오늘은 등산을 해봐야 겠어요~ 음 뻘 소리가 길었군요.. 오늘 이야기해볼 내용은 html img 태그 사용법 입니다 홈페이지를 만드시거나 웹에서 글작성 시 html code 로 이미지 삽입 을 해주고 싶을때 어떻게 해야 하는지 물어보시는 분들이 생각보다 많더라구요 이런 분들을 위해서 IT레시피가 속시원하게 해결해 드리겠습니다ㅎㅎ
물론 html img 태그 같은 경우 단독으로 사용하는 경우보다 여러가지 부가적인 html code 와 함께 쓰는 경우가 훨씬 많으므로 같이 알아두시는 것이 좋겠지요 예를 들어 이미지 사이즈 ( html image size percent ) 크기, 이미지가 깨졌을때 나올 텍스트 문자, 마우스를 올려놓았을때 보여지는 속성, 색깔 등 여러가지 code 가 있죠 ㅎㅎ 모르셨던 분들은 지금부터 정리해드리니 아래 설명을 통해서 알아가시길 바랍니다!
먼저 가장 기본적인 src 속성 입니다 html태그로 이미지를 보여주는 코드인데요 모두 아실것 같지만 src 같은 경우 source 약자로 해당 이미지가 있는 위치를 입력해주시면 이미지가 나오게 되는 원리입니다 물론 자신의 컴퓨터에 이미지가 있다고 컴퓨터에 있는 이미지위치를 넣으면 웹에서는 안보여지겠지요 ㅎㅎ 반드시 웹상에 이미지를 올려놓고 해당 이미지위치를 적어주셔야 이미지가 나오니 꼭 명심하시길 바랍니다!
이미지 삽입 태그
자 예를 들어 설명해드리는것이 가장 좋겠죠 해당 포스팅에서 맨위 html img 태그 표지 이미지를 보시면 이것도 웹에 올려지게되면 이미지 주소가 생성됩니다 이것을 코드로 넣어주시려면 아래 코드로 표현이 됩니다
<img src="https://t1.daumcdn.net/cfile/tistory/9911833E5AD533F92F">
이미지 사이즈 조절 태그
이렇게만 해주시면 이미지는 문제없이 잘 넣어지겠죠 여기에서 이미지 사이즈 조절 하는방법을 추가해 보도록 하겠습니다 바로 width , height 속성인데요 한글로 해석해보셔도 너비와 높이로 해석되는 만큼 사용하시는데 큰 문제없이 이용하실 수 있으실것 같습니다^^ 이것을 위해 코드에 추가해주시면 아래와 같이 표현이 되겠지요
<img src="이미지 주소" width="200" height="200">
물론 이러한 코드를 적어주실때는 html 편집창에 넣어주셔야 하는점도 기억해두셔야 하겠죠 위 그림과 같이 적어주시면 다시 기본 포스팅 화면으로 돌아왔을때 아래와 같은 이미지로 보여지게 되는 것이죠~
물론 위에 사이즈숫자는 px(픽셀)로 표현된 것이지만 %로 적어주실수도 있습니다 상대적인 이미지 크기가 조절되는 것이라서 웹브라우저 크기를 조절하면 같이 크기가 변하게 됩니다 물론 이미지 파일 크기 같은 경우에는 변하지 않으니 이점도 참고해주시길 바랍니다
이미지 말풍선 태그
다음은 이미지에 커서를 올려두면 말풍선이 나오게 하는 코드입니다 바로 title 태그 인데요 해당 코드예를 표시해 보자면 아래와 같습니다
<img src="이미지 주소" width="200" height="200" title="좋은하루">
이렇게 입력해주시면 마우스 포인터를 해당 이미지에 가져다 놓으면 아래 그림과 같이 표시되는 것이죠~
이미지 대체 텍스트 넣기
다음은 alt 태그 즉, 대체텍스트 기능인데요 이미지가 깨졌거나 가져올 수 없는 경우 이미지를 대체할 텍스트를 보여주게 하실 수 있습니다 바로 아래 코드를 추가해주시면 됩니다
<img src="이미지 주소" width="200" height="200" alt="이미지가 삭제되었습니다">
이렇게 해주시면 아래 그림과 같이 이미지가 나오지 않더라도 이미지가 나오지 않는 원인을 표시해 주실수도 있겠지요^^
이미지 링크 태그
다음은 이미지에 링크를 걸어주는 방법입니다 가장 많이 물어보시는 부분이기도 한데요 바로 a태그를 이용해서 이미지 혹은 그림을 클릭 하셨을때 원하는 사이트로 넘어가게 해주실 수 있습니다 물론 여기에도 새창으로 뜨게 할것인지 탭으로 나오게 할것인지 아니면 기존창에서 바뀌어서 열리게 할것인지 속성값을 정해주실 수도 있습니다 아래 정리된 표를 보면서 알아가시면 이해가 되실겁니다ㅎㅎ
<a href="사이트 주소" target="_blank"><img src"이미지 주소">
[a태그 종류]
_blank : 새 탭으로 열기
_self : 기존 창에서 열기
_new : 처음 1회만 새창으로 열기
이런식으로 넣어주시면 그림을 클릭했을때 새탭으로 연결된 링크페이지가 열리게 되는 것이죠
이미지 테두리 넣는법
다음은 마지막기능으로 이미지 주변 테두리를 넣어주는 방법입니다 border 태그 인데요 테두리 두께를 조절하실 수 있기 때문에 보통 1~2정도 넣어주시면 됩니다
<img src="이미지 주소" border="1">
여기까지 html img 태그 삽입을 통해서 웹상에 이미지를 넣는 방법에 대해서 알아봤습니다 물론 여기에다가 추가적으로 텍스트 샐깔 이라던지 굵기 , 크기 등 여러가지 부가속성을 넣어주셔도 되지만 더욱 자세한 내용은 다음 포스팅에서 다루어 보도록 하겠습니다
오늘 아침 날씨도 매우 상쾌하네요 오늘도 좋은 하루 보내시길 바라면서 여러분들도 즐거운 하루 보내시길 바랍니다~