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 적용
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%);
잊지말자 중앙정렬
Author And Source
이 문제에 관하여(8.06 AI SCHOOL css(27)-네이버 실습), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@leeminnjung9813/8.06-AI-SCHOOL-css27-네이버-실습저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)