소개

작년에, 전직 활동을 하고 있을 때에 자신의 사이트가 있는지를 들었던 것을 문득 생각해,
Adobe XD, HTML+CSS의 공부도 겸해 만들어 보았습니다.

사용한 언어, 도구, 서비스

Angular

pug + stylus

Netlify

Adobe XD

구현

디자인

평소 일에서는 서버 사이드 밖에 닿지 않기 때문에, 디자이너 씨나 프런트 엔지니어 분들이 Adobe를 사용해 예쁜 화면을 설계하고 있는 것을 보고, 은밀하게 동경하고 있었습니다.

Adobe XD라는 도구를 무료로 사용할 수 있다는 것을 가르쳐 주시고,
모처럼이므로 XD를 사용해 보았습니다.

Adobe XD의 사용법은 기본적으로 udemy의 이하의 코스를 참고로 하고, 나머지는 오로지 구그하고 있었습니다.
htps //w w. 우데 my. 코 m / ぇ b-에 x 페트 /

톱 이미지의 소재는 사진 AC 라는 소재 사이트에서 빌렸습니다.

메뉴 버튼 이미지는 아이콘을 font-awesome에서 적당히 선택하고 문자와 조합한 후 SVG 출력했습니다.

코딩

최근 Angular를 조금 만져서 Angular를 선택.
기본 HTML, CSS를 작성하는 것은 조금 엄격하기 때문에 pug, stylus로 작성했습니다.

처음에는 컴포넌트라든지 생각하지 않고 app.component.pug 에 전부 써 가고 어느 정도 쓸 수 있으면
구성 요소로 나누었습니다.

호스팅

호스팅도 모처럼이므로 최근 이름을 잘 들어 Netlify을 사용해 보았습니다.

새로 등록하고 프로젝트를 만들고 조금 설정하면 쉽게 게시 할 수 있었기 때문에 감동했습니다.

참고로 한 사이트

카드 디자인의 포인트와 구현 방법
[CSS] 반응형 문자 크기를 지정하는 앞으로의 기술
엔지니어이지만 포트폴리오 사이트를 만들려고했습니다.
엔지니어로 포트폴리오를 만들었습니다.
헤더 배경 이미지 사용자 정의 시의 사고 방식
Scroll to element on click in Angular 4