[웹사이트 개발일지] 퍼즐처럼 맞춰가는 html/css 레이아웃, 깔끔한 샘플은 많다

생활코딩에서 html, css 강의를 들으면서 적용할 만한 요소가 나오면 곧바로 적용하는 방식으로 메인 페이지를 만들었다. 강의는 러닝타임이 길지 않아서 완강하는데 오래 걸리지 않았다. 무언가 확실히 만들면서 들으니까 좀더 재미있게 들을 수 있었다.

구현한 메인 페이지는 이렇다. 메뉴바는 커서를 가져다 대면 해당 블록이 회색으로 활성화 된다. 검색창은 클릭하면 테두리가 하늘색으로 활성화된다.

 

전체적으로 아주 간단해서 싱거워 보이긴 하지만 여기서 레이아웃을 크게 변화시키진 않을 계획이다. 애당초 구글 같은 간결한 UI를 생각하며 만들기도 했고 프로젝트에서 중점을 두고 있는 건 DART에서 기업정보 DB를 무사히 가져오고 그것을 시각화하는 작업이기 때문이다.

 

메인 페이지를 강의 내용만 가지고 구현한 건 아니다. 오히려 구글링으로 찾아낸 소스들을 많이 활용했다. 검색창은 스택오버플로우에서, 메뉴바는 유튜브에서 찾았다. 개발은 구글링으로 원하는 퍼즐 조각을 찾아서 그것을 끼워 맞추는 일이라는 말을 어디서 들었던 거 같다. 실제로 잘 만들어진 샘플이 너무 많았다. 그렇지만 갖다 쓰더라도 이해할 수 있는 코드만을 가져왔다. 때문에 내 입맛에 맞게 응용해서 구현할 수 있었다.

---

웹페이지 만들기 깃허브 링크(포스팅 시점)

프로젝트 결과물 | 느낀점