210723 개발일지

1) 학습한 내용

네이버 웹툰 페이지(1) 상단, 메인 왼쪽

github

• 메뉴 혹은 글 사이 작대기 바 넣기

  html<em class="bar"></em>
  css
  #webtoon-header .webtoon-header-top .webtoon-header-left .bar {
      width: 1px;
      height: 13px;
      background-color: #d2d2d2;
  
      margin-left: 8px;
      margin-right: 10px;
  } 넣으면 회색 바 생김

---

• 검색창 아웃라인 없애주기

  #webtoon-header .webtoon-header-top .webtoon-header-input-wrap input:focus 
  {
  outline: none;
  }

---

      #webtoon-header .webtoon-header-top .webtoon-header-input-wrap input {
        width: calc(100% - 35px) 뺀 나머지 값만큼만 적용시키겠단 의미
        height: 100%;
        border: none;
        background-color: yellow;
        }

---

• 마우스 얹으면 밑줄 뜨게하기

  #webtoon-header .webtoon-header-nav .webtoon-header-link-wrap a:hover {
      text-decoration: underline;
  }

---

• 누르면 초록색으로 변하면서 현재 누른 페이지 표시해줌

  <li class="on"><a href="webtoon.html">홈</a></li>
  
  #webtoon-header .webtoon-header-nav nav ul li.on a{
      background-color: #00d564;
      color: #ffffff;
  }

---

• padding: 26px 0 10px; padding 사용시 3자리 숫자는 <상, 좌우, 하> 뜻함

---

• 마이너스 값을 주면 위의 선 혹은 아래 선과 겹쳐지면서 더 자연스러워 보임

  #webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header li.on {
      border-bottom: solid 2px #00d564;
      margin-bottom: -1px; 
  }

• 클래스이름은 짧은게 가독성 좋음

---

2) 학습내용 중 어려웠던 점
특별히 어려운 내용은 없으나 class 사용이 많아 시간이 걸렸다.

3) 해결방법
복사 붙여넣기를 이용해 최대한 오타를 내지 않도록 한다.

4) 학습소감
웹툰 페이지라 굉장히 많은 div영역이 필요하였는데, class 이름을 붙이는데 짧게 해야 가독성 뿐만아니라 작업하기 편하다는 것을 느꼈다.