📌 학습한 내용
네이버 웹툰 실습 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
-
©: ©, 저작권 표시 -
: 공백을 만들어주는 특수문자, 사용한 만큼의 공백을 넣어줌 (일반적으로 html은 스페이스바로 몇 번의 공백을 넣든 하나로 인식)
<p class="webtoon-footer-paragraph">
본 콘텐츠의 저작권은 저자 또는 제공처에 있으며, 이를 무단 이용하는 경우 저작권법 등에 따라 법적 책임을 질 수 있습니다.
</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의 색을 변경해 주는 것이 이상적
📌 학습내용 중 어려웠던 점
- 강사님이 작성한 코드의 결과에서는
<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> 부분이 표시가 되지 않았는데, 나의 동일한 코드는 아래와 같이 표시가 되었다.
📌 해결방법
- css에서 해당 클래스에
{ display: none }속성을 추가해 사라지게 만들었다. 하지만 강사님의 코드 자체에는 따로 숨김 처리를 한 코드가 없어, 브라우저 혹은 폰트 사이즈의 차이인 것 같다.
📌 학습소감
오늘 유독 강의에서 설계도면 작업(html)의 구조를 자주 바꿨다. 실습을 계속해서 진행하고 있지만 이제는 개념적인 부분을 몰라 실수를 하기 보다는 구조를 변경하는 부분에서 </닫힌 태그>를 변경하지 않거나 삭제해버리는 등의 실수가 생겨나기 시작했다. 결국 그럴 때는 검사기능을 이용해야 하지만, 잠시동안 리프레쉬 시간을 가지고 찾는 것도 도움이 되는 것 같다. 😵 화이팅!
