T 전화 테마 미리보기 꾸미기
개발 •
![T 전화 테마 미리보기 꾸미기](https://cdn-t.marshallku.com/images/images/2019/09/CSS-Phone.png)
T 전화 테마를 올릴 때 항상 이미지만 죽 나열하곤 했는데, 좀 더 테마 미리 보기 같은 느낌을 낼 순 없을까 싶어 만들어본 데모입니다.
![](https://cdn-t.marshallku.com/images/images/2020/01/WHY-%ED%99%88.jpg)
![](https://cdn-t.marshallku.com/images/images/2020/01/WHY-%ED%99%88.jpg)
![](https://cdn-t.marshallku.com/images/images/2020/01/WHY-%EC%97%B0%EB%9D%BD%EC%B2%98.jpg)
![](https://cdn-t.marshallku.com/images/images/2020/01/WHY-12%EC%9D%B8%EB%B0%A9.jpg)
![](https://cdn-t.marshallku.com/images/images/2020/01/WHY-%EC%B5%9C%EA%B7%BC-%ED%86%B5%ED%99%94.jpg)
![](https://cdn-t.marshallku.com/images/images/2020/01/WHY-%EC%A0%95%EB%B3%B4.jpg)
![](https://cdn-t.marshallku.com/images/images/2020/01/WHY-%EC%A0%84%ED%99%94-%EC%88%98%EC%8B%A0.jpg)
![](https://cdn-t.marshallku.com/images/images/2020/01/WHY-%ED%86%B5%ED%99%94.jpg)
![](https://cdn-t.marshallku.com/images/images/2020/01/WHY-%ED%86%B5%ED%99%94-%EC%A2%85%EB%A3%8C.jpg)
CSS로 휴대폰 목업을 만들고, 제 휴대폰과 동일한 화면 비를 갖도록 한 후에, 안에 이미지를 넣어주면 끝납니다.
![](https://cdn-t.marshallku.com/images/images/2019/09/CSS-Phone-Select-Image.png)
![](https://cdn-t.marshallku.com/images/images/2019/09/CSS-Phone-Image-Selected.png)
화면을 클릭하시면 이미지 목록 레이어가 보이고, 이미지를 클릭하면 레이어가 사라지며 휴대폰 화면이 변경됩니다.
만들긴 했는데, 아무래도 이미지만 나열하는 게 좀 더 직관적이고 편하긴 해서 당장 적용할진 아직 미지수네요.
ⓒ 2019. Marshall K All rights reserved