오늘의 포스팅내용은 Randing Page템플릿의 전체적인 큰 구조입니다.
프로젝트 첫 주차의 주제는 Randing Page로써 위의 랜딩페이지로 구성된 포트폴리오 템플릿을 골랐습니다.
제가 위의 템플릿을 고른이유는,
다양한 애니메이션 효과들과 레이아웃이 마음에 들었기때문에 어렵겠지만..?
구조도 파악하고 공부하기에 재미있을 것 같아서였습니다.
바로 본론으로 이어가, 구조는 아래와같습니다.
우선은 크게 documentation 폴더와 html폴더가 보이는데요.
documentation폴더에는 템플릿을 어떻게 사용해야되는지에 대한 문서가 있습니다.
아래와 같이 정말 깔끔하고, 보기쉽게 나와있었습니다.
*참고로 어떤 템플릿을 보면 정말 친절하지 않은 템플릿을 종종 보았는데요. 그와는 다르게 이 템플릿의 문서는
예쁘기도하면서, 정말 친절하다는 느낌을 많이 받았습니다. 'user friendly'하게말이죠.
더불어 보면서 영어 공부하기도 좋을 것 같아요👍
다음으로 집중적으로 봐야 할 html 폴더의 전체적인 구조를 살펴보겠습니다.
먼저 html폴더에 최상위에 위치한 asscets폴더 및 사용자에게 보여줄 메인 페이지인 index.html이 보입니다.
사용자에게 보여줄 메인 페이지인 index.html를 열어보니
그럼 아래와같이... 1452줄이나 있네요. (Vue.js의 index.html에서는 상상도 할 수 없는 줄 수인 것 같아요.)
그리고 제가 다뤄본 폴더를 말하자면
bootstrap , css , font-awesome, img, js 폴더가 있습니다.
그리고 안다뤄본 pcss가있는데, 열어보니 확장자 자체가 .pcss였습니다.
그리고 또 하나, 바로 php입니다.
이것은 간단히 보고 넘어가야겠습니다.
결론, 우선적으로 모르는 .pcss와 .php가있는데 이에대해 공부를 조금 하는 시간을 갖고,
이어서 다른쪽을 봐야겠다는 결론입니다.
최근댓글