• https://1linelayouts.glitch.me/
• layout 잡을 때 참고하기 정말 좋은 사이트

1
2
3

* {
  box-sizing: border-box;
}

• border-box를 많이 쓸 것 같다

참고

• https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing
• border-box, content-box 둘 차이를 시각적으로 알려주는 예제가 있다

• 배경색을 흰색으로 바꾸고, 깔끔하게 바꿔보았다

• 이런 모양의 스크롤바를 만들 수 있다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/* scroll bar */
& {
  &::-webkit-scrollbar {
    width: 10px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  &::-webkit-scrollbar-thumb {
    background: #888;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
}

참고

• https://stackoverflow.com/questions/50817727/change-scrollbar-height

• css를 조금 더 아름답고 일관되게 작성해보자
• 기본 prettier 포맷팅을 사용하면 들여 쓰기를 예쁘게 고쳐준다
• 그런데 규칙 없이 나열된 속성들을 일관되게 포맷팅을 하고 싶은 욕구가 생겨서 찾아보았다
• 이런 것들은 직접 하는 것보다는 도구의 도움을 받는 게 훨씬 좋다고 생각한다

prettier-plugin-style-order

• (참고) 나는 scss로 작업했다

1
2
3
4

yarn add -D prettier-plugin-style-order

// postcss-scss 도 인스톨 하라고 메시지가 나옴
yarn add -D postcss-scss

• 이렇게 패키지를 설치하고,
• fonmat on save 옵션이 켜져 있다면,
• 아무 css 파일에서 저장을 해보면 순서가 아름답게 정렬되는 것을 알 수 있다
• 기존에 작업하던 것들을 일괄적으로 포맷팅 하고 싶다면
• npm script에 prettier 명령어로 원하는 경로의 css파일들을 지정해서 일괄 포맷팅 한다
• "cssSort": "prettier --write src/**/*.scss"

생각

• 이전에는 항상 css를 주먹구구 중에서도 주먹구구로 작성해왔는데,
• 그러지 않을 수 있겠다

• css property order, css property sort 이런 식으로 검색을 했었는데
• stylelint 등 여러 가지 css를 정렬하는 도구들이 있는 것 같았다
• 그런데 prettier을 사용하고 있기 때문에, 다른 거 쓰지 말고 prettier에서 플러그인을 깔아서 해결해 보자 하여 prettier-plugin-style-order를 설치해서 사용해 보았다

참고

• https://9elements.com/css-rule-order/
• https://github.com/brandon-rhodes/Concentric-CSS/blob/master/style3.css
• https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/

1
2
3
4
5
6
7
8
9
10

.example {
  /* df */
  display: flex;

  /* jcc */
  justify-content: center;

  /* aic */
  align-items: center;
}

• 짧게 쓰고 자동완성 시킨다
• 자동완성 시키고 ctrl + enter 로 새로운 라인으로 이동하여 이어서 작성한다

• number type 일 때, 기본으로 화살표가 나온다
• 이거를 없애보자

1
2
3
4

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

더 좋은 방법

• css all

참고

• https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp

Fresh Background Gradients | WebGradients.com 💎

• 예쁜 그라디언트 복붙해 오는 곳
• png 이미지 또는
• css 쉽게 가져올 수 있다

1
2
3
4
5
6
7
8

.gradient {
  background-image: linear-gradient(
    45deg,
    #ff9a9e 0%,
    #fad0c4 99%,
    #fad0c4 100%
  );
}

em

• 상위 요소 기준

rem

• 최상위 요소 html 기준

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<style>
  html {
    height: 100vh;
  }

  body {
    height: 100%;
  }

  .flexbox-container {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
  }

  .flexbox-item {
    background-color: #ddd;
  }
</style>

<div class="flexbox-container">
  <div class="flexbox-item">hello world!</div>
</div>

1
2
3
4

.flexbox-container {
  justify-content: center;
  align-items: center;
}

• flex box로 수평수직 가운데 정렬하기