HTML + CSS로 만든 스마트폰 이미지

원래는 알리익스프레스 메인 화면의 제품 리스트 스타일을 구현하려고 시도했는데 만들다보니 점점 스마트폰처럼 되어버려서 이대로 하나 저장해두고 나중에 필요해지면 써먹어야겠다고 생각해서 급하게 백업용 문서로 남기는 중입니다. 혹시라도 필요하신분이 계신다면 마음껏 퍼가시기 바랍니다. 잠깐! 여기에서 퍼가라는 의미는 Share의 개념입니다. 지금 이 글(콘텐츠)을 그냥 긁어 가져가 자신의 블로그에 옮기라는 뜻이 아닙니다! 스마트폰 모양의 레이아웃이 필요하신 분들은 HTML과 CSS 코드를 공유해 가져가도 좋다는 뜻입니다.

 

일러스트레이터로 만든 이미지가 아닙니다. 순수하게 웹퍼블리싱만으로 구현한 스마트폰 형태의 레이아웃입니다. HTML과 CSS만으로도 이런 간단한 형태의 이미지는 쉽게 구현 가능합니다. 이런걸 만들때마다 참 신기하면서도 뿌듯하군요. 이 기쁨을 여러분들에게도 공유하겠습니다.

 

미리보기

See the Pen Untitled by rgy0409 (@rgy0409) on CodePen.

 

스마트폰 형태의 리스트 화면입니다. 태그 구성은 매우 심플합니다. more 클래스명을 사용하는 p태그 안쪽에는 원하는 텍스트를 넣어서 버튼에 글씨도 넣을 수 있습니다. 단 글씨를 넣으면 more에 적용된 CSS의 padding 값을 조절하셔야 합니다. 추천 패딩값은 5px 15px 입니다.

 

원리 이해

리스트 형태로 만들 생각이었기에 a태그가 가장 최상위 부모 요소입니다. wrap이라는 id명을 가지고 있지요. wrap의 바로 1대 자식요소인 list 클래스명을 가진 div가 핵심 주인공입니다. 스마트폰 형태의 전체를 담당하고 있습니다. 보시면 width, height 값이 정의되어 있습니다. 하부에는 두 개의 div 자식 요소가 있고 클래스명 in의 div는 스마트폰 화면 부분을, out은 나머지 부분을 담당합니다. in과 out 클래스명인 div는 가로와 세로가 정확하게 마크업되어있지 않습니다. 이유는 div.list의 가로/세로 크기를 조절해서 사용자가 원하는 크기의 스마트폰을 편리하게 구현할 수 있기 때문입니다.

 

특히 in의 경우에는 div.list 보다 크기가 작아야 합니다. 또한 div.list의 가로/세로 크기가 바뀔때마다 실시간으로 변해야 합니다. 그래서 calc 방식으로 적용한 것입니다. div.out의 경우에는 div.list 부모요소와 크기가 1:1로 완전 똑같기에 가로/세로의 값이 100%로 적용된 상태입니다. 이해가 되시려는지 모르겠습니다. 혹시 추가 설명이 필요하거나 궁금한 점은 댓글로 문의 남겨주시기 바랍니다. 끝.