8.06 AI SCHOOL css(27)-네이버 실습

게임 2 -1/2

#game-main .left .left-banner {
	width: 900px;
	height: 120px;

	border-radius: 12px;
	box-shadow: 0 2px 30px 0 rgb(0, 0, 0/6%); 
	overflow: hidden;
}
#game-main .left .left-banner a {
	display: block;
	width: 100%;
	height: 100%;
}
#game-main .left .left-banner img{
	width: 100%;
	height: 100%;
}

img를 넣을때 상위 공간작업 순서 주의하기
img의 부모태그는 a이기 때문에 a태그에 대한 사이즈도 확실하게 정해야된다.

어떤걸 디폴트 값으로 할지 생각하고 생성을 하면 만들기 쉬워진다.

.game-section .sectiont-middel-nav ul{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;

	border-bottom: solid 1px rgba(0, 0, 0, .07);

}
.game-section .sectiont-middel-nav li{
	}
.game-section .sectiont-middel-nav a{
	display: block;
	padding: 14px ;
	border-bottom: solid 3px transparent;
	margin-bottom: -1px;
}
.game-section .sectiont-middel-nav a.active{
	border-bottom: solid 3px #7776ff;
	font-weight: 700;
	color: #7776ff;
}

border에 활성화된 영역에 색상을 부여하는 방법은
위의 방법이 가장 마음에 든다.
ul에 라인을 맞출 투명을 넣고
a에 적용할 border-bottom를 넣고 margin-bottom: -1px 적용

7.26-웹툰작업

box-shadow: 0 2px 30px rgb(0, 0, 0/6%);
box-shadow: 0 2px 30px rgb(0 0 0/6%);

box-shadow넣을때rgb , 주의 하기!!

position: absolute;
	
	left: 50%;
	transform: translateX(-50%);

잊지말자 중앙정렬