8.09 AI SCHOOL css(28)-네이버 실습

네이버 게임2 - 2/2

#game-main .left #game-section-2 li a .title
#game-main .left #game-section-2 li a .source

부분에서 선행으로는 a태그에 game-flex-betweenw에 적용하는 방법 이용

결국 맞았음!!

#game-main .left #game-section-2 li a .title{ display:inline-block; }

적용하는 방법도 있음.

#game-main .left #game-section-2 li a .title{
	width: 776px;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.title에 적용되는 h3가 길어질 경우 레이어가 깨지는 것을 방지하기 위해
해당구역에 구체적인 크기를 정하고 말줄임효과를 넣는다.

.game-section .sectiont-body-wrap .title{
	width: 407.5px;
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;

	margin-bottom: 3px;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

강의대로 반복되는 구간을 디폴트값으로 설정하는 데
레이어가 깨짐.
이유는 .title = h3의 텍스트의 수가 많아 상위 img-txt를 벚어났기 때문
h3는 항상 구체적인 크기를 지정해 주자.
추가로 말줄임도 같이 넣으면 좋음

!!!!! 틀림
title 상위 .txt의 css-width값이 안먹혀서 .title=h3의 크기가 잡히지 않았던것. 이유 -> txt 선택자 입력시 띄어쓰기를 잘 못 해서....ㅜㅜ

.game-m-t-20 {
	margin-top: 20px;
}

영역에 클래스 삽입하기

#game-main .left #game-section-3 .img-txt:first-child,
#game-main .left #game-section-3 .img-txt:nth-child(2){
	margin-top: 0;
}

전체에 marign-top 20을 넣고
nth-child로 해결하기
nth-child 참조

갑자기 main right가 left에 속하길래 무슨인일가 했는데 section-5 마지막 부분 수정중 section-body부분div가 제대로 안 닫혀서....ㅜ

이전의 작업한 것을 카피엔 페스트 > 케스케이팅을 이용해서 부분적인 커스텀이 가능하다.