8.12 AI SCHOOL css(31)-네이버 실습

네이버 스포츠2

실제는 그리드를 사용해야되지만 초입자에게는 레벨이 있어, folt를 사용하기로 함

esort-main-article

#esort-main-article {
	overflow: hidden;
	width: 100%;
	height: 468px;
	background-color: grey;
	border-radius: 10px;
}
#esort-main-article .article {
	float: left;
	width: 50%;
	height: 50%;
}
#esort-main-article .article.full{
	height: 100%;
	background-color: green;
}
#esort-main-article .article.two{
	background-color: blue;
}
#esort-main-article .article.three{
	background-color: pink;
}

float의 속성으로 해결한다.

#esort-main-article .article {
	float: left;
	width: 50%;
	height: 50%;
}
#esort-main-article .article.full{
	height: 100%;
}

위의 코드에서 불필요한걸 날린 상태

실제 네이버의 경우에는 ul.li를 가지고 하단의 영역까지 li으로 한번에 작성
nth-child 가상선택하여 부분적으로 커스텀을 한 것을 확인 할 수 있었다.

#esort-header {
	position: fixed;
	width: 100%;
	background-color: #151618;
	border-bottom: solid 1px grey;

	left: 0;
	top: 0;

	z-index: 999;
}

fixed된 헤더가 겹치지않고 최상위 위치에 두기 위해서 z-index 사용

id="esort-news-wrap

실습에서는 생략했지만 많이 실습한 부분이라 자력으로 해봄
구조는 생각보다 쉽게 짰지만 css속성을 디테일하게 넣는것이 힘들었다.

#esort-news-wrap ul {
	overflow: hidden;
	
}
#esort-news-wrap ul li{
	margin-top: 20px;
	margin-right: 3px;
	width: 23%;
}
#esort-news-wrap li a{}
#esort-news-wrap li a img {
	width: 100%;
	height: 100%;

	border-radius: 8px;
}
#esort-news-wrap li a .news-txt{
	width: 200px;

	margin-top: 5px;

}
#esort-news-wrap li a .news-txt h3{
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
	width: 200px;
	max-height: 40px;

	overflow: hidden;
	text-overflow: ellipsis;
}
#esort-news-wrap li a .news-txt .source{
	display: block;
	font-size: 13px;
	line-height: 16px;
	color: #777;

	margin-top: 5px;
}

h3 부분에서 white-space: nowrap;를 제거하면 한줄이 아닌 칸 안에 줄바꿈이 된다.

svg????

#espor-article

#espor-article .article-wrap .right-list li {
	position: relative;
	margin-bottom: 5px;

} 
#espor-article .article-wrap .right-list li:before{
	position: absolute;
	display: inline-block;
	content: '';
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: grey;

	top: 7px;

}
#espor-article .article-wrap .right-list a {
	display: block;
	font-size: 16px;
	padding-left: 10px;
}

bedfore를 넣을때 position 주의하기
a태그에 padding-left를 넣어서 간격을 주어 겹치지 않도록

li 작석시의 순서
코드 작성시의 속성의 순서를 나만의 정리해서 확립하기!!

실습에서 스킵한 부분 작성해보기
지금 시간이 부족해서 ㅜ
9월 2째주 에 시도예정

#esort-expert

#esort-expert .news-lists li .txt-wrap p{
	font-size: 14px;
	color: #777777;
	line-height: 19px;

	margin-top: 4px;
    
    display: -webkit-box; 이게 있어야 말줄임 표시
	overflow: hidden;
	max-height: 38px;
	/*text-overflow: ellipsis;*/
	-webkit-line-clamp: 2; 어디에서 말 줄임표시설정
	-webkit-box-orient: vertical;
    word-break: break-all; 생략
	word-wrap: break-word; 생챡
	text-overflow: ellipsis;
}

전날의 체크하던 부분이랑 중복이 되는 곳
overflow: hidden;
max-height: 38px; 이 2가지가 핵심

2줄 말줄임 표시 코드 줄을 더 늘리고 싶으면
max-height: 38px;
-webkit-line-clamp: 2; 부분을 수정하면됨

마지막 달락도 실습에서 생략
위와 동일한 시간대에 실제 작성해 본다.