2회차 과제 - 박지원

[cryingdryice]

신경써서 구현한 부분

• 다양한 화면 크기에서도 디자인 무너지지 않도록 반응형 웹으로 구성했습니다.

• 가로너비가 1100px 이하인 경우엔 소개 패널과 로그인 패널을 세로로 배치하였습니다.

@media (max-width: 1100px) {
	body {
		flex-direction: column;
		height: 100%;
		margin: 50px;
	}

	.container {
		width: 100%;
		height: 100%;
	}

	.logo-img {
		width: 400px;
	}

	.logo-title {
		font-size: 50px;
	}

	#login-form > h1 {
		font-size: 70px;
	}

	.track-cards {
		gap: 20px;
	}

	.track-card {
		width: 300px;
	}
}

• 가로너비가 836px 이하인 경우엔 모바일 환경을 고려하여 조정하였습니다.

@media (max-width: 836px) {
	body {
		margin: 10px;
		margin-bottom: 100px;
	}

	.logo-section {
		flex-direction: column;
	}

	.logo-img {
		width: 80%;
	}

	.logo-title {
		font-size: 70px;
	}
}

질문