7.30 AI SCHOOL css(23)-네이버 실습

이민정·2021년 7월 30일

대구 AI SCHOOL

목록 보기

25/47

✔ TODAY

오늘도 어제에 이어서 네이버 뉴스2를 시작한다! 뉴스메인의 오른쪽과 왼쪽등 메인을 완성하는 것이 목표!!

✔ 학습한 내용

네이버뉴스2

news-main .left

<li><a href="#">title1 title1 title1 title1 title1 title1 title1 title1 title1 title1 title1 title1</a><span>국민일보</span></li>

#news-main .news-left .news-main-wrap .news-main-body .news_lists li a {
	display: inline-block;
	max-width: 360px; 
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis ;  말줄임 속성들 한 개라도 빼먹으면 제대로 출력이 안된다.

	vertical-align: middle;
}

▶ max-width

쓰지 않으면 글자수 만큼 그대로 표출되서 레이어가 일그러짐, 최대값 한정

▶ overflow: hidden / white-space: nowrap / text-overflow: ellipsis

말 줄임 속성들 한 개라도 빼먹으면 제대로 출력이 안된다.

공통된 구조와 디자인을 만든다음
추가 빼서 커스텀 디자인을 만든다 . 이때 빼고 추가해도 레이어가 어긋나지 않도록 제작하는 것이 중요.!!!

헤드라인 뉴스의 커스텀 부분

동일한 디자인 중 특정 부분만 커스텀을 해서 특색을 준다.

#news-main .news-left .news-main-wrap .news-main-header.news-custome ul li a {
	cursor: default;
}

▶ 기존 디자인은 손가락모양으로 바뀌면서 활성화.

위의 css 코드를 삽입하여, 커서 디폴트한다. 그럼 활성화모양은 없어진다.(즉 손가락모양으로 바뀌지 않음)

📚학습하기
그러나 태그 자체가 a이기 때문에 문서이동은 함.! 추후 자바스트립에서 제거가 가능함.

#news-main .news-left .news-main-wrap .news-main-body .news_lists li a {
	display: inline-block;
	max-width: 360px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis ;

	vertical-align: middle;
}

의 기존 css를

#news-main .news-left .news-main-wrap.news-custome .news-main-body .news_lists li a {
	width: 360px;
	max-width: initial;
	vertical-align: middle;
}

로 커스텀.

max-width를 초기화 width값으로 전환해서 아이콘이 맨 오른쪽으로 오도록 만든다.

📚학습하기
max-width와 width의 정의를 확실하게 파악하고, 어느 부분에서 활용해서 적용할 지를 생각해 본다.

news-main .news-right

<ul class="news-notice-lists">
	<li>
		<h4>공지</h4>
		<p>뉴스홈 헤드라인 비로그인 추천 변경</p>
	</li>

▶ li 안에 h4와 p의 가로 정렬을 하기 위해서

각가의 태그에 display: inline-block를 적용한다.

📚✨복습하기
x축 정렬하기-가로로 정렬하기
1) flex 사용
2) display : inline-block;
3) flot

display : inline-block사용시 주의할 점!!

가로중앙정렬
가로중앙정렬2
새로정렬

#news-main .news-right #news-popular .news-popular-lists li .news-popular-info span {
	position: relative;
	font-size: 12px;
	color: #888888;

	vertical-align: middle;

	top: 2px;
}

텍스트 자체에 밑에 공간이 있다. 거슬리고 수정하고 싶으면 포지션을 사용하여 위치를 조정할 수 있다.

news-today

부분 어려워 보이나 다 알고 있는 속성과 구조로 작성할 수 있음.
두려움이 없어 질때 까지 수시로 짜보기

💥💥주의💥💥💀
CSS 에서 안 쓰는 선택자라도 무조건 {}로 넣고 보기!!!
바로 다음 선택자에게 속성값이 안 넣어짐!!!! 이걸로 1시간 ........!!!!!!!!!

✔ 학습한 내용 중 어려웠던 점 또는 해결못한 것들

가로축으로 정렬하기/ 세로축으로 정렬하기 / 중앙으로 정렬하기 등 정렬에 대한 여려가지 방법에 대해 아직 확실히 머리 속에 밖혀 있지 않는 것 같다.

display : inline-block;

완성본만 보고 미리 기죽어버리는 감이 있다.(하지막 막상해 보면 다 알고 있는 것들이다.)
-오늘도 css 오타로 시간을 많이 허비하였다...