본문 바로가기

웹언어/HTML5

[HTML기초문법] 4강 이미지 태그

728x90
반응형

 

 

 

 

 

 

 

 

 

 

** 영상으로 보고 싶다면 아래 주소를 클릭하세요.

https://www.youtube.com/watch?v=lnIJqgJLDaM&t=275s 

 

 

 

 

 

 

 

1. 이미지태그

 

1) 이미지 태그 기본문법

 

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

- 위 2개의 속성을 작성하지 않으면 웹표준에 어긋남

 

 

 

 

 

 

2) 이미지 태그의 속성

속성 설명
src 이미지의 경로를 작성하는 태그
alt 이미지의 대체텍스트로 경로가 잘못되는 경우 대체텍스트가 보인다.
웹접근성에서 중요한 의미로 시각장애인에게 스크린리더기로 읽어주는 역할을 한다.
width 이미지의 가로크기 속성으로 값에 단위를 작성하지 않는다. (px단위로 자동인식)
CSS에서 대체 가능하다. 미작성시 원래 사이즈로 처리
height 이미지의 세로높이 속성으로 값에 단위를 작성하지 않는다. (px단위로 자동인식)
CSS에서 대체 가능하다. 미작성시 원래 사이즈로 처리

 

 

 

 

 

 

3) 코드 뷰

 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>이미지태그</title>
    </head>
    <body>
        <img src="images/cat-2083492_1280.jpg" alt="고양이 이미지" width="400" height="400">
    </body>
</html>

 

 

 

 

 

 

 

4) 코드 완성뷰

 

이미지출처 : https://pixabay.com/ko/

 

 

 

 

 

 

 

 

 

 

 

 

2. 웹서버에 올리는 파일명 규칙

- html, css, js, 이미지, 동영상, 폴더 등 모든 파일명 규칙

 

 

 

1) 영문 대소문자를 구분하여 작성한다.

 

<a href="a1.html"></a>  ≠   <a href="A1.html"></a>

 

 

 

 

 

2) 숫자는 보통 영문뒤에 작성한다.

 

<a href="a1.html"></a>(O)   
<a href="1a.html"></a>(X)

- 최근에는 숫자만 있어도 인식하는 서버들이 많다. 하지만 일반적으로 규칙을 지켜주는 것이 좋다.

 

 

 

 

 

 

3) 특수문자는 [_]만 사용가능

 

<a href="test_link.html"></a>(O)
<a href="test&*&.html"></a>(X)

 

 

 

 

 

4) 공백문자는 사용하지 않는다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. 웹서버에 올리는 이미지 파일 확장자

 

1) 확장자의 종류

확장자 설명 장점 단점 웹에서 사용
GIF 이미지의 전송을 빠르게 하기 위하여 압축 저장하는 방식 중 하나
256색 지원
이미지 용량이 작아 이미지구현(렌더링) 속도가 빠르다. 색 지원이 적어 큰 이미지로 저장시 깨짐현상이 발생됨
투명도를 지원하지만 끝부분이 깨져보임
작은 썸네일이미지로 사용
JPG 웹에서 표준으로 지원하는 파일로 색상지원이 뛰어나며 손실압축기법을 사용한다. 색상지원을 많이해서 고해상도 이미지 사용시 깨짐현상이 없다. 투명도를 지원하지 않음, 손실 압축기법이어서 글자를 이미지로 저장시 뭉개짐현상 발생 큰 고해상도 이미지에 사용
PNG 비손실 압축기법으로 이미지를 저장시 최상의 비트맵을 지원 비손실 압축 기법으로 뭉개짐현상이 적고, 투명도를 완벽하게 지원 파일의 용량이 크다. 투명한 이미지에 사용

 

 

 

 

 

2) 이미지 확장자 비교

현재 상태에서는 PNG를 사용하는 것이 제일 깔끔하다.

 

 

 

 

 

 

 

 

 

 

 

 

4. 테스트용 이미지 가져오기

<img src="http://placehold.it/가로크기x세로크기" alt="">

 

 

 

 

1) 코드 뷰

 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>예시 이미지</title>
    </head>
    <body>
        <img src="http://placehold.it/300x200" alt="">
    </body>
</html>

 

 

 

 

 

 

2) 코드 완성뷰

 

 

 

 

 

 

 

728x90
반응형