TIL 사이트에 이미지를 넣는 방법

사이트에 이미지를 넣는 방법

1. HTML ->img태그를 사용하는 방법
2. CSS ->div태그에 background-image추가 하는방법

1. img 태그 사용하는 방법 -> HTML

<img src='이미지 경로' alt='이미지의 대한 정보'> 

img 태그에 사용되는 src가 삭제되었거나, 잘못된 이미지 주소일때 alt로 이미지 대신 텍스트를 보여준다.

2. div 태그에 background-image 속성을 추가하는 방법 -> CSS

<div class='bg-img'>배경이미지</div>

위에 코드로 이미지 넣는 영역을 만들고

.bg-img {
	background-color: 색깔;
    background-image: url(이미지 주소)
}

위에 bg-img 클래스안에 색깔, 주소, 크기 등 조절을 할 수 있다.

3. img 태그와 div 태그에 background-image 속성을 추가하는 것의 차이점

• 차이점 : alt 의 유무

🥕 TIL 정리

• 이미지가 사용자에게 컨텐츠 이해에 도움을 더 주면 HTML의 img 태그를 사용
• 이미지가 사용자에게 컨텐츠 이해에 도움을 주지않아도 되면 CSS의background-image 를 사용

🍖 다음에 알아볼 것!

Semantic Web과 Semantic Tag에 대한 이해

--- reference ---

• https://mygumi.tistory.com/369
• https://su1993.tistory.com/13