오늘부터 네이버 웹툰메인이 카피겟을 시작한다. 앞의 내용물 보다 여려워 보이지만 차근차근히 코드를 작성하자!!
Tip
- css 작성시 선택자를 미리 작성하는 것이 편하다.
▶ 해당영역의 border가 화면 양 끝까지 나오기 떄문에, 안에 넣을 오버젝트는 wedtoon-container 안에 넣는다.
▶ h3 칼러를 직접적으로 입력을 해도 색상이 변하지 않는다. 즉, 그대로 검정색으로 출력이 된다.
▶ 작대기 넣기
<em class="bar"></em>
#webtoon-header .wedtoon-header-top .wedtoon-header-left .bar{
width: 1px;
height: 13px;
background-color: #d2d2d2;
margin-left: 8px;
margin-right: 10px;}
▶ 서치영역만들기
#webtoon-header .wedtoon-header-top .wedtoon-header-input-wrap{
display: flex;
flex-wrap: wrap;
align-items: center;
width: 315px;
height: 37px;
border: solid 1px #e5e5e5;}
#webtoon-header .wedtoon-header-top .wedtoon-header-input-wrap input{
width: calc(100% - 35px);
height: 100%;
border: none;
background-color: yellow;
padding: 0 10px;}
#webtoon-header .wedtoon-header-top .wedtoon-header-input-wrap input:focus {
outline: none;}
#webtoon-header .wedtoon-header-top .wedtoon-header-input-wrap .btn-search{
width: 35px;
height: 100%;
background-color: #00d564;}
공부하기 📚
반드시 사전 메인사이트의 서치도 알아보기
그리고 구글링을 통해서 다른 코드도 알아보기!!
▶ wedtoon-header-link-wrap 안에 i와 a태그가 존재한다.
이 때, i태그를 inline를 inline-block로 변환하면 inline요소인 a가 뒤 이여 있기 때문에 사이에 태생적인 공간이 나온다.
(인라인이 연달아 나오면 태생적인 공간이 나온다)
#webtoon-header .wedtoon-header-nav .wedtoon-header-link-wrap a{
vertical-align: middle;
font-size: 12px;
color: #606060;
}
▶ 같은 줄에 있는 형제관계는 띄어쓰기를 넣지 않는다.
▶ webtoon-caroursel부분에서 오른쪽과 왼쪽을 양분을 할 때, flot를 사용한다.
▶ webtoon-caroursel-right 의 밑 버튼들을 작성할려면, 포지션의 개념을 완벽하게 이해을 해야 한다.
<ul>베스트도전
<li>에피소브별
<ul>
<li>
</li>
</ul>
</li>
</ul>
▶ li속에 小ul를 넣을 수 있다.
width: calc(100% - 'X'px) 부분이 제대로 출력이 되지 않아서 고민이 많았다. 실제 input과 button의 디자인과 공간을 신경 써야 될 것 같다.
- 서치영역의 추가적인 학습이 필요한 것같다.
li속에 또 다른 ul를 넣는다는 개념을 이해하기 조금 힘들었다.ㅜ
언제나... 구글링과 실제로 하나 하나 코드를 수정해 보면서 출력값을 확인 해 보는 것...
태그안에 또 다른 태그를 넣어 구조를 짤 수 있다는 것은 전부터 알 고 있었지만, 이렇게 또 다르게 활용할 수 있는지는...! 앞으로도 다양한 시도를 해보자!!