img태그는 이미지를 표현할 수 있는 태그이다. 범위는 없으며 매우 다양한 옵션이 있다.
그리고 꼭 부여해야할 옵션이 두 가지 있는데, alt와 src옵션이다.
alt : 이미지가 없을 때 나올 설명 [리더기에 읽히는 글씨]인터넷사용이 불편하신분, 장애인분들이 도움받을 수 있음
src : 이미지의 경로 (내 컴퓨터에 있는건 불가능, C:/, D:/ 이런거 안됌 보안상이유로)
width : 너비(px, %)
height : 높이(px, %)
그래서 만약 사용한다면
<body></body>사이에
<img alt="그림이름" src="구글이나 인터넷사이트에서 이미지를 찾고 이미지주소를 복사하여 이곳에 붙여넣기" width="200" height="250">
하면 넓이 200 높이 250의 찾은 이미지를 넣을 수 있다.
+)동적인 것은 dynamic, 정적인 것은 static인데
무언가 창을 열고 창의 크기를 넓히고 줄였을때 그대로이면 정적인것이고, 움직이면 동적인 것이다.
동적인 것은 %로 넣어주면 되고, 정적인것은 숫자만 넣어주면 된다.
우리가 외부에서 가져온 이미지를 CDN이라고 하는데,
Content Delivery Network라고 불리며, 주소를 통해서 외부에서 가져오는 요소들을 총칭한다.
어디 있는것을 연결시켜줄 뿐이며, 가장 위험한건 항상 인터넷에 연결되어 있어야하고, 만약 사이트가 사라지면 이미지를 다시는 못쓰기 때문에 이미지를 다른이름으로 저장하여 다른곳으로 저장하면 안되고,
Brackets에 왼쪽 네비게이터 2분류된것중 현재파일 html창에 폴더를 하나 만들어주고 그폴더의 위치를 탐색기에서 본뒤 그 폴더에 다운받아 저장해주면 된다.
그렇게 하여 내가 가진 이미지를 출력할때는 현재 페이지 위치를 기준으로 계산한다.(상대경로)
<img alt="ooo" src="./저장하는폴더이름/저장한이미지이름.jpg"> 라고하면 사진이 본 사이트에서 사라져도 언제든 넣을 수 있다.
다음은 dummy라는 폴더를 추가로 만들어서 배웠는데, dummy라는 말 자체가 가짜라는 뜻이다.
더미이미지는 개발할 때 이미지가 들어갈 자리를 잡는 용도의 이미지이며, 제공해주는 사이트들을 이용하여 이미지를 설정한다고 한다.
Placeholder.com: Placeholder.com – The Free Image Placeholder Service Favoured By Designers
Contents1 What Is Placeholder.com?2 How To Use Our Placeholders3 How To Set Image Size4 How To Set Image Formats5 How To Set Custom Text6 How To Set Background & Text Color6.1 Popular Hex Color Codes7 New! WEBP Support8 New! HTTPS Support9 NEW! Placeholde
placeholder.com
PlaceIMG | Easy FPO and Dummy Images for Any Project
placeimg.com
등의 사이트 들이 있다. 이 사이트에 들어가면 외국어로 되있지만 번역이 될 것이고, 보면 어떻게 사용하는지 튜토리얼들이 자세히 적혀져있다. 어떤 이미지를 만들고, 웹 디자이너들이 이미지를 넣어줄 때까지 대신하여 넣는 그런 주소인데 사용할 때는 <img src="placehold.it/300x150">와 같이 입력하면 300x150 이라는 크기와 글자가 입력된 상태의 dummy image가 형성되는 것을 볼 수 있다. 이것은 크기는 알 수 있으나, 컨셉을 알기는 힘들다.
그래서 두 번째 사이트로 잡을 수 있는데 사이트에 들어가보면 ANIMALS, ARCHITECTURE, NATURE, PEOPLE, TECH, ANY 등 의 카테고리들이 있고, 넓이와 높이, 필터 등 다양하게 설정할 수 있다.
<img src="https://placeimg.com/300/300/위 ANIMAL이나 다른것들"> 이렇게 입력할 수 있다.
ANIMALS를 입력하면 일반적인 동물사진들이 아무사진이나 출력되고,
ARCHITECTURE면 건축물, NATURE면 자연 등 보편화된 사진들이 화면에 출력된다. (새로고침할때마다 다른사진이 나옴)
'HTML' 카테고리의 다른 글
| [HTML#07] HTML DIV태그, P태그 (0) | 2020.12.04 |
|---|---|
| [HTML#06] HTML A태그 (0) | 2020.12.04 |
| [HTML#04] HTML FONT 태그 (0) | 2020.12.04 |
| [HTML#03]HTML 템플릿 만들기 (0) | 2020.12.04 |
| [HTML#03]HTML 템플릿 만들기 (0) | 2020.12.04 |