Node.js로 싸이월드 만들기 (1일차-계획짜기+html/css로 디자인)

내가 지금까지 혼자 배운 node.js를 이용해서 한 번 곧 다시 부활할 싸이월드를 만들어 볼 것이다.

허접할 것 같지만.. 그래두 해보는 것이 낫지 않을까해서..

this is my 계획

index.html

0.00MB

일단 지금까지 진행상황임

별게 읎다 아직.

1.우선 배경은 

CSS Background Patterns by MagicPattern

CSS Background Patterns by MagicPattern

여기에서 최대한 싸이월드 고유의 회색체크무늬 배경 알아서 설정해서 css코드 복붙했다.

2.폰트는

https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/

여기 들어가서 하나하나 css에 넣어보면서 그나마 나은 걸로 했다.. 원래는 싸이월드 기본 폰트로 할라고 했는데 못찾겠고 예쁜 폰트로 하면 더 있어보여서 그냥 대충 혔다.

3.마이룸 사진이랑 프로필 사진은 그냥 여기저기 돌아다니는거 뒤젹뒤젹해서 아무거나 넣었고

외부 사진을 사용해야 하기 때문에

HTML:: 이미지 태그 사용 방법 <img src=""> : 네이버 블로그 (naver.com)

HTML:: 이미지 태그 사용 방법

여기 참고해서 그냥 내 네이버블로그에 사진 올려놓은 다음에 그 이미지링크 복붙해서 img src에 넣었다.

 

조금 애먹은 부분은 margin이나 div를 어떻게 가로로 설정할 것이냐인데 두 div를 같은 클래스 (grid_item)로 설정하고 float:left 라고 하면 div가 가로로 놓여진다. 그 다음에 그 안에서 margin:XXpx XXpx 이런 식으로 하면 가로 세로의 여백 값을 따로따로 설정할 수 있었다.

 

dimplehh/cyworld (github.com)

dimplehh/cyworld

코드는 요기 있다.

 

<내일의 과제>

1.오늘 도저히 귀찮아서 못만든 메뉴 만들기

2.title 클릭하면 홈으로 돌아가도록

3.title옆에 수정버튼 만들어서 수정 가능하도록

4.github주소 클릭하면 깃허브로 이동하도록

5.메뉴 각각에 기능 구현하기

 

오늘까지는 css/html만 사용했고 내일 되면 node.js 사용해야 할 것 같다....... 잘 할 수 있겠지... 잘 해야지...ㅇㅇ...