✔ TODAY

오늘부터는 네이버 블로그를 카피켓 한다.

✔ 학습한 내용

네이버 블로그 1

blog-header

#blog-header .blog-header-top .blog-header-input-wrap .blog-search-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	width: 325px;
	height: 40px;
	border: solid 1px #4da733;
	background-color: #ffffff;

	margin-right: 5px;
}


#blog-header .blog-header-top .blog-header-input-wrap .blog-search-wrap input {
	width: calc(100% - 40px);
	height: 40px;
	background-color: #ffffff;
	/*border: solid 1px #4da733;*/
	border: none;
	
}

일대 서치롸 버튼간의 미세한 공간이 있어서 잘 맞지 않아 힘들이ㅓㅆ다

#blog-header .blog-header-top .blog-header-input-wrap .blog-search-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	width: 325px;
	height: 40px;
	background-color: #ffffff;

	margin-right: 5px;
}


#blog-header .blog-header-top .blog-header-input-wrap .blog-search-wrap input {
	width: calc(100% - 40px);
	height: 40px;
	background-color: #ffffff;
	border: solid 1px #4da733;
	
}

써치랩의 볼더를 없애고 대신 인풋에 볼더 를 넣으니 깔끔해 졌다.

넘 좋다... ㅜㅜㅜㅜㅜㅜ 뭔가 안 맞을대는 다른 요소에 속성을 넣어보자

창을 작게 해서 화면을 밀어서 보는 경우 옆의 출력값이 제대로 나오지 않는다
블로그도 마찮가지의 문제가 나오지만
메인페이지의 경유 별문제 없이 나옴

코드 작성시 문제가 있는 지 완성본과 비교하였으나 동일한 문제로 나옴.

창을 작게 하는 경우 무리 없이 나올려면
미디어 쿼리를 사용해야되는지?
아니면

게다가 헤더에는 어찌어찍 나오는것에 반에
메인에는 아예 짤려서 나오는데

메인작업 초기화 부분에서
overflow-hidden를 사용해서 그런가?

이부분떄문인가...
메인 초기화 값으로는 오버플로우 히든을 사용했고
메인 아이디를 이용해 메인페이지는 설정해 놓은 것에 반해

다른 타 페이지는 설정을 안했기 때문?
-그런듯 메인 자체에 플롯을 사용한 곳에는 오버플로우 히든의 영향을 받지 안헥 되나 (정해진 영역의 플롯이 적용되었기 때문)

맨토님께 질의해서 답변 받았는데 맞데!! 오예!!!!

-블로거나 쇼핑의 경우 메인에 대해 별다른 설정을 하지 않았기 때문에
오버플러오 히든의 영향을 받았기 때문

그러나 헤더의 경우에 레이어 아웃이 깨진 이ㅇㅅ은 모그렜다.....

이거 알아내는 것만으로도 1시간 이상 소요됨....ㅜㅜㅜㅜㅜㅜ

복습으로 사이트를 만들때 사용을 해봐야 할듯

cursor: pointer; 올렸을때 손가락 모양 클릭범위 조정

플렉스를 적용할때 적용부분의 부모영역이 어딘지 정확하게 파악하기

메뉴부분에 x축으로 정렬하기

#blog-header .blog-header-nav .nav-left ul{	
	display: flex;
	flex-wrap: wrap;
	align-items: center;

}

#blog-header .blog-header-nav .nav-rigt ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center
}

플렉스 사용하기

네이버는 플렉스 말록 float를 사용하는 이유는 플렉스는 익스플로워 하위버전을 지원하지 않는다
can i use에서 사용하는 속성이 지원하는 브라우저 버전인지 사전에 확인하자

i 태그는 공간을 만들어도 인라인요소를 가지고 있기때문에 공간을 표현할 수 가 없다.
그래서 디스플레이 블럭을 넣는다.

<div class="hot-topic-left">
					<div class="topic-heading">
						<h3>핫토픽</h3>
						<i></i>
						<a href="#">다꾸를 해요</a>
					</div>
					<ul class="topic-lists">
						<li>
							<img src="http://via.placeholder.com/252x240">
							<p>초보 다꾸러의 다꾸 팁 공개!!</p>
						</li>
						<li>
							<img src="http://via.placeholder.com/252x240">
							<p>초보 다꾸러의 다꾸 팁 공개!!</p>
						</li>
						<li>
							<img src="http://via.placeholder.com/252x240">
							<p>초보 다꾸러의 다꾸 팁 공개!!</p>
						</li>
					</ul>

					<div class="pagiantion-wrap">
						<a href="#">1</a>
						<a href="#">2</a>	
						<a href="#">3</a>	
						<a href="#">4</a>							
					</div>
			

			</div>

코드에서 topic-heading옆에 pagiantion-wrap를 놓는 방법은 hot-topic-left를 포지션 릴레티브로 한 다음, pagiantion-wrap에
position: absolute;
top: 0;
right: 0;

부모의 표지션이 렐레티브 자식이 엡룔수트 이면 탑~바텀을 사용할 수 있고 위치의 기준은 부모이다.

css 말줄임 한줄로 구글링하여 말줄임에 대해 공부하자.

letter-spacing: 은 글자간의 간격에 대한 속성
높을 수록 간격이 커지고 적을 수록 -도 가능. 글자간이 간격이 촘촘하다