[웹개발 - DIOS] 홈 페이지

⌦  홈 페이지

 

---

☑︎ 홈 페이지

홈 페이지는 길어지더라도 모든 팀원들이 만든 기능이 보여졌으면 좋겠다는 생각을 했다. 그래서 모든 기능을 다 넣었다.

 

• 메인 문구

들어가자마자 보이는 열심히 운동하는 사진들에 마우스를 올려보면 문구가 뜬다.

 

 

• 사용설명서, 기록장 바로가기, 쇼핑몰 바로가기

다음은 사용설명서와 기록장, 쇼핑몰 바로가기 버튼이 뜬다.

 

이 웹 서비스를 처음 이용하는 사용자는 사용법을 모를 수 있을 것 같아 설명서를 만들었다.

 

 

• 회원가입 바로가기

회원가입 버튼에 마우스를 올리면 광택이 나는 효과를 주고싶어서 찾아보고 넣었다.

 

- HTML

<a class="registerButton" id="hover"
   th:href="@{/dios/register}">
    <span>회원가입 하기 &nbsp;&nbsp;<i class="fa-solid fa-arrow-right"></i></span>
</a>

- CSS

#hover {
    border: 0.1rem solid rgb(0, 0, 0);
    overflow: hidden;
    position: relative;
}

#hover > span {
    z-index: 2;
    font-family: none;
}

#hover:after {
    content: "";
    height: 50rem;
    left: -1000px;
    opacity: .2;
    position: absolute;
    top: -300px;
    background: rgb(255, 255, 255);
    filter: brightness(80%);
    -webkit-transform: rotate(70deg);
    transform: rotate(35deg);
    -webkit-transition: all .99s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all .99s cubic-bezier(0.19, 1, 0.22, 1);
    width: 50rem;
    /*z-index: -1;*/
}

#hover:hover:after {
    left: 120%;
}

 

 

• 쇼핑몰 상품 랜덤으로 광고

새로고침을 할 때마다 왼쪽에 뜨는 쇼핑몰 상품의 종류가 랜덤으로 바뀌게 된다.

 

광고를 누르면 그 상품의 상세페이지로 넘어가게 했다.

 

자세한 내용은 '랜덤으로 상품 추천하기' 에서 다뤘다.

2023.02.26 - [웹개발] - [웹개발 - DIOS] 랜덤으로 상품 추천하기

[웹개발 - DIOS] 랜덤으로 상품 추천하기