TIL

190409_TIL(탭메뉴,white-space:nowrap, .on() method, 유사배열,async and defer)

4월 9일 (화)

  • 오늘은 탭메뉴를 float , position 속성 등을 사용하여 다양하게 구현해보았다. html 이나 css 보다는 탭메뉴를 동적으로 만들기 위한 방법을 정리해보고자 한다.
  1. 동적인 탭메뉴를 만들기 위한 class를 처음에 보여질 탭메뉴 태그의 작성한다.
  2. 위에서 만든 class에 display:block; 스타일을 입힌다.
  3. 나머지 첫화면에 표시하지 않을 탭메뉴 내용들은 display:none;으로 숨김 처리한다.
  4. 자바스크립트를 이용하여 class를 동적으로 생성하고 삭제한다.

기타 배운 내용들 정리

  • Whiite-space: nowrap;
    부모 영역을 벗어나더라도 한줄로 나오게 한다. 즉, wrap 하지 않게 한다.

  • .on() method를 사용하면 하나의 이벤트 핸들러에 여러 개의 이벤트를 동시에 연결할 수 있다. 참고자료

  • 한 선택자에 여러 요소가 있으면 유사배열 형식으로 값을 반환한다.
    예를들면 아래와 같이 여러 li 태그들의 class로 적용되어 있는(가정) .menu-item은 li태그를 유사배열 형식으로 반환한다.

    1
    2
    $ var item = $('.menu-item');
    $ console.log(item); // 유사배열 값 반환.

  • 유사배열은 아직 많은 부분이 이해가 가지 않는다. 앞으로 더욱 많은 배움을 통해 알아가자! 유사배열 참고자료

  • 일반적인 <script> 실행은 인라인 코드의 경우 즉시 해석되고 실행되지만 그렇지 않은 경우는 해당 js 파일을 가져올 때까지 HTML 문서의 구문 분석을 중단한다.

  • async속성이 추가된 경우의 실행은 HTML 구문 분석과 병행하여 스크립트를 가져온 후 스크립트가 준비 될 때마다 즉시 실행이 가능하다. 실행 순서가 다운로드 완료 시점의 결정되므로 사용에 주의해야 한다.

  • defer 속성이 추가된 경우의 실행은 HTML 구문분석이 실행되는 동안 스크립트 파일을 다운로드 할 수 있다. 그러나 HTML 구문 분석이 완료 되어야 스크립트가 실행된다. 호출된 순서대로 실행된다.

Share