08.12 네이버 e스포츠

네이버 e스포츠 웹페이지 실습

• 기사 사진 세개가 있는 부분에는 일단 article이라는 div로 기본 구조를 짰다. 그 다음 css로 왼쪽 article에 full이라는 class를 덧붙여서 full이 붙어있으면 너비 50% /높이 100%가 되도록 지정하였고, 붙지 않으면 너비 50% / 높이 50%가 되도록 설정하였다.

#esport_main_article .article {
	position: relative;
	float: left;
	width: 50%;
	height: 50%;
} 
#esport_main_article .article.full {
	height: 100%;
}

• 경기 다시보기 부분은 ul과 li를 사용하여 구조를 짠 뒤 flex-start를 사용하여 x축으로 나열하였다. 원싸이트에 첫번째 경기 부분에는 다른 색깔로 강조하였기 때문에 보라색을 넣어주었다.