9/15 클론코딩

오늘의 배운 점

 

- a 링크를 걸 때, 글자 만큼만 클릭할 수 있다. 이 때 display: inline-block;  을 css에 넣으면, 지정된 width만큼 클릭할 수 있게 된다.

 

- css의 letter-spacing 이란, 글자 간격을 조정할 수 있다.

 

- input 의 border를 없애도, input 클릭 시 테두리가 나타난다. 이걸 없애려면 input:focus {outline: none;} 을 주면 된다.

 

- 네브바에 마우스를 올릴 시 글자색깔을 변하게 하는 자바스크립트는 반복문으로 클래스를 붙혔다 떼었다 하였다.

const navSpan = document.querySelectorAll('nav span');

for (i = 0; i < 5; i++) {
  navSpan[i].addEventListener('mouseover', function () {
    this.classList.add('fontcolor');
  });
}

for (i = 0; i < 5; i++) {
  navSpan[i].addEventListener('mouseout', function () {
    this.classList.remove('fontcolor');
  });
}

 

- css 너무 어렵다.

 

 

 

소감

css 짜는데 시간 다간다..

현업도 이렇게 css부터 한땀한땀 만드는건가 ㅠㅠㅠㅠ너무 시간이 오래걸리니 요행을 바라는 스레기같은 내 마인드..

일단 오늘은 네브바 만들고, 검색버튼 누르면 이렇게 창 나오고

 

x버튼 누르면 닫히게까지 만들었다.

원래 버튼들 누르면 서서히 생기고 사라지는 애니메이션이 있는데, 바닐라js로 하려니 너무 어렵다.. 방법은 있는 것 같은데..

제이쿼리는 사용을 안하는게 좋을 것 같아서 서서히 사라지는 애니메이션은 넣지 않을 것 같다.

내일 질문한번 해봐야지.

아 근데.. 진짜.. 자바스크립트는 금방 하는데 css가 너무너무너무 어렵다..

레이아웃 플렉스고 그리드고 나발이고 걍 개발자도구도 대충 보고 내가 만들고싶은대로 휙휙 만들어버렸다 ㅠㅠㅠ

이래도 되는건지;;; 괜히 내 맘대로 만들었다가 안좋은 습관 남을까봐 걱정이다.

일단 내일은 헤더쪽 마무리 지었으면 좋겠다..