요소의 배경 크기가 이미지보다 크면 background-repeat 속성으로 해결할 수 있지만, 요소의 배경 크기가 이미지보다 작을 때 이미지가 잘려 보이는 문제는 해결할 수 없다.
그 대신 이 문제는 background-size 속성으로 이미지 크기를 지정해서 처리할 수 있다.
cover와 contain은 비슷해 보이지만, 서로 다르게 작동하는 속성값이다.
위쪽이 cover, 아래가 contain이다.
cover는 이미지가 잘리지만, contain은 비율을 유지하면서 이미지가 배경 요소에 꽉 차도록 확대하지만, 배경의 가로와 세로 중 한 부분이 가득 차면 그 상태에서 멈춘다. 그리고 못 채운 부분은 이미지를 반복해서 채운다.
또는 아래처럼 너비와 높이를 직접 지정해도 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>background-size</title>
<style>
div{
width:80px; /* 원본 이미지보다 1/2 작게 설정 */
height:60px; /* 원본 이미지보다 1/2 작게 설정 */
background-image:url('images/coffee.jpg');
background-size:80px 60px; /* 너비와 높이를 80px, 60px로 지정 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
이렇게 하면 이미지가 잘려보이지 않고 배경에 딱 맞게 표시된다.
background-position 속성
삽입하려는 이미지의 위치를 결정할 수 있다.
해당 속성값은 1개만 사용해도 되고 2개를 사용해도 된다.
값을 1개만 사용하면 지정한 값은 x축 값이 되고, y축 값은 기본으로 center가 된다.
2개를 사용하면 각각 x축과 y축 값으로 지정된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>background-position</title>
<style>
div{
width:320px; /* 원본 이미지보다 2배 크게 설정 */
height:240px;/* 원본 이미지보다 2배 크게 설정 */
border:1px solid black; /* 요소의 넓이가 잘 보이게 테두리 설정 */
background-image:url('images/coffee.jpg');
background-repeat:no-repeat;
background-position:100%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
위 코드를 설명하면 요소의 배경 크기는 삽입하려는 이미지보다 2배 크다.
이 상태에서 이미지를 반복하지 않고 x축 값만 100%로 지정했다.
이렇게 하면 자동으로 y축 값은 center가 된다.
이렇게 하면 자동으로 y축 값은 center가 된다.
참고로 100%는 비율에서 가장 큰 값이기 때문에 x축에 사용하면 가장 오른쪽, y축에 사용하면 가장 아래쪽을 의미한다.
background-position 속성은 background-size 속성값을 cover로 지정해서 같이 사용하면 효과가 좋다. background-size의 cover와 background-position 속성 값을 center로 지정하면 이미지가 정중앙에 있는 것처럼 보인다.
background-attachment 속성
요소에 삽입된 이미지를 스크롤할 때, 이미지 작동 방식을 결정한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>background-attachment-fixed</title>
<style>
body{
height:1000px;
}
.parent{
width:320px; /* 원본 이미지보다 2배 크게 설정 */
height:240px;/* 원본 이미지보다 2배 크게 설정 */
border:1px solid black; /* 요소의 넓이가 잘 보이게 테두리 설정 */
overflow:scroll;
}
.children{
height:2000px;
background-image:url('images/coffee.jpg');
background-attachment:fixed;
}
</style>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
</html>
위치 속성으로 HTML 요소 배치하기
CSS에서 제공하는 속성 중에는 HTML 요소를 기본 흐름에서 벗어나서 원하는 곳에 배치할 수 있는 속성이 있다.
이 속성들의 요소의 위치에 관여한다고 해서 위치 속성이라고 한다.
position 속성
HTML 요소를 기본 흐름에서 벗어나 좌푯값에 따라 배치할 때 사용한다.
static
position 속성 값을 static으로 지정하면 아무런 변화가 없다.
좌표 속성을 사용할 수 없으며 위치 속성을 사용하지 않았을 때와 같다.
기본 스타일 시트에 적용된 position 값이 static이다.
relative
position 속성값을 relative로 지정하면 요소를 좌표 속성에 따라 배치할 수 있다.
좌표 속성에 따라 요소를 배치하는 원리를 이해하려면 좌표계를 알아야 한다.
좌표계는 요소가 웹 브라우저에 표시될 때 x축, y축, z축에 따라 요소가 배치되는 개념이다.
absolute 값일 때는 요소를 움직이면 요소가 원래 있던 공간은 빈 공간으로 인식된다.
그래서 파란색 요소가 초록색 요소가 원래 있던 위치로 올라온다.
초록색 요소만 보면 이동한 위치가 relative 일 때와 다르지 않다. absolute는 기준점이 웹 브라우저의 왼쪽 위라고 했는데, 빨간색 요소 옆으로 가지 않고 relative 때처럼 원래 위치에서 오른쪽으로 이동한 이유는 position 속성값이 absolute일 때 top이나 bottom 속성을 지정하지 않으면 left나 right 속성은 원래 위치에서 x축 방향으로만 움직이기 때문이다.
웹 브라우저를 스크롤해 보면 화면에서 사라지는 빨간색과 파란색 요소와 다르게 초록색 요소는 top 속성값이 0인 위치에 고정되어 있다.
float 속성
요소를 화면에 배치하는 또 다른 방법으로는 float 속성이 있다.
float 속성은 대상 요소를 공중에 띄워 다음에 오는 요소를 주변에 자연스럽게 배치하기 위한 용도로 사용한다.
이미지 요소와 텍스트 요소 배치하기
이미지 요소와 텍스트 요소가 함께 사용될 때 float 속성의 특징을 적용하면 아래와 같은 레이아웃을 만들 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>float</title>
<style>
img{
float:left;
margin-right:1rem;
}
</style>
</head>
<body>
<img src="images/coffee.jpg" alt="커피">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti ut dolor ratione blanditiis iste, harum fugit, soluta eum obcaecati, expedita perspiciatis quam culpa? Doloribus repellendus labore sed inventore iusto eveniet. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores at natus aliquid numquam vitae nisi, voluptates laudantium saepe error sapiente nobis adipisci et accusamus molestiae commodi consequuntur earum, ut dicta? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id molestiae perspiciatis non temporibus voluptates alias ducimus libero esse recusandae placeat, natus quo mollitia sint enim? Ex numquam non officia ipsam?</p>
</body>
</html>
블록 성격 요소를 인라인 성격 요소처럼 배치
float 속성의 작동 원리를 이용해 블록 성격 요소를 인라인 성격 요소처럼 배치할 수 있다.
