| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- 퀀텀
- 이더리움
- CSS
- ICO
- 웹개발자
- 국비지원IT
- 퍼블리셔
- 코딩
- IT
- 웹디자인
- 프론트엔드개발자
- 백엔드
- JavaScript
- 프론트엔드
- jQuery
- java
- 비트코인
- frontend
- 핀테크
- 백엔드개발자
- 웹프론트엔드개발자
- 가상화폐
- 프론트엔드국비지원
- developer
- HTML
- 블록체인
- 암호화폐
- 개발자
- backend
- 웹퍼블리셔
- Today
- Total
wellkiim
html_img태그 본문
안녕하세요.
div와 p태그 span 등등
기본적인 block태그와
inline태그들을 알아보았습니다.
웹페이지를 만들기 위해선
예쁜이미지가 필수죠?
그래서 오늘은 img 태그에 대하여 알아보도록 하겠습니다.
기본적인 형태는 이렇습니다.
<img src="" alt=""/>
src는 경로를 의미합니다.
아래에서 다시한번 제대로 보시겠지만,
src 는 source라는 의미를 가지고 있습니다.
또한 알트는 대체텍스트로서 사용되기 때문에,
웹접근성, 웹표준에 있어서 중요한 역할을 차지합니다.
그렇게 때문에 꼭 사용할 것을 권장드립니다.
(
웹표준, 웹접근성에 대한 내용은 포털사이트 검색을 추천드립니다.
튼튼한 페이지를 위한 가장 기본적인 것들입니다.
지키지 않는 사람들이 많습니다.
저러한 대체텍스트를 사용함으로써 여러분들이 만드는 페이지는 정말 큰 강점을 가지게 된다는 것을 알아두세요!
)
그리고 눈치채신 분들 또한 있겠지만,
닫힘 태그가 업습니다.
img 태그는 단일태그로써 사용됩니다.
에디터에 코드를 작성하여 보여드리도록 하겠습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<title> new document </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>
<h2>이미지</h2>
<p>
<img src="background.jpg" alt="배경화면"/>
</p>
</body>
</html>
<!--
img태그 사용시 주의사항
+ 인라인태그중에 하나!
+ 속성을 2개를 가지게 됨
src는 직접 이미지의 주소를 연결
alt는 이미지를 설명하기 위한글작성
+ alt를 사용하는 이유
src의 소스만 보고 어떤 이미지인지 판단할수가 없음!
alt를 통해서 어떤 이미지인지 대체할 텍스트가 필요함
+ 대체텍스트(원본파일만 보고 모를때를 대비하여 설명글이 필요함)
-->
src에 해당하는 내용은 저렇게 확장자명까지 같이 작성해주어야 합니다.
(
꼭 같은 폴더 / 같은 위치안에 있어야 합니다. 같은 위치안에 폴더가 따로 있을경우
ex) image/background.jpg 라고 작성해주시면 됩니다.
)
alt ( 대체텍스트 ) 안의 내용은 아무렇게나 작성해주시면 됩니다.
하지만, 대체텍스트인 만큼 해당 이미지와 연관된 텍스트라면 좋겠죠.?
짠 , 출력된 페이지입니다.!
h2태그에 작성된 "이미지" 텍스트와
그 아래 p태그 안의 inline속성 img태그로 만들어진 페이지입니다.
아, 그리고 한가지.
주석글에 작성한 내용을 다시한번 꼼꼼히 읽어볼 것을 권장드립니다 .!
다음시간에 또 뵐게요~
'Development > HTML, CSS' 카테고리의 다른 글
| css_font (0) | 2018.05.06 |
|---|---|
| html_web_basic (0) | 2018.05.06 |
| html_webpage_basic (0) | 2018.05.06 |
| html_inline과 block 태그 (0) | 2018.05.06 |
| html_tag (0) | 2018.05.06 |
