210726 개발일지

📌 학습한 내용

네이버 웹툰 실습 2

전체 코드 : 💾

웹툰 메인 오른쪽 영역

• <ol> : 순서가 있고, 순서에 의미가 있는 리스트에 사용

• 초기에 디폴트값으로 ol { list-style: none }을 줬기 때문에 나타나지 x -> { list-style: decimal; } 넣어줌( 그러나 이 숫자는 영역을 벗어나서 나타남)
  

• white-space: nowrap;
  : 공간을 벗어나는 다른 글자에 대해 글바꿈을 주지 않음.

• text-overflow: ellipsis;
  : 공간을 벗어나는 글자에 대해 '...'처리

하단 영역

< html 특수문자 >
참고 사이트 : https://postitforhooney.tistory.com/entry/HTML-HTML-%ED%8A%B9%EC%88%98%EB%AC%B8%EC%9E%90-%EC%BD%94%EB%93%9C%ED%91%9C-%EC%A0%95%EB%A6%AC

1. © : ©, 저작권 표시

2.   : 공백을 만들어주는 특수문자, 사용한 만큼의 공백을 넣어줌 (일반적으로 html은 스페이스바로 몇 번의 공백을 넣든 하나로 인식)

<p class="webtoon-footer-paragraph">
본 콘텐츠의 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;저작권은 저자 또는 제공처에 있으며, 이를 무단 이용하는 경우 저작권법 등에 따라 법적 책임을 질 수 있습니다.
</p>

• text-transform: uppercase; : 문자 일괄 대문자 처리
  text-transform: lowercase; : 문자 일괄 소문자 처리
  text-transform: capitalize; : 맨 앞글자만 대문자 처리

네이버 웹툰 디테일 실습

메뉴바

'이달의 신규 웹툰' & banner

• 형제간에서 position: absolute;를 사용하면 나중에 나오는 형제의 z축이 더 높음.

.webtoon-detail #webtoon-this-month .webtoon-this-list .this-image-wrap img {
	position: absolute;
	width: 100%;
	height: 100%;
}

.webtoon-detail #webtoon-this-month .webtoon-this-list .this-image-wrap .new-mark {
	position: absolute;
	width: 30px;
	background-color: #00c85e;
	color: #ffffff;
}

• <span>은 inline 요소이기 때문에 margin-bottom이 화면에 적용되지 x -> display: block; 적용

.webtoon-detail #webtoon-this-month .webtoon-this-list .author {
	display: block;
	font-size: 14px;
	margin-bottom: 5px;
}

👉 inline 요소는 상하배치작업 불가능!

'요일별 전체 웹툰'

• align-items: flex-start;
  

  align-items: center;
  

• align-items: stretch;
  : 디폴트값, <li>의 높이가 각자 다를 경우, 가장 높이 값이 큰 <li>를 기준으로 일괄적으로 맞춤.
  

  align-items: flex-start;
  : 각각의 <li> 태그들이 각각의 높이를 가짐
  

• 활성화(.active)된 영역에 맞추어 border의 색을 변경해 주는 것이 이상적
  

📌 학습내용 중 어려웠던 점

1. 강사님이 작성한 코드의 결과에서는

<ol>
 <li>
  <a href="#">급식아빠-18화 죽은지 얼마나 됐어요?</a>
   <div class="rank-box">
<!-- status-stay, status-up, status-down -->
    <div class="status status-stay"></div>
	<span class="number">0</span>
    </div>
 </li>
</ol>

<span class="number">0</span> 부분이 표시가 되지 않았는데, 나의 동일한 코드는 아래와 같이 표시가 되었다.

📌 해결방법

1. css에서 해당 클래스에 { display: none } 속성을 추가해 사라지게 만들었다. 하지만 강사님의 코드 자체에는 따로 숨김 처리를 한 코드가 없어, 브라우저 혹은 폰트 사이즈의 차이인 것 같다.

📌 학습소감

오늘 유독 강의에서 설계도면 작업(html)의 구조를 자주 바꿨다. 실습을 계속해서 진행하고 있지만 이제는 개념적인 부분을 몰라 실수를 하기 보다는 구조를 변경하는 부분에서 </닫힌 태그>를 변경하지 않거나 삭제해버리는 등의 실수가 생겨나기 시작했다. 결국 그럴 때는 검사기능을 이용해야 하지만, 잠시동안 리프레쉬 시간을 가지고 찾는 것도 도움이 되는 것 같다. 😵 화이팅!