margin auto

margin auto는 수평방향 (좌,우)의 마진을 자동으로 설정하는 것이다. 그 결과, 좌우 여백은 균일하게 배분되어 margin auto가 적용된 요소는 그 부모 요소의 가로 중앙에 배치된다.
적용을 위해서는 당연히 마진값이 적용될 수 있는 요소여야 하고 (inline이 안되는 이유), width값의 정확한 파악이 가능해야 한다.

(활용)

상단바를 세 섹션으로 나누고 가운데는 정중앙에 배치할 때 활용한다. space-between을 사용하면
이렇게 균등한 3등분으로 나눠지지 않기 때문에 이 방법을 활용한다.

각 섹션의 width를 33%로 설정하고 가장 우측의 것에 margin-right:auto;,가장 좌측의 것에 margin-left:auto;을 설정한다.

만일 마진 오토를 설정하지 않는다면 저 세 컬러박스들은 왼쪽으로 붙기 때문에 오른쪽에 여백이 좀 더 남아서 좌우 차이가 생김.

마진 오토를 설정하지 않고 space-between을 할 경우에도, 각 요소 사이에 여백이 생김.

overflow

콘텐츠가 너무 커서 요소의 크기에 맞출 수 없을 때 처리하는 방법이다.

overflow: value;

overflow value 종류

• visible : 요소의 크기를 벗어난 채로 다 보여줌
• hidden : 요소의 크기를 벗어난 부분은 숨김
• scroll : 요소의 크기 안에서 스크롤바가 생겨서 스크롤을 통해 요소 전체를 확인할 수 있음
• auto : 요소의 크기를 벗어나면 scroll로 처리하고, 아니면 원래대로 보여줌

(활용)

CSS만으로 input range의 style을 바꿀 때, 문제점은 지나온 부분의 컬러를 변경할 수 없다는 점이다. 정확히는 webkit으로는 불가능하고, ms로만 가능한듯.
어쨌거나 CSS만으로 지나온 부분의 컬러와 지나가야할 부분의 컬러를 구분하기 위해서, overflow: hidden;을 활용할 수 있다.

input[type="range"] { 
    margin: auto;
    -webkit-appearance: none;
    position: relative;
    overflow: hidden; <--★
    height: 40px;
    width: 200px;
    cursor: pointer;
    border-radius: 0;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; 
    height: 40px;
    background: #fff;
    box-shadow: -100vw 0 0 100vw dodgerblue; <--★
    border: 2px solid #999; 
}

thumb의 그림자를 왼쪽으로 크게 주고, range bar을 벗어나는 그림자는 overflow: hidden; 으로 가려 결과적으로는 input range안에서 지나온 부분의 컬러 역할을 하게 된다.
참고 : https://codepen.io/noahblon/pen/OyajvN

CSS만으로 input range style을 설정하는 더 많은 방법은 아래 링크를 참고.
https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
https://github.com/Dev-Jeromebaek/design_note/issues/1

z-index

z-index: value;

z-index는 position 설정된 요소, 그 요소들의 자식 또는 flex item간의 레이어 순서를 정한다. 0이 기본값이고, 값이 클수록 상위에 놓이며 값이 작을수록 하위에 놓이게 된다.

order

order: value;

flex 컨테이너 안의 flex item에 적용된다. order 값으로 이들의 배치 순서를 정하지만 일일이 설정해야 하므로 코드가 많이 쓰인다. 그래서 대신에 reverse 값을 줌.

0이 기본값이고, 값이 작은 것부터 출력된다.
order: -1; order: 4; order: 10;