8.11 AI SCHOOL css(30)-네이버 실습

네이버 스포츠 1

#esort-header #esort-nav{
	/*height: 60px;*/
}
#esort-header #esort-nav a {
	color: #ffffff;
}
#esort-header #esort-nav .nav-wrap{
	height: 60px;
}

안의 자식으로 인해서 부모에게도 그 위의 부모들에게도 연속들에게 영향을 줌
플랙스로 인해 60px의 y축 중앙정렬이 자동으로 된다.

#esort-header #esort-nav .nav-center a {
	display: inline-block; 여기
	height: 60px; 여기

	line-height: 60px; 여기
	border-bottom: solid 5px transparent;
	font-size: 17px;
	color: grey;
}

a태그 영역을 넓히는 또 다른 방법

#esort-header #esort-nav .nav-center a {
	display: inline-block;
	height: 60px;

	line-height: 60px;
	border-bottom: solid 5px transparent;
	font-size: 17px;
	color: grey;
}
#esort-header #esort-nav .nav-center a:hover{
	color: darkgrey;
}
#esort-header #esort-nav .nav-center a.active{
	color: #ffffff;
	border-bottom: solid 5px #ffffff;

	margin-bottom: -1px;
}

a태그 볼더에 색상넣기 밑의 네비 줄을 완벽하게 겹치고 싶을때 사용하는 법
링크 참조
네이버 웹툰실습

#esort-main {
	padding-top: 61px;
}

안넣으면 헤더 뒷쪽으로 가기 때문에 헤더의 높이값만큼 패딩탑을 주어야 한다.
메인의 디폴트값이 20px이로 되어있지만 이걸 61px으로 수정
헤더 뒷쪽에 들어가 있었던 컨텐츠가 페팅 탑을 주어 메인을 내려서 보이게 한다.

헤더가 픽스로 으로 되어 있어서 뒤의 형제가 2차원인지 3차원인지 상관없이 레이어가 겹치게 된다.

#esort-main #esort-main-top .timeline-wrap li a .status-wrap .live:before{
	content: '';
	display: inline-block;
	width: 4px;
	height: 4px;
	background-color: red;
	border-radius: 50%;
	margin: 2px 5px;
}

실습내용에는 없었지만 최대한 동일하게 만들기 위해서 before를 사용하여 라이브 표시 넣음
before는 블락요소만 가능하다.

display: inline-block;
    width: 7px;
    height: 7px;
    margin: 4px 7px 0 0;
    border-radius: 9px;
    vertical-align: top;
    background-color: red;
    content: "";

실제 네이버사이트도 before를 사용 동일한 코드를 붙여가져옴

#esort-main #esort-main-top .timeline-wrap .btn{
	position: absolute;
    width: 45px;
    height: 45px;
    border-radius: 50%;
}
#esort-main #esort-main-top .timeline-wrap .btn.btn-prev {
    top: 60px;
    left: -30px;
    background-color: darkred;
}
#esort-main #esort-main-top .timeline-wrap .btn.btn-next {
	top: 60px;
    right: -30px;
	background-color: darkblue;
}

실습에 없지만 버튼은 만듬

<circle id="ico-flick-prev_svg__b" cx="14" cy="14" r="14"></circle>

실제 네이버의 해당버튼의 html circle이란 새로운 태그- 가 아니라 초기때 배운 태그
링크텍스트

#esort-main #esort-main-top .live-wrap ul li a{
	align-items: flex-start;
} 

플렉스 공부하기

라이브 이미지 확대하는 애니메이션 효과

애니메이션 공부하기