12-1. img 태그로 이미지 넣기
이미지를 웹 사이트에 추가하는 방법은 여러 가지가 있는데, 가장 많이 쓰이는 방법은 다음과 같이 img 태그를 사용하는 것입니다.
<img alt="HTML" src="https://i.pinimg.com/564x/39/e1/11/39e111ac398f95205bd83e540466523c.jpg">img 태그에 사용된 속성을 하나씩 살펴보겠습니다.
alt: 이미지가 불러올 수 없을 때(서버에서 이미지가 삭제됐거나 잘못된 이미지 주소일 때..), 이미지 대신 보여줄 텍스트
src: 이미지 파일 경로 혹은 이미지 url 주소
img 태그의 속성(attribute)에는 width, height가 있어서 html에서 직접 수정 가능합니다.
하지만 유지보수나 좋은 코딩 습관을 위해 css는 항상 style.css에서 작성하는 것이 좋습니다.
img {
width: 150px;
}css에 가로만 지정해주었는데 원본의 세로 값으로 남아있는 것이 아니라, 가로의 150px 비율에 맞춰서 세로도 알맞게 줄어들었습니다.
이렇게 가로/세로 중에서 하나의 값만 입력하여도 브라우저에서 알아서 같은 비율로 나머지 크기도 줄여줍니다.
12-2. background-image로 이미지 넣기
첫 번째 방법은 html에서 img 태그로 이미지를 생성하는 것이었습니다. 또 다른 방법이 있는데, 태그가 아니라 css를 이용해 이미지를 생성하는 것입니다.
따라서 사이트에 이미지가 있을 때 어떤 것은 img 태그로 만들고, 어떤 것은 css의 background-image 속성으로 이미지를 추가했는지 사용자는 알기 어렵기 때문에 통일하는 것이 좋습니다.
또한, 이미지가 제대로 표시되지 않을 경우에 대비하여 background-color도 같이 지정하는 것이 좋습니다.
cf) 배경이미지 url은 쉼표를 사용하여 여러 개를 한꺼번에 넣을 수 있습니다. background-image: url("경로"), url("경로"); 구조입니다. 이런 경우에는 배경 이미지가 레이어처럼 차곡차곡 쌓이게 되는데, 처음으로 지정한 이미지가 맨 위에 보여집니다.
12-2-1. background-repeat
background-repeat 속성은, 배경 이미지의 반복 방법을 지정합니다.
background-repeat 속성을 지정하지 않으면, default 값은 'repeat'입니다.
이미지를 한 번만 나타내려면, 이 속성 값을 'no-repeat'으로 지정합니다.
- repeat : 배경 영역을 채울 때까지, 가로 세로 방향으로 이미지를 반복합니다.
- no-repeat : 이미지를 반복하지 않습니다.
- repeat-x : 가로 방향으로만 이미지를 반복합니다.
- repeat-y : 세로 방향으로만 이미지를 반복합니다.
- space : 배경 이미지가 잘리지 않고 반복됩니다. 공간의 양쪽(시작, 끝)에 이미지가 고정되고, 나머지 공간에 이미지에 이미지가 잘리지 않을 만큼 채워지고, 나머지 공간은 빈 공간으로 둡니다.
- round : 배경 이미지가 잘리지 않고 반복됩니다. 빈 공간이 생기지 않도록, 이미지가 늘어나거나 줄어듭니다.
<style>
div {
width: 100%;
height: 600px;
border: 1px solid #bcbcbc;
}
.a {
background-image: url( "images/bg-zunyang.png" );
background-repeat: repeat-x;
}
</style>출처 : wecode
