세션

• CSS = Cascading Style Sheets

  • 웹 페이지 구성요소의 스타일을 정의하는 언어. 오늘도 명칭과 정의부터 학습 :)

• left:0; right:0;

  • 좌우로 100% 스트레치되게 만든다.
  • top / bottom 수치와 position: fixed 설정해서 플로팅 요소로 만들 수 있다.
  • 인라인 요소는 position: absolute / fixed에서만 좌우로 스트레치 된다.

• { box-sizing: border-box; }

  • 요소의 실제 크기는 width, height 값에 padding과 border 굵기 값을 더한 값이 되어버려 원하는 크기를 만들기가 어려운데, 이를 해결해주는 속성.
  • padding와 border 굵기 값이 포함되어 지정한 width, heigth 값으로 크기가 딱 만들어진다.
  • 사파리, 크롬, 파이어폭스의 완전 구 버전에서는 아래처럼 접두사를 붙어주어야한다.
  • -moz-box-sizing: border-box; /* 파이어폭스(Firefox)*/
-webkit-box-sizing: border-box; /* 웹킷(Webkit) & 크롬(Chrome) */
  • https://caniuse.com/#search=border-box

• position: sticky

  • 요소과 화면 상단에 닿을만큼 스크롤되면, 그 위치 fixed 속성 값처럼 고정된다.
  • https://caniuse.com/#search=position%3A%20sticky

Q&A

• HTML 소스 상에서 onClick 등의 속성을 사용하기 보다, 자바 스크립트에서 이벤트를 추가해주는 걸 추천.

• 지역 함수에는 접근할 수 없고, HTML 소스 상에도 함수 명이 노출된다.

  • 이벤트를 추가하는 방식으로 이벤트 리스너 추가 외에 글로벌 이벤트 핸들러도 있었다.
  • Syntax: 변수.onclick = function() { … }; OR functionRef;
  • https://developer.mozilla.org/ko/docs/Web/API/GlobalEventHandlers

Hoisting

• 전역함수 / 지역함수에 대해 더 이해하려고 검색하던 중 호이스팅(Hoisting)이라는 개념을 보게 됐다.

• https://aspdotnet.tistory.com/2106

  function abc(){
  var a = 'bbb';
  console.log(a);  // bbb
  function c(){
  console.log(a); // undefined
  (function(){
    console.log(a); // undefined
    a = 'ccc';
  })();
  var a; //------ function c scope 변수 테이블 상의 a 선언
  console.log(a); // ccc
  }
  function d(){
  console.log(a); // ddd ----- 가장 가까운 변수 테이블인 2번 째 줄에서 선언된 aaa를 참조함
  }
  c();
  a = 'ddd';
  d(); 
  }
  abc();
  

• 변수 테이블이라는 개념을 처음 알게 됐다. 함수 c 안의 1, 2 번째 a는 undefined고 d의 a는 부모 함수의 값을 가져오는 게 사뭇 이해가 안됐는데, 댓글에도 같은 내용이 있었다. 마음으로는 받아들일 수 없는 흐름이지만 머리로는 이해해본다. ㅋㅋㅋ