웹사이트를 시각적으로 다채롭게 만들어줄 수 있는 가장 간단한 방법,
바로 이미지 넣기이다.
오늘은 이미지를 넣는 두가지 대표적인 방법에 대해 알아보자.
1. <img> 태그로 html 문서에 바로 이미지 넣기
우선 html 태그인 <img> 만으로 웹 문서에 이미지를 삽입할 수 있다.
<img src = "이미지 파일 경로" alt = "대체용 텍스트">
<img> 태그 속에는 src와 alt 속성이 포함되어야 한다.
src 속성은 이미지 파일의 경로를 지정하는 역할을 하며,
alt속성은 화면 낭독기 등에서 이미지를 대신해서 읽어 줄 텍스트 역할을 한다.
<img> 태그로 삽입한 이미지의 크기 조정은 width를 통해 이미지의 너비를, height를 통해 이미지의 높이를 지정할 수 있다.
예를 들어, 이미지의 너비를 150px, 높이를 200px로 조정하고 싶으면
다음 예시와 같이 작성하면 된다.
<img src = "images/mypicture.jpg" alt="내사진"\ width="150px" height="200px">
2. 웹 요소에 배경 이미지를 넣는 background-image 속성
css를 사용하여 웹 요소에 배경 이미지를 넣는 background-image 속성을 통해 url()에 이미지 파일 경로를 넣어서 사용할 수 잇다.
background-image: url('이미지 파일 경로')
이미지가 한번만 첨부되는 위의 <img> 태그와는 달리
background-image는 배경을 넣을 때 요소보다 이미지 크기가 작으면 이미지가 반복이 되며 요소의 배경을 가득 채운다는 특징이 있다.
이러한 특징을 활용하여 background-repeat 속성을 통해 배경 이미지를 가로 repeat-x이나 세로 repeat-y 중에서 어떤 방향으로 반복할지 지정하거나, 아예 반복하지 못하게 한 번만 no-repeat로 나타나게 할 수도 있다.
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
background-image의 배경 이미지 크기를 조절하기 위해서는 background-size 속성을 활용할 수 있다.
요소 안에 배경 이미지가 다 들어오도록 확대, 축소하는 contain,
배경 이미지로 요소를 모두 덮도록 이미지를 확대, 축소하는 cover,
백분율이나 크기를 활용하여 너비와 높이를 지정할 수도 있다.
background-size: contain;
background-size: cover;
background-size: 100px 200%;
아래 예시는 배경 이미지를 한번만 불러온 후 요소의 높이와 너비를 모두 100%로 맞춘 경우이다.
div {
background-image: url('images/mypicture.jpg'); /*배경 이미지 삽입 */
background-image: no-repeat; /*배경 이미지 반복 안 함 */
background-size: 100% 100%;
} 그렇다면 각 요소는 어떤 상황에서 쓰는 것이 좋을까?
이는 의미론적인 웹, Semantic Web과도 큰 연관이 있다.
HTML <img> 태그 활용
- 이미지가 웹의 콘텐츠와 관련된 주요한 요소일 때
- 검색 엔진에 이미지의 문맥 정보 제공
CSS background-image 활용
- 이미지가 웹의 부가적인 요소 (ex.디자인)으로만 쓰이는 경우
- 이미지 위에 텍스트가 들어가는 경우
- 배경 전체 단위로 웹에 삽입할 경우
