1.img 태그로 이미지 넣기
- 이미지를 웹사이트에 추가하기 위해서 img 태그를 사용한다
<img src=“이미지 주소” alt=“html”>- alt: 이미지가 뜨지 않았을 때(서버에서 이미지가 삭제되었거나 잘못된 이미지 주소일 때) 이미지 대신 보여줄 텍스트
- src: 이미지 파일 경로나 이미지 url주소
2. 이미지 크기 조절
img{
width:250px;
}- 가로만 지정해주게 된다면 가로의 비율에 맞춰서 세로도 알맞게 조정된다.
3. background-image 로 이미지 넣기
- 태그가 아니라 css를 이용해 이미지를 생성한다.
.bg-img{
background-image: url(“https://upload.wikimedia.org”)
}- width와 height 속성으로 이미지의 크기를 조정해도 해도 원본 이미지의 크기가 조정되지 않으며 지정한 크기만큼 잘려서 보이게 된다.
- 배경 이미지 크기를 .bg-img 크기만큼 줄이기 위해서는 width와 height로 크기를 지정한 뒤
.bg-img{
background-img: 100%;
}를 사용하여 해당 배경이미지가 .bg-img의 가로크기만큼 꽉 채워 그려주도록 작성한다.
