Node.js로 싸이월드 만들기(2일차-Node.js이용해서 메뉴 클릭에 반응하도록)

사실 원래같으면 오늘 완성시킬 수도 있을텐데 귀찮음이 내 온몸을 지배했기 때문에 다음을 찐막으로 정하고 정말 깔끔하게 끝내겠다...

현재 진행상황..

그래도 원래보다는 조금 그럴듯해진 모습... 근데 사실 별로 한 건 없다.

1.우선 타이틀, home메뉴, 깃헙주소를 눌렀을 때 주소가 이동하는 방식은 굳이 node.js 쓸 필요 없이 a href로 구현이 가능했다.

2.프로필 사진을 바꾼 이유는 내가 원래 내 블로그에다가 올린 사진을 이미지 링크 썼었는데 노드를 쓰면서 갑자기 엑박이 뜨길래 그냥 

놀라운 무료 이미지 - Pixabay

여기서 눈에 띄는거 아무거나 이미지 링크 복붙해서 다시 골라서 만들었다.

3.오늘 가장 애를 먹었던건 오른쪽 menu의 배치인데, 어떻게 하면 div와 div를 겹쳐서 만드는지 몰랐었다. 

해결 방법은 

겹침 당하는 main에 해당하는 div 코드에

          <div id="wrap" style="position:relative"> 처럼 position:relative 를 입력해주고

그 위에 겹쳐줄 자식 div 코드에는

        <div class="grid_item home" style="position:absolute"> 처럼 position:absoulte를 써준다.

이렇게 되면, 지금까지는 무조건 div안의 div는 서로 종속적으로 사용되어 빠져나올 수 없었는데

이제 완전히 독립적인 div처럼 작용이 된다. 따라서 그냥 처음 div설정해주는 것 마냥 margin만 잘 설정해주면 내가 원하는 위치에 menu를 구현할 수 있다.

4.각각 메뉴를 클릭할 때마다 경로 변경은 아래 코드를 참고하길 바란다.

 

dimplehh/cyworld (github.com)

dimplehh/cyworld

지금까지의 코드이다.

이제 마지막 시간에는 <남은 두 메뉴에서 글 입력,수정,삭제 + 타이틀 수정 + 클릭 시마다 메뉴 색깔 바꾸기> 를 마치고 마무리할 것이다.. 빨리 시간 안끌고 끝내야겠다.. 팟팅!