게임목록 (main.html)

help·2022년 12월 30일

Project 1. Catcha

목록 보기

3/7

1. 사전계획

타이틀 텍스트는 앞으로 게임페이지에서도 쓸 것이니
재사용이 가능 하도록 class 만들어 사용하기
반응형 페이지이므로,
메뉴카드는 웹에서는 4개 1줄,
태블릿 모바일에서는 2개 1줄로 보이게 만든다

[ 필요한 값 ]

재사용을 염두에 둔 title style class
반응형 레이아웃

2. 개발과정

(간단히 소개하는 소스이므로 정확한 전체 소스는 github에서 확인해주세요!)

타이틀 스타일 class를 만들어준다

<style>
    /* 타이틀 스타일 */

    .title-box {
        z-index: 1;
        margin-bottom: 0;
    }

    .first-title {
        font-family: 'GangwonEduPowerExtraBoldA';
        font-size: 60px;
    }

    .second-title {
        font-size: 20px;
        font-weight: 400;
        margin-bottom: 15px;
    }
</style>

flex wrap 과 미디어쿼리로 반응형 제작

<style>

    /* style.css */

    .menu-list {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 90%;
        height: 30%;
    }
    .menu-card{
        width: 100%;
        height: 100%;
        min-height: min-content;
        max-height: 260px;
    }
    .menu-card-img {
        border-radius: 10px;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    /* responsive.css */

    @media (max-width: 992px) {
		.menu-list {
			flex-wrap: wrap;
			height: 50%;
		}
		.menu-card {
			width: 40%;
			height: 50%;
		}
	}
    
</style>

글씨 테두리 스타일도 색깔별로 추가

<style>
    /* 타이틀 테두리 글자 효과 */
    .text-stroke-w { /* white */
        font-family: 'GangwonEduPowerExtraBoldA';
        color: transparent;
        -webkit-text-stroke: 1px #fff;
    }

    .text-stroke-dg { /* darkgray */
        font-family: 'GangwonEduPowerExtraBoldA';
        color: transparent;
        -webkit-text-stroke: 1px #2e2e2e;
    }

    .text-stroke-b { /* blue */
        font-family: 'GangwonEduPowerExtraBoldA';
        color: transparent;
        -webkit-text-stroke: 1px #2062cf;
    }

    .text-stroke-p { /* purple */
        font-family: 'GangwonEduPowerExtraBoldA';
        color: transparent;
        -webkit-text-stroke: 1px #5f508f;
    }
</style>