1. 쇼핑몰 페이지

이번 챕터에서는 PyScript를 이용한 미니프로젝트를 진행합니다.

• 첫 번째 프로젝트는 JavaScript의 핵심과도 같은 DOM 조작을 PyScript를 이용해서 사용하는 것입니다.
• 이번 프로젝트에서는 PyScript의 DOM 문법을 최대한 이용해서 간단한 과일 쇼핑몰 페이지를 만들어 보겠습니다.
• 데이터는 임의로 구성하였으며, 사진 자료는 무료 이미지 사이트를 이용하였습니다.
• 해당 페이지는 부트스트랩 템플릿을 이용해서 구성하였습니다. 사용한 부트스트랩은 다음과 같습니다.

<aside> 💡 사용한 부트스트랩 템플릿(Shop Homepage) https://startbootstrap.com/template/shop-homepage

</aside>

<aside> 💡 해당 프로젝트의 Repository https://github.com/Pyscript-PJT/pyscript_miniproject1

</aside>

1.1 페이지 레이아웃 구성하기

1.1.1 목표 페이지

1.1.2 페이지 나누기

목표 페이지를 아래의 이미지와 같이 콘텐츠들을 넣을 하나의 큰 컨테이너(빨간 상자)로 나누었습니다.