오늘은 background-image에 대해 몰랐던 사실들을 한번 알아보도록 하자.
CSS의 대가, 유튜브 채널 '빔캠프'의 이종찬 강사님의 강의를 듣고 정리해보았다.
우선 HTML/CSS 소스코드는 이렇다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>background-image</title>
<style>
html{
}
body{
font-size:100px;
background-image: url(./images/cover.png);
}
</style>
</head>
<body>
행복
</body>
</html><style>
html{
/* 추가 예정 */
}
body{
font-size:100px;
background-image: url(./images/cover.png);
}
</style>우선 위의 소스코드의 결과는 이렇다.
결과를 보면 배경이미지로 적용한 하나의 이미지가 바둑판식으로 배열되어 보기에 좋지않은 결과를 보여준다.
결과의 첫번째 근본적인 이유는 800*400 크기의 원본이미지때문이다. 이미지가 <body>보다 작기 때문에 배경이미지는 <body> 전체를 채우려고 하는 것이다.
자세히 설명하자면 적용하지 않은 스타일 속성인 background-repeat가 기본적으로 적용되어 초기값 repeat 때문에 "바둑판식 배열"형식으로 화면에 꽉 채운 것이다.
이 상태에서 background-position:center를 적용해보면 아래처럼 배경이미지가 달라진 것은 화면의 가운데로 이미지가 정렬된 것 말고는 달라진게 없는 결과가 나온다.
background-size:cover로 전체화면을 다 채워도 아래의 경계선이 생겨 보기에 좋지 않다.
이를 해결하기 위해 background-image에 대해 이해하는 시간을 가져보자 😄
특별한 <body>태그
우선 우리는 이 상황에서 먼저 <body>태그를 확인해보자.
우선 배경 이미지를 대신하여 background-color:orange를 적용하여 살펴보자.
우선 아까와 배경 이미지만 다르고 똑같은 결과이다. 하지만 <body>를 개발자 도구를 통해 검사해보면 결과가 특이하게 나온다.
(reset CSS를 적용하지 않아서 <body>태그의 User agent stylesheet가 적용이 되어 marin:8px이 적용이 된 상태이다.)
분명 <body> 태그에 적용한 색은 화면 전체에 적용이 되었는데 콘텐츠의 영역은 콘텐츠인 "행복"만큼의 영역만을 차지하고 있다.
혹시 <html> 태그에 적용이 된 것은 아닐까?
아래 이미지처럼 결과는 똑같이 <html> 또한 내부의 콘텐츠 영역만큼만 차지하고 있고 <html>에 적용된 CSS는 없었다.
그렇다면 <html>에 직접 배경색(background-color: dodgerblue)을 적용시켜보자.
원래 <html> 태그에는 관례상 배경색을 적용하지 않고 대신 <body>에 적용하지만 공부를 위해 적용하자!
결과는 <body>태그의 배경색 orange을 제외한 나머지 영역은 다른 배경색인 dodgerblue으로 채워진다.
이는 <html> 영역에 배경색이 채워지지 않고 투명 상태가 되며 "우리가 인지하지 못하는 그 너머의 상위의 영역"에 배경색이 적용된다.
이로써 현재 <body> 태그의 상위에 배경색이 채워졌기 때문에 <body>는 원래의 본인 영역대로 배경색을 적용시킨다.
그래서 단독으로 <body>태그에 배경색을 적용했을 때 배경색이 화면 전체에 다 차지한 것을 보면 HTML에서는 <body>는 특별 취급을 하고 있다고 볼 수 있다.
이유를 살펴보면 만약 <body>태그에 적용한 배경색이 콘텐츠의 영역에만 적용이 된다면 나머지 영역에 대해서는 배경색을 적용시킬 수 있는 방법이 <html> 태그에 적용하는 방법밖에 없다.
생각해보면 <body>태그를 특별 취급을 해서 콘텐츠 영역 뿐만 아니라 화면 전체 영역에 배경색을 적용시키는 것이 합리적이다.
정리를 해보자면,
<body>에 배경 이미지 적용을 하고<html>에 배경 적용을 안할 시 = 화면 전체에<body>의 배경 이미지가 적용된다.<body>에 배경 이미지 적용을 하고<html>에도 배경 적용 시 =<body>의 콘텐츠 영역만큼 배경 이미지가 적용되고 나머지 영역은<html>에 적용한 배경이 적용된다.
background-attachment
우리는 아직 <body>태그의 배경 이미지를 화면 전체에 적용하지 않았다.
이제 화면 전체에 보기 좋게 아래 CSS 속성을 추가해서 배경 이미지를 적용해보자.
body{
font-size:100px;
background-image: url(./images/cover.png);
background-position: center;
background-size: cover;
background-attachment: fixed;
}위의 결과는 아래처럼 정상적으로 화면에 가득 채워져서 나오게 된다.
이유는 background-size: cover와 background-attachment: fixed 때문이다.
background-attachment: fixed는 원래 기준이 <body>의 영역 너머까지 적용이 되었는데 적용 후엔 "뷰포트"를 기준으로 적용이 된다.
즉, 같이 적용된 background-size: cover background-position: center은 background-attachment:fixed 속성을 사용한 이후부터 "뷰포트"를 기준으로 적용이 되기 때문에 배경 이미지가 꽉 차는 것이다.
이것을 보아 background-attachment:fixed를 사용하면 다른 background 속성들이 함께 적용이 된다는 사실을 알 수 있다!
정리를 마치며.. ⛳️
저번 프로필 만들기에서도 사용한 방법이지만 한번 더 자세하게 배운 것 같아 한번 더 기억에 남을 것 같은 강의였다.
그리고 몰랐던 <body> 태그의 특별 취급도 이번에 새롭게 알게 되어 다음에 이러한 경우가 있을 때 한번 더 생각할 수 있는 계기가 된 것 같다!
그리고 CSS는 하면 할 수록 정말 재밌는 것 같다! 😎
