이미지태그는 웹 프론트에서 꽃이다. 중요!!
img태그 : 카테고리상 inline 레벨 (실상 inline-block)
- 닫는 태그가 없음. (자식태그를 갖을 수 없음)
- 사이즈를 적용할 수 있다.
가로 또는 세로 한 쪽에만 사이즈를 줘도 알아서 반대쪽도 크기가 변한다.
별도의 사이즈를 명시하지 않으면 원본사이즈 그대로 출력된다. - css보다 html에서 이미지 사이즈를 변경하는 것이 렌더링속도가 빠르다.
잘 안쓰는 이유는 이미지만 사이즈 조정이 되기 때문이고,
css도 수정해야하는데 html 둘 다 수정해야하니 불편하기 때문이다. - img태그를 생으로 사용하지말고 div태그안에 넣어서 사용해야한다.
왜냐하면 원하는 영역보다 이미지가 더 클 수도 있어서 그러면 레이아웃이 어그러질 수 있기 때문이다.
이미지를 감싸는 div를 만들고 width: 100%; overflow: hidden; 을 하면 된다.
당장은 필요없어도 작성해놓는 습관만들기
-속성-
- src : 필수속성. 이미지경로
- 같은 레벨에 있을 때 : 파일명/폴더명 그대로 씀
★폴더 안으로 들어가려면(하위로 가려면) '폴더명/'으로 들어간다. - ./폴더명or파일명
- 상위 레벨에 있을 때 : ../폴더명or파일명
- 같은 레벨에 있을 때 : 파일명/폴더명 그대로 씀
- alt : 옵션속성. 대체글자(이미지 설명)
- 옵션이라고는 하지만 무조건 적어주기!!
src가 잘 못 돼서 이미지가 안나오면 나타나는 설명글
★웹접근성 - 시각장애인용 기기에서 alt의 글을 읽어줌.
- 옵션이라고는 하지만 무조건 적어주기!!
-이미지를 불러오는 방법 -
1. 내 서버에서 불러오기 : 로컬(내 PC)
2. 웹에서 불러오기 : http, https로 시작하는 경로
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./img/1.jpg" alt="">
</body>
</html>기타
-
이미지 넣을 때 div로 감싸고 (css) img{width:100%} 로 스타일 적용 해놔야함.
만약 부모가 inline이라면 안 먹을 수도 있으니 필히 확인!
(inline은 필요한만큼 잡으니까. width값 안먹고) -
이미지는 인라인레벨이기 때문에 이미지 밑에 빈공간을 먹고 있다. 이걸 없애고 싶다면 font-size: 0을 주거나 float / position으로 띄워야 한다.
-
이미지태그 가운데 주는 방법
line-height: 1; (영역 딱맞추기)
padding: px (패딩으로 주위에 영역 만들어주기) -
크기를 키울 때 background말고 img태그를 써야지 transition으로 부드럽게 커질 수 있다.
width: 150%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -
filter라는 속성으로 색을 변경할 수 있다.
그러나 내가 원하는 색상으로 정확히 변경하기는 힘들다.
filter: blur(px)
filter: brightness(0.5);
hue-rotate(deg); > 색변형(조절하기는 힘듬.)
grayscale >
섞어서 쓸 때는 빈칸으로 구분하면서 줄줄이 쓰면 됨
ex) filter: blue(10px) brightness(0.5)
계속 나아가기