✔ TODAY

오늘부터는 네이버 뉴스의 카피켓을 목표로 학습을 한다.

---

✔ 학습한 내용

네이버 뉴스 1

new-header

#news-header .sub-nav ul li a {
	display: block; 공간만들기
	width: 100% ;
	height: 100%;  모든영역을 a태그의 영역으로 
	font-weight: bold;

	line-height: 46px;  y축 정렬 }

<input type="text" placeholder="뉴스검색">

▶ placeholder - 인풋테그영역에 어떠한 정보를 기입해야 되는지 사용자에게 알려줄때 사용

▶ box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성

• box-sizing 속성을 border-box로 지정하면 테두리를 포함한 크기를 지정할 수 있다
• box-sizing:border-box는 익스플로우 하위버전에 지원이 되지 않기 때문에 네이버의 경우네는 볼더도 값에 포함함.

💥주의💥사용하지 않는 선택자는 반드시 지우기
있고 없고에 따라 우선순위가 달라져서 출력값이 다르게 나온다.!!!

news-headline

#news-headline .news-headline-lists li article .img-wrap {
	width: 100%;
	height: 132px;   
	/*해당 리스트의 높이 178 - 볼더 값2 - h3값 44*/
}

💥주위💥
아티클에서 이미지공간을 넣을때 높이값 주의하기
article,section,div

#news-headline .news-headline-lists li article .img-wrap {
	position: relative;
	width: 100%;
	height: 132px;   
	/*해당 리스트의 높이 178 - 볼더 값2 - h3값 44*/
	background-color: pink;
}
#news-headline .news-headline-lists li article .img-wrap img {
	position: absolute;
	width: 100%;
	height: 100%;
}

▶이정도만 하면 글자가 보이지 않는다.

• 그 이유는 레이어가 겹쳐서 글자가 뒤에 갔기 때문.
  먼저 나오는 이미지가 3차원이기 때문에, 그 뒤 2차원은 뒤에 겹쳐져 있다.

#news-headline .news-headline-lists li article .img-wrap .overlay {
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 background-color: rgba(0, 0, 0, 0.5);
}
#news-headline .news-headline-lists li article .img-wrap .overlay .headline-info {
	position: absolute;
	width: 100%;
	background-color: pink;

	left: 0;
	bottom: 0;

}

▶ over-lay가 3차원. 그 자식인 headline-info가 3차원 absolute 그리고 레프트와 바텀을 넣는다.

• 부모가 relative나 순수 3차원, 자식이 3차원이되면, 자식이 탑 레스트 사용시 부모가 기준이 된다.

#news-headline .news-headline-lists li article .img-wrap .overlay .headline-info div {
	width:calc(100% - 38px);
}  이부분에 html족에 클래스로 flex를 넣는다.

#news-headline .news-headline-lists li article .img-wrap .overlay .headline-info i {
	display: block;
	width: 26px;
	height: 26px;
	background-color: black;
	border-radius: 50%;

	margin-right: 10px;
}

#news-headline .news-headline-lists li article .img-wrap .overlay .headline-info span {
	font-size: 13px;
	font-weight: bold;
}
#news-headline .news-headline-lists li article .img-wrap .overlay .headline-info p {
	display: inline;
	font-size: 12px;
}

▶ div에 공간크기를 설정하지 않으면, 글자 수만큼 늘어지기 때문에 레이어가 틀어지게 된다.

• 이런 경우에는 공간크기를 설정하는 것이 좋다.

💖참고하기
상대적 크기를 사용하는 아닌 경우에는, 크기과 높이를 상세히 설정하는 것이 좋다.

#news-headline .news-headline-arrows .btn {
	display: block;
	width: 24px;
	height: 24px;
	border: solid 1px #dcdddc;
}
#news-headline .news-headline-arrows .btn-wrap .btn.btn-prev {
	background-color: yellow;
}
#news-headline .news-headline-arrows .btn-wrap .btn.btn-next {
	background-color: pink;
}

#news-headline .news-headline-arrows .btn.btn-up {
	background-color: black;
}

▶ btn-up이 표시가 안되서 한참 찾음 ㅜㅜㅜㅜㅜ

• 원인은 버튼을 만드는 선택자의 우선순위를 너무 세세하게 넣어서 업에 표함이 안되 적용이 안되어 안 나타나는 거였음 ㅜ

💥주의💥
1) 선택자를 작성할 때 주의!! 또 주의하자!!
2)자꾸 befor를 사용할때,
display: inline-block;을 사용하는 것은 잊음 ㅜㅜㅜㅜ
vertical-align: -1px;도 자주 빼먹음

---

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

• css 선택자 작성에 자꾸 잘 못 입력해서, 오류를 찾는 것이 힘들었다.
• block요소와 inline요소의 구분을 확실해서 어느 선택자에 공간을 설정해야하는 지 구분이 필요하다.

---

✔ 해결방법작성

어쩔때는 단순한 노가다가 답이다. 힘들지만 시간일 걸릴 수록 얻는 것이 많아지는 것 같다.( 코드하나하나 뜯으며 찾았다는 말...)

• 헷갈리는 개념은 언제나 그렇듯 구글링으로 학습하였다.

---

✔ 학습소감

이제는 확실히 코드오류 찾는 것이 전보다는 편해졌다. 자주 같은 페턴으로 학습해서 그런지 내 자신의 학습 태도에 관한 문제점을 잘 보이기 시작한다...