---
title: "순수 HTML 5 + CSS 3로 iPhone 6 휴대폰 모델 그리기 - 근심을 잊는 한 장"
description: "Bilibili에서 순수 HTML5 작품 하나를 봤는데, 순수한 코드만으로 iPhone 렌더링 이미지를 그려 낸 작품이었습니다. 꽤 재미있다고 생각해서 여러분도 참고하시라고 올려 봅니다. 먼저 결과 이미지부터 보시죠:"
canonical_url: "https://www.ikxin.com/ko/article/html-css-iphone6-model"
last_updated: "2026-09-16T09:59:27.259Z"
locale: ko
meta:
"og:description": "Bilibili에서 순수 HTML5 작품 하나를 봤는데, 순수한 코드만으로 iPhone 렌더링 이미지를 그려 낸 작품이었습니다. 꽤 재미있다고 생각해서 여러분도 참고하시라고 올려 봅니다. 먼저 결과 이미지부터 보시죠:"
"og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~7Iic7IiYIEhUTUwgNSArIENTUyAz66GcIGlQaG9uZSA2IO2ctOuMgO2PsCDrqqjrjbgg6re466as6riwIC0g6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2Cc_Article%2Ctitle_~7Iic7IiYIEhUTUwgNSArIENTUyAz66GcIGlQaG9uZSA2IO2ctOuMgO2PsCDrqqjrjbgg6re466as6riw%2Cdescription_~QmlsaWJpbGnsl5DshJwg7Iic7IiYIEhUTUw1IOyeke2SiCDtlZjrgpjrpbwg67Sk64qU642wLCDsiJzsiJjtlZwg7L2U65Oc66eM7Jy866GcIGlQaG9uZSDroIzrjZTrp4Eg7J2066-47KeA66W8IOq3uOugpCDrgrgg7J6R7ZKI7J207JeI7Iq164uI64ukLiDqvaQg7J6s66-47J6I64uk6rOgIOyDneqwge2VtOyEnCDsl6zrn6zrtoTrj4Qg7LC46rOg7ZWY7Iuc65286rOgIOyYrOugpCDrtIXri4jri6QuIOuovOyggCDqsrDqs7wg7J2066-47KeA67aA7YSwIOuztOyLnOyjoDo%2CsiteName_~6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2CsiteHost_www.ikxin.com%2Cp_Ii9rby9hcnRpY2xlL2h0bWwtY3NzLWlwaG9uZTYtbW9kZWwi%2Cs_BiyMC-H29zcyv2tq.png"
"og:image:alt": "순수 HTML 5 + CSS 3로 iPhone 6 휴대폰 모델 그리기 - 근심을 잊는 한 장"
"og:image:height": "630"
"og:image:type": image/png
"og:image:width": "1200"
"og:title": "순수 HTML 5 + CSS 3로 iPhone 6 휴대폰 모델 그리기"
"twitter:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~7Iic7IiYIEhUTUwgNSArIENTUyAz66GcIGlQaG9uZSA2IO2ctOuMgO2PsCDrqqjrjbgg6re466as6riwIC0g6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2Cc_Article%2Ctitle_~7Iic7IiYIEhUTUwgNSArIENTUyAz66GcIGlQaG9uZSA2IO2ctOuMgO2PsCDrqqjrjbgg6re466as6riw%2Cdescription_~QmlsaWJpbGnsl5DshJwg7Iic7IiYIEhUTUw1IOyeke2SiCDtlZjrgpjrpbwg67Sk64qU642wLCDsiJzsiJjtlZwg7L2U65Oc66eM7Jy866GcIGlQaG9uZSDroIzrjZTrp4Eg7J2066-47KeA66W8IOq3uOugpCDrgrgg7J6R7ZKI7J207JeI7Iq164uI64ukLiDqvaQg7J6s66-47J6I64uk6rOgIOyDneqwge2VtOyEnCDsl6zrn6zrtoTrj4Qg7LC46rOg7ZWY7Iuc65286rOgIOyYrOugpCDrtIXri4jri6QuIOuovOyggCDqsrDqs7wg7J2066-47KeA67aA7YSwIOuztOyLnOyjoDo%2CsiteName_~6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2CsiteHost_www.ikxin.com%2Cp_Ii9rby9hcnRpY2xlL2h0bWwtY3NzLWlwaG9uZTYtbW9kZWwi%2Cs_BiyMC-H29zcyv2tq.png"
"twitter:image:alt": "순수 HTML 5 + CSS 3로 iPhone 6 휴대폰 모델 그리기 - 근심을 잊는 한 장"
---
> Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt)
# **순수 HTML 5 + CSS 3로 iPhone 6 휴대폰 모델 그리기**
2017.07.11 4,331 0
Bilibili에서 순수 HTML5 작품 하나를 봤는데, 순수한 코드만으로 iPhone 렌더링 이미지를 그려 낸 작품이었습니다. 꽤 재미있다고 생각해서 여러분도 참고하시라고 올려 봅니다. 먼저 결과 이미지부터 보시죠:
거의 60줄에 가까운 코드로, 60줄도 되지 않으며 순수하게 코드로 작성되었습니다. 배터리 아이콘과 신호 아이콘을 포함해 이미지 리소스는 한 장도 사용하지 않았습니다. 원래 상단 상태 표시줄 가운데에는 작은 자물쇠 아이콘이 있었지만, 너무 번거로워서 하트 기호로 대신했습니다. 저도 HTML을 배운 지 얼마 되지 않아 문법이 다소 번거로운 부분이 많습니다. 조금 간결하게 다듬는다면 아마 10% 정도 줄일 수 있을 것 같습니다. 아래에 코드를 공개합니다:
HTML
```
iPhone 6 演示 | 夜色静好
4G
49%♥
15:29 6 月 4 日 星期日 丁酉年五月初十
```
## **댓글**
(0)
아직 댓글이 없습니다
## **댓글 작성**
```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/ko#website","@type":"WebSite","description":"근심을 잊는 한 장은 기술 탐구와 일상을 다루는 개인 웹사이트입니다. 웹 개발, 백엔드 및 DevOps 실무를 기록하고 소프트웨어 도구와 디지털 경험, 코드 밖의 견문과 생각을 나눕니다.","inLanguage":"ko-KR","name":"근심을 잊는 한 장","url":"https://www.ikxin.com/ko","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/ko/article/html-css-iphone6-model#webpage","@type":"WebPage","description":"Bilibili에서 순수 HTML5 작품 하나를 봤는데, 순수한 코드만으로 iPhone 렌더링 이미지를 그려 낸 작품이었습니다. 꽤 재미있다고 생각해서 여러분도 참고하시라고 올려 봅니다. 먼저 결과 이미지부터 보시죠:","name":"순수 HTML 5 + CSS 3로 iPhone 6 휴대폰 모델 그리기","url":"https://www.ikxin.com/ko/article/html-css-iphone6-model","isPartOf":{"@id":"https://www.ikxin.com/ko#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ko/article/html-css-iphone6-model"]}]}]}
```
## Sitemap
See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.