스파르타 웹개발 종합반 프로젝트 만들기 - 스타일 수정 및 배포 작업

항목 선택 컨테이너의 스타일과 버튼의 스타일 및 폰트를 변경했다.

Dessert버튼

.sub_btn {
    margin: 10px;
    padding: 15px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    font-family: 'Montserrat', sans-serif;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 51%, #ffecd2 100%);
    border : none;
    outline: none;
    font-size: 30px;
}

.sub_btn:hover {
   background-position: right center;

}

맨위의 타이틀 멘트는 렌더링이 되고 난 뒤에 fadeIn 효과로 서서히 나타나게 했다.

.title {
    font-size: 60px;
    animation: fadeIn 2s;
    font-family: 'Black Han Sans', sans-serif;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }

}

최종 화면

기능 동작까지 모두 테스트 했으므로 배포를 하기 위해서 aws에서 인스턴스를 하나 새로 시작했다.

gitbash에서 진행하는 기초 준비 작업은 여기를 참고했다.

사전 작업 후에 filezilla를 사용하여 제작한 프로젝트 폴더를 옮겼다.

인스턴스 보안 설정에서 인바운드 규칙을 수정해서 5000번 포트와 80번 포트를 추가했다.

그다음 새로산 도메인을 사용해서 사이트 이름을 변경하고 og:title,description,image를 설정했다.

  <meta property="og:title" content="DesSert" />
    <meta property="og:description" content="디저트 못 고르는 당신에게 추천!" />
    <meta property="og:image" content="https://images.pexels.com/photos/890577/pexels-photo-890577.jpeg?auto=compress&cs=tinysrgb" />

최종 화면