<img> 태그

Notice

Recent Posts

Recent Comments

Link

깃허브

« 2024/11 »
일	월	화	수	목	금	토
					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

Tags more

Archives

Today

Total

관리 메뉴

EverGiver

<img> 태그 본문

Front-End (웹)/HTML

<img> 태그

친절한개발초보자 2021. 7. 18. 22:33

728x90

<img> 태그

이미지를 출력해주는 태그

<img src="이미지 파일 경로" alt="대체용 텍스트">

- alt = ""
º 평소에는 보이지 않는다.
º 여러가지 오류로 인해서 혹시나 이미지가 출력하지 않는 상황일 때 이미지를 대신해서 설명으로나마 보여주기 위해 사용한다.
º 작성하지 않아도 이미지를 출력하는데 아무런 지장이 없다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>img태그</title>
</head>
<body>
    <img src="1.jpg" alt="라이언캐릭터">
    
    <img src="https://ww.namu.la/s/a91617f042302a5826f554dc238c73c96d17a4d5a7a5553b4aedb5ea458dbd0b674ffe5087652bc22c8619daeaab387909a6a20a9d7ad8b54da215258caeb96990077d9cf3c5a2ae1f778c3dc82f5fbfde15ee72f13a4caab2debb62dd81c0a7" alt="">
    
    <img src="img/2.png" alt="">
    <img src="img/img2/3.jpg" alt="">
    <img src="img/img2/img3/4.png" alt="">
</body>
</html>

img 경로
- 상대경로
: 상대적으로 이미지를 찾는 방법 (내가 이미지 파일을 갖고 있으면 그 파일을 그대로 불러와서 출력하는 방식)
º 장점
1. 이미지 파일을 가지고 있는 이상 절대로 사라질 일이 없다.
2. 인터넷이 연결되어 있지 않아도 상관없다.
º 단점
1. 이미지를 일일이 들고 다녀야 한다.
- 상대경로 찾는 방법 (HTML 파일이 있는 위치를 기준으로 찾는다)
1. HTML 파일과 사진이 같은 위치에 있으면
<img src="사진이름.확장자명">
2. 다른 폴더에 사진이 있는 경우
<img src="폴더이름/사진이름.확장자명">
3. 폴더 안에 폴더가 또 있는 경우
: 폴더 이름을 일일이 순서에 맞춰서 작성을 해줘야 한다.
<img src="폴더이름/폴더이름/사진이름.확장자명">
4. 아예 다른 폴더에 사진이 있는 경우
<img src="../폴더명/사진이름.확장자명">
(../ : 뒤로 가기)
- 절대경로
: 사진 파일을 가지고 있지 않아도 다른 장소에서 사진을 끌어와서 출력시켜주는 방식
º 장점
1. 파일이 없어도 가져올 수 있다.
º 단점
1. 인터넷이 연결되어 있지 않거나 사진을 올린 당사자가 사진을 내려버리면 출력이 되지 않는다.
```
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>이미지태그 경로연습</title>
</head>
    <body>
        <img src="1.gif" alt="">
        <img src="img/2.gif" alt="">
        <img src="img/img_sub/3.gif" alt="">
        <img src="sub/4.gif" alt="">
        <img src="../img/5.gif" alt="">
        <img src="../img/sub/6.gif" alt="">
        <img src="../sub/7.gif" alt="">
        <img src="../sub/sub_sub/8.gif" alt="">
        <img src="../sub_img/9.jpg" alt="">
        <img src="../sub_img/img/10.gif" alt="">
        <img src="../sub_img/img/sub/11.gif" alt="">
    </body>
</html>
```
이미지 크기를 표현하는 단위
- %
: 현재 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기를 결정한다.
- px
: 이미지의 너비나 높이를 해당 픽셀 크기만큼 표시한다.