안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에는 웹사이트에 생동감을 불어넣는 ‘변신 애니메이션 마법’을 배웠죠? 오늘은 우리 마법 학교를 더 아름답게 꾸며줄 ‘이미지와 배경 마법’을 배워보겠습니다. 밋밋한 흰색 배경 대신 멋진 마법 성의 배경을 넣고, 사진을 동그랗게 자르는 기술을 익혀볼까요?
[IMAGE_1]
1. 사진을 내 마음대로! object-fit 마법
웹사이트에 사진을 넣다 보면 가로세로 비율이 안 맞아서 사진이 찌그러질 때가 있죠? 이때 object-fit: cover; 주문을 외우면 사진이 찌그러지지 않고 상자 크기에 맞춰 예쁘게 채워진답니다. 마치 마법 액자가 사진의 가장 예쁜 부분만 쏙 골라 보여주는 것과 같아요!
2. 배경과 이미지 꾸미기 주문서 (코드)
웹사이트 전체에 멋진 배경을 깔고, 마법사 프로필 사진을 동그랗게 만드는 코드를 작성해 봅시다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
/* 1. 전체 배경 마법: 이미지 경로, 반복 안함, 가운데 정렬, 화면 꽉 채우기 */
background-image: url('magic-castle.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed; /* 스크롤해도 배경은 그대로! */
margin: 0;
height: 100vh;
}
.profile-card {
background: rgba(255, 255, 255, 0.8); /* 투명한 유리 느낌 */
padding: 20px;
border-radius: 15px;
width: 250px;
text-align: center;
margin: 100px auto;
}
.wizard-photo {
width: 150px;
height: 150px;
/* 2. 사진을 동그랗게 자르고 비율 맞추기 */
border-radius: 50%;
object-fit: cover;
border: 5px solid white;
}
</style>
</head>
<body>
<div class="profile-card">
<img src="wizard.jpg" class="wizard-photo" alt="마법사 사진">
<h3>수석 마법사</h3>
<p>이미지 마법 전공</p>
</div>
</body>
</html>3. background-size: cover의 비밀
배경 이미지를 다룰 때 cover라는 단어는 아주 중요해요. 이건 “이미지가 조금 잘리더라도 화면에 빈틈이 생기지 않게 꽉 채워라!”라는 뜻입니다. 덕분에 우리는 어떤 크기의 모니터에서 봐도 꽉 찬 배경을 볼 수 있는 것이죠.
[IMAGE_2]
4. 아이들과 함께하는 ‘액자와 사진’ 놀이
아이와 함께 잡지에서 멋진 풍경 사진을 하나 골라보세요. 그리고 가운데에 구멍이 뚫린 종이 액자(Viewport)를 대보는 거예요. 액자를 움직이면서 “사진이 액자보다 커도 우리가 보고 싶은 부분만 골라 담을 수 있지? 이게 바로 object-fit과 background-position의 원리란다”라고 설명해 주세요. 프레임의 개념을 이해하는 아주 좋은 시각 교육이 됩니다.
마치며: 화려한 마법 학교의 탄생
이미지와 배경 마법 덕분에 이제 우리 웹사이트는 진짜 마법 세계처럼 화려해졌습니다! 이미지는 정보를 전달하는 가장 강력한 도구 중 하나예요. 다음 시간에는 글자만으로도 감성을 전달하는 ‘폰트와 텍스트 마법(Google Fonts)’을 배워보겠습니다. 더 읽기 편하고 예쁜 글씨체를 사용해 볼까요? 다음 시간에 만나요!
