웹문서에 이미지 삽입

웹 문서에 이미지를 삽입하는 방법에 대해서 알아보겠습니다.

1. <img> 태그 이용하기

<img alt="Text" src="이미지 주소값">

img태그에 사용된 속성을 보면 alt와 src가 있습니다.

src속성에 사용되는 속성값에는 이미지의 url주고 또는 이미지 파일 경로를 적습니다.
alt속성에 사용되는 속성값에는 이미지가 없거나 잘못된 이미지일 경우에, 이미지를 대신하여
보여줄 텍스트값이 들어값니다.

2. background-image로 이미지 넣기

이번에는 css를 이용하여 이미지를 생성 하는 방법입니다.
예를들면 <div class="bg-img">배경이미지</div> 과 같이 태그안에 클래스를 적용하고
css를 이용하여 bg-img는 다음과 같이 하여 이미지를 넣을수 있습니다.

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

위에서 background-color 는 배경색을 추가하는 것이고,
background-image 는 배경 이미지를 추가하는 것입니다.

2.1 background-size

background-size속성은 배경이미지의 너비의 길이를 기준으로 크기를 결정할때 사용합니다.
예를 들어서 다음과 같이 한다면, 배경이미지를 담는 영역의 가로크기가 배경이미지 만큼 꽉채워 그려주라는 의미입니다.

.bg-img {
   background-size: 100%;
}

2.2 background-color

background-color속성을 이용하면 배경에 색상을 넣을수 있습니다.

.bg-img {
  background-color: yellow;