이미지 넣는 방법2개(+semantic web과 semantic tag 이해)

2021.11.01 (Day1)에 배운 것중,

HTML과 CSS에서
이미지 넣는 방법 2가지에 대하여 정리해보려고 한다.

• 하나는 <img>태그를 이용하여 이미지 주소(url) or 이미지 파일 경로를 입력하는 방법
• 나머지 하나는 background-image를 이용하여 입력하는 방법

이다.

1. 태그 사용법

<img alt="이미지 없을때 대신 표현할 것" src="이미지 주소(url) or 이미지 파일 경로">

EX) 해당 코드를 입력하면,

  <img alt="css" src=" https://cdn4.iconfinder.com/data/icons/flat-brand-logo-2/512/css3-512.png">

하단의 이미지처럼 넣을 수 있다.(원본 사이즈 그대로)

--> HTML에서 <img> 태그 자체에, width(가로)와 hight(세로) 설정 가능하나,
가독성을 위해 CSS에서 width(가로)와 hight(세로)를 설정하는게 좋음.

<img class="img1" alt="css" src=" https://cdn4.iconfinder.com/data/icons/flat-brand-logo-2/512/css3-512.png">

img{
	width: 100px;
    hight:100px;
}

Semantic Web과 Semantic Tag 란?

우선, 저 두 용어의 정의와 차이를 알아보기 전에 `semantic` 이라는 영어 사전의 의미를 먼저 알고 넘어가도록 해야할 것같다..

Semantic :

• 1. 의미의
• 2. 의미론의

이라고 한다.

그럼, 프로그래밍에서의 Semantic이란 무엇인가?