CSS) z-index

z-index 속성은 요소가 쌓이는 순서를 지정한다. 낮은 값을 가진 요소가 밑에, 높은 값을 가진 요소가 위에 온다. 즉 서로 겹쳐있을 때 값이 낮은 요소는 값이 높은 요소에 가려지게 된다. 

• z-index의 기본값은 0이 아니라 auto이다.
• position의 속성이 absolute, relative, fixed, sticky일 때만 적용된다.
• 같은 depth을 가지는 요소끼리 비교된다.
• 자신의 z-index값보다 부모의 z-index값이 우선되는 기준이다.

참고 :

• http://dev.epiloum.net/904
• https://www.w3.org/TR/CSS2/visuren.html#z-index

JS) The Modulus Operator (%)

나머지 연산이란 어떤 한 수를 다른 한 수로 나눈 다음 그 나머지값을 구하는 계산법이다.

a modulo n (축약해서 a mod n, javascript에서는 a % n)에서 a는 나누어지는 수(피제수, dividend)고 n은 나누는 수(제수, divider)다. 즉 '5 % 2'의 결과는 1이고 '9 % 3'의 결과는 0이다.

정수의 나머지 연산에서 결과는 항상 0과 n-1 사이의 값이 된다(javascript의 경우 a가 양수일 경우에만 해당인듯?). a % 1의 값은 항상 0이다. 또한 a modulo 0의 값은 undefined이기 때문에 이러한 연산은 프로그래밍 언어에서 오류가 될 것이다. Javascript에서는 NaN(Not a Number)으로 처리된다.

a 또는 n이 음수인 경우는 프로그래밍 언어에 따라 처리하는 방식이 다르다. Javascript에서는 나머지 연산 결과값의 부호는 피제수의 부호를 따른다. 즉 피제수가 양수인 경우 결과값은 항상 양수, 피제수가 음수인 경우 결과값은 항상 음수가 된다.

공식은 피제수 = 몫 * 제수 + 나머지




참고 :

• https://en.wikipedia.org/wiki/Modulo_operation
• https://riptutorial.com/javascript/example/760/remainder---modulus----

CSS) Float Layout and Clear(clearfix)

float를 사용해서 레이아웃을 짜다보면 영역이 깨져서 요소의 위치가 뒤죽박죽이 되곤 한다. 그럴땐 float를 준 요소의 부모요소에 clear 속성을 부여해주면 해결된다. 이러한 기능의 클래스 이름을 보통 clearfix라고 쓰는 것 같다.


.clearfix::before, .clearfix::after {display: block; content: ''; clear: both;}

• ::before와 ::after는 해당 요소 안, 앞뒤로 가상의 영역을 만들어준다. 
• display: block과 content: ''는 가상의 영역을 실체로 만들어준다고 생각하면 될 것 같다. 
• clear: both는 해당 요소의 좌우에 다른 블록이 올 수 없게 하는 것. 

즉 clearfix는 영역의 위아래에 구분선을 그어주는 역할인 것 같다.

드롭다운 메뉴

..

CSS) position: absolute & position: relative

origin point