단점은 시간이 빨리 가는 대신에 3배는 늙습니다!
위 사진은 제가 최근 만들고있는 웹의 메인페이지입니다!
친구가 마블을 좋아해서 그걸 위주로 만들고 있어요!
메인화면엔 이렇게 GIF파일을 넣어 생동감을 더해주었습니다.
그리고 위에 있는 메뉴들을 살펴보자면
이런 식으로 메뉴들이 내려오는 것을 볼 수 있습니다!
css , js 기반으로 이루어진 코드로 만든 시스템입니다!
코드는 역시 w3shcools나 codepen으로 가시면 잘 알 수 있습니다!
헤더 아이콘은 지금
|
<header> <div class="header_img"> <img src=""> </img> </div> </header> |
이런 식으로 그냥 이미지만 넣어둔 상태인데, 조만간
|
<header> <div class="header_img"> <a href="#"><img src=""></a> </img> </div> </header> |
형식으로 링크를 달아 클릭시 메인으로 이동이 되게끔 하려고 합니다.
나머지 메뉴들도 마찬가지로 메뉴 내용을 채우고 링크를 달아줘야겠죠?
그리고 로그인 버튼은 미리 링크를 달아둔 상태입니다!
마우스를 갖다 대면 살짝 커져서 마우스를 갖다대고 있다 라는 느낌을 주었습니다.
여기서 주의할 점은 A태그는 미관상 기본 링크 색깔과 모양을 바꿔줘야 하는데요.
그렇게 하기 위해선
| <html> <head> </head> <body> <a href"#">링크 버튼</a> </body> </html> |
| a { color: #000000; text-decoration: none; } a:hover { color: #000000; text-decoration: none; } |
이런식으로 바꿔주니 색깔도 원하는 색에 밑줄도 쳐지지 않더라구요!
참고 하시면 될 것 같습니다!
그리고 로그인 옆의 검색창은 클릭시
이런식으로 점점 넓어지게 만들고 뒤에 백그라운드 불빛도 넣어주면서 마블 컬러에 맞게 세팅하였습니다.
일단 메인 화면은 여기까지만 만들었구요! 앞으로 나아가야할 길이 머네요 ㅠㅠㅠ
다들 이번주도 힘내보아요!