✔ TODAY

네이버 웹툰 페이지를 완성해야되는데...ㅜㅜ 몸이 안좋아서 진도를 나가지 못 했다... 밀리면 힘든데...ㅜㅜ
네이버 웹툰 카피겟 마지막 날

---

✔ 학습한 내용

webtoon-main-right

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking ol li a{
	display: inline-block;
	overflow: hidden;
	width: 140px;
	white-space: nowrap;  공간에 벚어나는 오버젝트에 대해서는 더이상 표시하지 않는다.
    white-space는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성입니다.
	text-overflow: ellipsis;
     공간을 벚어난 텍스틍 관해서는 말 줄임표시
   

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking ol li a{
	display: inline-block;
	overflow: hidden;
	width: 140px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking ol li .rank-content{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking ol li .rank-content .rank{
	margin-right: 5px;
}

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box {
	position: relative;
	/*top: -3px;*/

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	width: 30px;
	height: 12px;
}

▶ 플렉스를 중첩해서 사용

<div class="rank-box">
<!--status-stay status-up status-dowm -->
	<div class="status status-down"></div>
	<span class="number">1</span>
</div>

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .status.status-stay{
	background-color: black;
}

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .status.status-up{
	background-color: red;
}

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .status.status-down{
	background-color: blue;
}

▶캐스케이팅으로 이미지 썸네일이 있는 랭킹리스트 만들기

 #webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank.rank-custom{
	position: relative;
	top: -10px;
}

위의 인기급상승 만화의 기존의 것을 커스텀하여, 30대 실사건 인기만화 새로운 html구조와 클래스를 넣여 사용한다.

갑자기 풋터에 컨테이너 클래스 삽입하니 크롬 브라우저에 메인-메인레프트-콘테츠 2~3열의 레이어가 갑자기 어긋남.
확인 결과 코드상의 문제는 없음
타 브라우저에는 정상적으로 출력이 됨

• 구글링으로 검색해서
  Chrome 설정을 기본값으로 되돌리기 로 하니 정상 적으로 나옴....
  해결하는 데 1시간.....

css 특수문자

#webtoon-footer .webtoon-footer-wrap ul li:first-child:before{
	content: initial;
}

#webtoon-footer .webtoon-footer-wrap ul li:before{
	display: inline-block;
	content: "";
	width: 1px;
	height: 11px;
	background-color: #d9d9d9;

	vertical-align: -1px;
	margin :0 8px
}

가상선택자 before를 사용하여 작대기 넣기

▶ css 속성으로 대문자, 소문자를 넣을 수 가 있다

• text-transform:uppercase; 대문자
• text-transform:lowercase; 소문자
• text-transform:capitalize; 앞문자만 대문자

  webtoon-detail

  ▶ 상단과 하단 메인의 right는 홈과 동일함으로 가지고 적용한다.

 .wedtoon-container{
	width: 960px;
	margin: 0 auto;
}

• 콘테츠들을 중앙으로 모이게 하기 위한 선택자 속성이라고 보면 된다.
• 자세한 건 전날의 포스트를 확인해 보자

▶ border-bottom: solid 2px transparent

• 투명한 색의 볼더를 넣을 수 가 있다.

밑에 표시줄을 넣는 3가지 방법

1)

.webtoon-detail .nav-2 ul li {
	margin-right: 14px;
	padding-bottom: 5px;
	border-bottom: solid 1px transparent;}
    
.webtoon-detail .nav-2 ul li.on {
	/*border-color: #00d564;*/

• 전체 li 에 투명 볼더 넣고, on 에 볼더 색상만 넣기.
  색상바가 살짝 뜸

2)

.webtoon-detail .nav-2 ul li.on {
	/*border-color: #00d564;*/
	border-bottom: solid 2px #00d564;
	margin-bottom: -1px;

	font-weight: 700;}

• 온에게만 색상 볼더를 부여, 옆의 리스트들이 상대적으로 내려감

  3)

