[코드]

[배운내용]

id와 class 활용하기 : 공통된 디자인 미리 설정해놓기

게임 페이지에는 반복되는 디자인이 많은데, 페이지 디자인 시작 전 기본값을 설정해놓는 것과 같이, 반복되는 디자인을 미리 설정해줄 수 있다.
이런 경우 아래와 같이 id와 class를 모두 부여한다. 캐스캐이딩으로 id의 css값이 항상 먼저이므로 이를 활용하여 디자인 적용을 할 수 있다.

<div id="game_section_1" class="game_section">

game_section이라는 class에 공통된 디자인을 설정한다. (배경색, border-radius, padding, margin, flex정렬 등)
그리고 game_section_1이라는 id에 해당 부분에만 적용되는 디자인을 설정한다.

▒TIP▒
실무에서도 많이 사용하는 기법!
캐스캐이딩을 이용한 방법으로 이미 설정해둔 class설정 값을 id를 이용해 바꿔주면 class에서 적용된 내용이 없어지고 id에서 설정한 디자인으로 적용된다.

게임 섹션 기초값 설정

• border-radius, box-shadow 처럼 각 섹션의 반복되는 모양에 대해 설정해주었다.
• 기존에 설정해준 flex값 외에 다르게 설정되는 flex값에 대해 설정
• 반복되는 버튼 등에 대해 설정해주었다.

.game_section{
	position: relative;

	background-color: #fff;
	box_shadow: box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%);
	border-radius: 12px;

	padding: 27px 30px 40px;
	margin-bottom: 40px;
}

.game_section .section_title_wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.game_section .section_title_wrap h2{
	font-size: 19px;
	font-weight: 400;
}

.game_section .section_middle_nav{}

.game_section .section_middle_nav ul{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;

	border-bottom: solid 1px rgba(0, 0, 0, 0.07);
}

.game_section .section_middle_nav li{}

.game_section .section_middle_nav a{
	display: block;
	padding: 14px;
	border-bottom: solid 3px transparent;

	color: #777;
}

.game_section .section_middle_nav a.active{

	border-bottom: solid 3px #7776ff;
	font-weight: 700;
	color: #7776ff;
}

.game_section .section_body_wrap{
	margin-top: 18px;
}

.game_section .section_body_wrap .image_txt_wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.game_section .section_body_wrap .image_txt{
	width: 407.5px;
}

.game_section .section_body_wrap img{
	width: 180px;
	height: 100px;
	border-radius: 8px;
	border: solid 1px rgba(0, 0, 0, 0.06);
	margin-right: 15px;
}

.game_section .section_body_wrap .txt{
	width: 212px;
	
}

.game_section .section_body_wrap .title{
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	margin-bottom:  3px;
}

.game_section .section_body_wrap .source{
	font-size: 13px;
	color: #999;
}

.game_section .btn_circle{
	position: absolute;
	width: 55px;
	height: 55px;
	background-color: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 30px 0 rgb(0, 0, 0 / 6%);
	bottom: -27.5px;

	left: 50%;
	transform: translateX(-50%);
	z-index: ;
}

.game_section .btn_circle.icon_arrow{
	background-color: gray;
}

.game_section .btn_circle.icon_plus{
	background-color: blue;
}

[어려웠던 점]

캐스캐이딩을 이용한 실습이 처음이었는데, 위에 기초 설정값의 라인과 현재 라인을 왔다갔다 하면서 css를 작성하는게 조금 혼란스러웠다.

[해결방법]

이런 이유때문에 사전 계획이 매우 중요한 부분같다. 실습 수업이라 수업대로 진행했지만, 실제로 내가 페이지를 디자인한다면 시작 전 페이지 기획에 따라 상세히 계획하고 실행해야할 것 같다.

[학습소감]

캐스캐이딩을 활용하여 실무에 한걸음 더 나아갈 수 있어서 좋았다. 앞으로 캐스캐이딩 연습을 더 할 수 있으면 좋겠다.