▶이동
  • 상구너 닷컴 블로그를 방문하신 여러분을 환영합니다 :)
  • 스팸 정책에 의해 일부 덧글·방명록차단될 수 있습니다.

포트폴리오 제작기

Study 상구너(sanguneo) 2018. 6. 15. 14:28

개발을 시작하고 작업하고 참여했던 프로젝트와 결과물을

한눈에 볼 수 있도록 공유 하기 위해 최근까지 포트폴리오를 제작해왔습니다.


제작된 포트폴리오는 아래 링크를 통해 확인가능합니다.


http://portfolio.sanguneo.com/




1. 제작 계획 수립


필요성을 느끼고 한글파일이나 워드파일로 정리하다가 그 한계를 느꼈습니다. 좀더 자유롭고 직관적이고 싶었기에, 내가 잘 하는것을 이용 해 보자는 생각에 웹 버전으로 제작하게 되었습니다.


2. 제작 방법


우선 작업을 정리하려면 한둘이 아니기 때문에 같은 규격으로 스크린샷을 찍기 시작했습니다. 이전에 작업하면서 업로드한 이미지부터 정리를 위해 찍은 모든 이미지들을 모아, 넘버링 을 하고 이름을 붙인 뒤 트리구조의 디렉토리로 분류했습니다. 




그리고 window 10 bash 를 이용해 find * 명령어를 실행하고 이를 > 로 리스트 저장





이를 대분류와 소분류로 나누어 디렉토리별로 div 로 묶고 a 태그로 감싼 뒤 설명



A테그를 이용한 이미지 링크들을 img src로 변환하고, 링크 추가 및 설명을 추가하는 스크립트를 제작





프로젝트 요약을 추가하고 simpleLightBox 를 적용했습니다. (jQuery 를 이용한 라이브러리입니다.)



CSS로 간단한 스타일을 적용하고 모바일에서도 잘 보이도록 viewport 설정



아파치 설정하고 호스팅




3. 이후 개발방향


현재는 html을 직접 수정해야하지만, 이후에는 규격화된 json을 이용해 템플릿화 할 예정입니다.