깨지지 않는 유연한 디자인을 위한 규칙

@마크다운

# 깨지지 않는 유연한 디자인을 위한 규칙

최근 [eel](https://github.com/ChrisKnott/Eel)을 사용해 C <-> Python <-> ChromeAppMode 형태로 GUI를 작성하면서 정리한 노트. 1픽셀까지도 직접 조작하길 원할 경우, 디자인이 깨지지 않게 하는 좋은 규칙이다. 뻔한 웹 사이트나 웹 어플리케이션 제작은 그냥 CSS 프레임워크를 쓰는게 삶의 질을 높여줄 것이라 생각한다.

  1. `reset.css` - 일단 먹이고 시작한다. 일관성 있는 디자인 초기값을 위해 반드시 필요하다.

  2. `html { width: 100vw; }` - 스크롤 바 크기를(대략 16px) 브라우저가 선점하지 못하게 한다.

  3. `:root { --some-variable-name: 1px;  --another-some-variable: #2f353a }` - 변수 선언

  4. `.somediv { height: calc(var(--some-window-height) - var(--some-title-height)) }` - 유지보수가 쉬운, 변수 계산 결과를 값으로 적용

  5. `* { box-sizing: border-box }` - 요소의 크기를 계산하기 쉽게 한다.

  6. 큰 틀에서는 hr, divider, divider-div를 사용하지 않는다 - 불필요한 공간이 발생해 계산이 꼬이게 된다.

  7. `border`를 사용하지 않는다 - border로 인해 요소의 크기가 커지고, 이로 인해 디자인이 깨질 위험이 생긴다. 대신 안쪽을 향하는 `box-shadow`를 사용해 테두리처럼 사용한다.

  8. 폰트를 반드시 지정 - 플랫폼별, 브라우저별 기본 폰트가 전부 같다고 기대할 수 없다. 일관성을 위해 기본 폰트를 지정한다.

  9. `absolute, fixed` 사용 자제 - 렌더링 우선순위를 신경써야 하게 되고, 잘못하면 꼬이기 쉽다.

  10. `line-height` - 기본적으로 문자의 상하 정렬을 위해 활용가능하며, 문자열이 상하 공간을 너무 많이 먹을 때 조절하는데도 사용할 수 있다.

  11. `padding: 10px;` - 자연스러운 패딩 값. 큰 패딩이 필요하면 15px까지는 괜찮았다.

  12. 왼쪽 사이드바의 크기는 190px가 무난하다.