CSS를 활용하면 이미지 파일 없이도 스마트폰, 태블릿, 노트북과 같은 실제 기기의 외형을 화면에 그대로 재현할 수 있습니다. 핵심은 border(테두리) 속성인데, 두꺼운 테두리를 기기의 베젤처럼 활용하고 border-radius로 둥근 모서리를 표현하는 방식입니다.
기기 모양 구현 원리
아래 예제에서 사용된 주요 CSS 속성은 다음과 같습니다.
- border: 16px solid — 좌우 얇은 베젤을 표현합니다.
- border-top-width: 60px; border-bottom-width: 60px; — 상하 테두리를 두껍게 하여 스마트폰 상단과 하단의 굵은 베젤을 만듭니다.
- border-radius: 36px; — 기기 특유의 둥근 모서리를 나타냅니다.
- :after 가상 요소 — 하단 베젤 중앙에 동그란 홈 버튼을 추가해 완성도를 높입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mobileDevice {
position: relative;
width: 360px;
height: 400px;
margin: auto;
border: 16px rgb(7, 80, 35) solid;
border-top-width: 60px;
border-bottom-width: 60px;
border-radius: 36px;
}
.mobileDevice:after {
content: '';
display: block;
width: 35px;
height: 35px;
position: absolute;
left: 50%;
bottom: -65px;
transform: translate(-50%, -50%);
background: #333;
border-radius: 50%;
border: 2px solid rgb(200, 255, 0);
}
.mobileDevice .screen {
width: 360px;
height: 400px;
background: white;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Device look example </h1>
<div class="mobileDevice">
<div class="screen">
<iframe src="https://wikipedia.org/" style="width:100%;border:none;height:100%" />
</div>
</div>
</body>
</html>코드 설명
.mobileDevice 클래스가 기기 본체 역할을 하며, 내부의 .screen 영역에는 <iframe>을 넣어 실제 웹페이지가 화면에 출력되도록 했습니다. 이렇게 하면 마치 스마트폰으로 웹사이트를 보고 있는 것 같은 효과를 낼 수 있습니다.
홈 버튼은 .mobileDevice:after 가상 요소로 구현했습니다. position: absolute와 transform: translate(-50%, -50%)를 조합해 버튼을 하단 베젤의 정중앙에 배치하고, border-radius: 50%로 원형 모양을 만들었습니다.
실행 결과
위 코드를 실행하면 다음과 같이 스마트폰 형태의 프레임 안에 웹페이지가 표시됩니다.
응용 팁
같은 원리로 태블릿이나 노트북 모양도 쉽게 만들 수 있습니다. 태블릿은 전체 크기를 키우고 베젤 두께를 조절하면 되고, 노트북은 화면 부분에 얇은 테두리를 적용한 뒤 하단에 넓은 직사각형 바닥(base)을 추가하면 됩니다. 여기에 그림자(box-shadow)를 더하면 더욱 입체적인 기기 연출이 가능합니다.