8.03 AI SCHOOL css(25)-네이버 실습

네이버 뉴스 4

#ent-main .ent-left #ent-section-4 .btn-more {
	display: block;
	width: 100%;
	height: 40px;
	border: solid 1px #e8e8e8;
	line-height: 40px;

	text-align: center;

	color: #444;
}

버튼 부분

#ent-main .ent-left #ent-section-4 ul li a .ent-info {
	width: 528px;
}

넓이 설정 디테일하게 구조를 잡자
그래야 css가 제대로 잡힌다

#ent-main .ent-left #ent-section-5 ul li a {
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
}

a태그 자체에 전체적으로 영향권을 두기 위해서 작성

a태그안에 a태그는 넣으면 안된다 그렇게 되면 a태그에 대한 영역인식이 제대로 되지 않는다.
이와 같이 글자는 넣는 태그를 연달아서 사용하면 안된다.

#ent-main .ent-left #ent-section-6 ul .source:after {
	content: '';
	display: inline-block;
	width:2px ;
	height: 2px;
	background-color: #d3d3d3;

	vertical-align: top;

	margin: 5px 2px 0 4px;
}

after사용하기

#ent-main .ent-left #ent-section-7 .movie-wrap .right ul li a {
	display: inline-block;
	max-width: 363px; 최대넓이를 한정해서 줄 바꿈 방지
	margin-right: 5px;
	vertical-align: top;

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

	overflow: hidden;    말줄임 공식
	text-overflow: ellipsis;
	white-space: nowrap;
}

#ent-main .ent-left #ent-section-7 .movie-wrap{
	align-items: stretch;
}

flex속성의 디테일을 익히자

<a href="#" class="ent-flex-start">

#ent-main .ent-left #ent-section-8 .news_lists a {
	display: block;
}

css 에 display: block에 적용하면 플렉스가 꺼지기 때문에, display: block를 끈다.

#ent-main .ent-left #ent-section-8 .news_lists a .news-info-txt {
	width: 486px;
}

이걸 설정을 안하며 믿의 선택자가 p가 길어질 경우 자동 줄바꿈이 생기지 않으면서, 레이어가 어긋나게 된다 +) 여기서애서 말 줄임도 설정해 보기

#ent-main .ent-left #ent-section-9 ul li .txt-wrap h4 {
	padding-top: 8px;
    }

마진 바텀이 아닌 페딩 탑을 적용한 이유
블럭요소

#ent-main .ent-left #ent-section-9 ul li .txt-wrap span {
	font-size: 11px;
}

위의 스펜 에 어떠한 디스플레이를 적용을힞 않아 인라인요소의 상태

둘 중 하나라도 마진값을 주면 레이어가 틀어질수가 있음.
마진 바텀을 적용하기 위해서는 div태그로 전체를 감싼 다음에 사용하는 것이 좋음

이미지가 볼더를 벗어나는 이유(이미지에 100%를 적용해야되는 이유)
볼더 박스를 사용해서 공간의 크기는 볼더의 크기도 포함된것

img에 width: 100% 넣기