.webtoon-detail .nav-2 ul li {
	margin-right: 14px;
	padding-bottom: 5px;
	border-bottom: solid 1px transparent;}
    
.webtoon-detail .nav-2 ul li.on {
	/*border-color: #00d564;*/
	border-bottom: solid 2px #00d564;
	margin-bottom: -1px;

	font-weight: 700;
}

• 볼더 값 등을 고려할때, 위의 방법에서 전체 리스트에 투명 볼더 값을 부여.
  가장 어우리게 나왔음

▶ 만약 색볼드가 위로 올라오기 바란다면 1번 방법이 좋음

▶ 실제 네이버의 경우에는

• li가 아닌 a에 볼더를 적용
  .on a에는 색상볼드를 적용
  a 에는 볼드를 적용하지 않고, 마진 바텀 -1

• 그냥 li에 margin bottem -1를 적용하면 완벽하게 겹침

강의에서 가르치는 것 처럼 회색 볼더와 초록색의 볼더가 어느정도 잘 겹쳐지지 않는데 ,
이건 색은 주는 볼더 li와 회색의 볼더의 영역이 다른다.
그리고 어느정도 이쁘게 안나오는 것은 편의로 50%비율로 보기 때문인 걸로 나왔음

만약 실제로 회색볼더를 확실하게 가리고 싶으면 네이버에서 적용한 방법처럼 a태그자체에 색상볼더를 주는 것이 좋은 것 같음

원하는 구조와 css속성 효과를 가지고 있는는 사이트를 본 경우, 소스코드를 따오기

this-img-wrap의 이미지 위에 span

<div class="this-img-wrap">
	<img src="">
	<span class="new-mark">new</span>
							
</div>

.webtoon-detail .webtoon-this-month .webtoon-this-lists .webtoon-this-list .this-img-wrap{
	position: relative;
	width: 100%;
	height: 120px;}
    
.webtoon-detail .webtoon-this-month .webtoon-this-lists .webtoon-this-list .this-img-wrap img{
	position: absolute;
	width: 100%;
	height: 100%;}
    
.webtoon-detail .webtoon-this-month .webtoon-this-lists .webtoon-this-list .this-img-wrap .new-mark {
	position: absolute;
	width: 30px;
	background-color: #00c85e;
	color: #ffffff;
}

• 같은 형제끼리 absolute 그래서 뒤의 형제가 z값이 높아서 위로 감.

▶ span은 inline요소로 마진바텀을 넣어도 표시되지 않게 때문에,
dipaly:block으로 바꾸어 준다.
inline은 상하배치작업을 할 수가 없다.

.webtoon-detail #webtoon-total-day .webtoon-day-lists{
	display: flex;	
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
}

• align-items: center로 할경우 webtoon-day-lists를 늘리면 레이어가 어긋하기 때문에
  align-items: flex-start로 지정한다.

  이걸 또 align-items: stretch;로 바꾸는데 이유는 리스트의 오버젝트의 수가 달라, 옆의 볼더가 중간에 끝어지게 되는데 가장 많은 수 오버젝트에 맞춰서 끝까지 생성하기 위해서 만듬.

▶ webtoon-day-lists의 경우도, li안에 ul를 넣는 개념이라고 보면 된다.

---

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

• nav영역의 boder-bottem에서 활성화가 되는 경우, 별도의 색을 넣는 커스텀을 할때의 경우의 수를 찾아본다고 너무 많이 시간이 걸려서 힘들었다.
  -align-items에 대한 정확한 개념이 필요하다.

---

✔ 해결방법작성

• 네이버 해당역영의 코드를 보고 적용해 보기도 하고 , 의문이 드는 점이 있으면 직접 코드를 수정하여 출력값을 확인해 보았다.

---

✔ 학습소감

궁금증을 해소하느라, 시간이 너무 걸려서 진도가 너무 안나가서 힘들었다...