8.13 AI SCHOOL css(32)-네이버 실습

네이버 스포츠 3

#esort-news-view

#esort-news-view li a .img-wrap .rank{
	position: absolute;
	background-color: #4e41db;
	padding: 4px 10px;

	border-bottom-right-radius:10px ;

	top: 0;
	left: 0;

	font-size: 13px;
	color: #ffffff;
	font-weight: 800;

}

border-bottom-right-radius:10px ;
border를 이용해서 내가 원하는 곳에 곡선을 줄 수 있다.

#esort-schedule .schedule-wrap .schedule-body

schedule-body 부분이 까다로움 마우스 올렸을 때에 알맞은 효과를 주기 위해 자체에다가 padding를 주면 안된다.

#esort-schedule .schedule-wrap .schedule-body{
	padding: 17px 0;
}
#esort-schedule .schedule-wrap .schedule-body ul li:first-child:after{
	content: '';
	display: block;
	width: calc(100% -  40px);
	margin: 0 auto;
	height: 1px;
	background-color: rgba(0, 0, 0, 0.05);

	margin: 15px auto;
}
#esort-schedule .schedule-wrap .schedule-body li h3{
	font-size: 14px;
	margin-bottom: 12px;
	text-align: center;
}

#esort-schedule .schedule-wrap .schedule-body li a .status-wrap{
	padding: 7px 0;
}
#esort-schedule .schedule-wrap .schedule-body li a .status-wrap:hover{
	cursor: pointer;
	background-color: yellow;
}
#esort-schedule .schedule-wrap .schedule-body li a .status-wrap .status{
	background-color: rgba(225, 0, 0, .1);
	color: red;
	font-size: 11px;
	font-weight: 500;
	border-radius: 3px;

	margin-right: 4.5px;

	padding: 2px 4px;
}
#esort-schedule .schedule-wrap .schedule-body li a .status-wrap .time{
	position: relative;

	top: 1px;

	font-size: 15px;
	font-weight: 700;

}

가운데 선은 첫li에 after를 넣어서 효과를 준다.
hover효과 - 공간에 대해서 효과를 주자.

#esort-header부문 nav-center수정

#esort-header #esort-nav .nav-center a {
	display: inline-block;
	height: 60px;
	width: 40px;
	line-height: 60px;
	border-bottom: solid 5px transparent;
	font-size: 17px;
	color: grey;

	text-align: center;
}

width 30px을 넣었을때 공간이 어긋났는데 안의 텍스트의 크기보다 총 넓이를 작게 설정해서 일어났거였다. 40px 로 수정하고 text-align center를 주어 텍스트와 중앙에 오는 효과를 주게 만듬 > 폰트의 문제였음.

폰트서체 적용하기

동일하게 전체적으로 적용하고 싶은면 css초기화 부분에 * 에 폰트페밀리에 적용한다.
여러게의 폰트서체를 적용할 수 있다.-브라우저마다 지원하는 폰트가 다르기 때문.
폰트기입한 순서대로 - 우선순위로 적용이 된다.
부분적으로 적용은????

구글웹폰트 사용하기
구글링으로 구글웹폰트- 구글폰트-원하는 폰트 선택
를 html에 넣기 - 반드시 css보다 위에 !!우선순위가 있기 때문.!!!( 중요!!!)
css코드를 위에 설명한 css초기화 부분중 * 선택자에게 넣기

폰트에 따라 크기가 다르기 때문에, 폰트를 먼저 선정후 작업하는 것이 좋음.