Dev Log #21 - 7월 26일

오늘 학습한 내용

✅ 1. 네이버 웹툰 카피캣 - main_right 영역
✅ 2. 네이버 웹툰 카피캣 - footer 영역

1. 네이버 웹툰 카피캣 - main_right 영역

• 인기순 tab을 클릭 시, 밑에 있는 선을 제거하기 위해서 tab 클래스에 active라는 클래스를 더해서 css작업 시 border-bottom: none;이 아니라 border-bottom: solid 1px #ffffff;를 적용해서 제거했다.

• 리스트가 순서가 있고, 의미가 있는 리스트라면 ol태그를 사용한다.

• 데코레이션이 없는 속성값을 가진 ol, ul태그의 초기화 작업을 없애고 본래의 상태로 되돌리는 방법으로 list-style: decimal;이 있다.

• 말줄임 표시법 : overflow: hidden; white-space: nowrap; text-overflow: ellipsis;

• ol태그의 숫자는 범위를 넘어서서 다시 초기화 상태로 돌린 후 span태그를 사용해서 숫자를 따로 입력했다.

• rank.rank_custom 을 통해서 캐스케이딩 작업 진행

👉 html

👉 css

2. 네이버 웹툰 카피캣 - footer 영역

• html 특수문자

• text-transform: uppercase; :일괄적으로 대문자로 변경

👉 html

👉 css

---

👉 결과물

---

3. 네이버 웹툰 디테일 카피캣 개론

• 나머지 li태그에도 border-bottom을 적용해야만 on인 상태인 border-bottom과 동일한 값을 갖게 된다.

.webtoon_detail .nav_2 ul li {
	margin-right: 14px;
	padding-bottom: 5px;
	border-bottom: solid 2px transparent;
}

.webtoon_detail .nav_2 ul li.on {
	border-color: #00d564;
	/*border-bottom: solid 2px #00d564;*/
	margin-bottom: -1px;
	font-weight: 700;
}

오늘의 학습 후기(어려웠던 점, 개선할 점)

오늘은 네이버 웹툰 카피캣 main_right부분과 footer영역을 작업했다. 오늘 새롭게 배웠던 점은 초기화했던 부분을 다시 원래 상태로 되돌리는 작업과 말줄임 표시법, css 제어를 통해 소문자를 대문자로 변환하는 법을 배웠다. 오늘 어려웠던 부분은 list태그를 이용해서 인기 급상승 만화 영역을 만드는 작업이 어려웠다. 작은 공간 안에서 또다른 공간을 만들어서 작업하는 부분이라 손이 많이 갔다. 하지만 차근차근 따라하다보니 곧 잘 만들어낼 수 있었다. 내일도 열심히 임해야겠다.🤓🔥