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) 코드 완성뷰
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) 이미지 확장자 비교
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
반응형
'웹언어 > HTML5' 카테고리의 다른 글
| [HTML기초문법] 6강 테이블(table)태그 (0) | 2020.05.15 |
|---|---|
| [HTML기본문법] 5강 <div>태그와 <span>태그 (0) | 2020.04.23 |
| [HTML기초문법] 3강 a(앵커)태그와 하이퍼링크 (0) | 2020.04.20 |
| [HTML기초문법] 2강 글자형태태그, 첨자태그, 강조태그 (0) | 2020.04.20 |
| [HTML기초문법] 1강 텍스트태그 (0) | 2020.04.15 |
