나는 CSS를 잘하지 못한다.border,margin 따위만 살짝 건드리면 되는데 요즘 새로운 것들은 거의 몰라요.그렇긴 하지만 전단 밭에서는 CSS 프레임을 사용하지 않고 CSS를 써서 외관을 조정하는 일도 있죠(화면과 관리 등).
저는 CSS에 대해 깊은 지식이 없지만 이런 것들을 알면 방법이 있을 거예요. 저는 일반적인 잡기장으로 필기를 하고 싶어요.

Layout

수평/수직 정렬

justify-content align-items미리 보기
Playgroundflex-start center
liveweave center center
liveweave flex-end center
liveweave flex-start flex-start
liveweave flex-start flex-end
liveweave
TL;DR
- 한 행flex-direction: row에서 컨텐츠 정렬
- justify-content에 수평 방향 지정
- align-items에서 수직 방향 지정하기

<div>
  <p></p>
  <p></p>
  <span></span>
  <input placeholder="input"/>
  <button>button</button>
</div>

/* コンテナ */
div {
  display: flex;
  flex-direction: row;
  /* justify-content: flex-start | center | flex-end; */
  /* align-items: flex-start | center | flex-end; */
}

/* 子要素間の左右マージン */
/* `*` が遅いらしいので実際使う時は button,p などに変更 */
div > * {
  margin: 0 0.3em;
}

가로 격자 레이아웃

TL;DR
- grid-template-columns: repeat(3, 30%) 30% 너비의 열 3개 만들기
- grid-template-columns: 100px 90px 80px열별로 폭을 지정할 수도 있습니다.
- grid-template-rows면 열이 아닌 행이 같을 수 있음

<div>
  <article><img src="https://picsum.photos/id/237/200/300"/></article>
  <article><img src="https://picsum.photos/id/1025/200/300"/></article>
  <article><img src="https://picsum.photos/id/1062/200/300"/></article>
</div>

div {
  display: grid;
  grid-template-columns: repeat(3, 30%);
  grid-gap: 3%;
}

Utility

드래그 앤 드롭을 통해 전체 요소 크기 조정

TL;DR
- resize 크기 조정 가능

  <header>
    <div>contents</div>
    <div>contents</div>
    <div class="resizable-h">resizable-h</div>
  </header>

  <nav class="resizable-v">resizable-v</nav>

.resizable-h {
  min-width: 10em;
  overflow: hidden; /* これがないとリサイズ効かない */
  resize: horizontal; /* 横方向のリサイズ */
  background: #516f8d;
}

.resizable-v {
  min-height: 10em;
  overflow: hidden; /* これがないとリサイズ効かない */
  resize: vertical; /* 縦方向のリサイズ */
  background: #516f8d;
}

dd의 빈 요소에서 기본적으로 연결 문자 보이기

TL;DR
- dd:empty 빈 컴포넌트를 결정합니다.

<dl>
  <dt>Artist</dt>
  <dd>Queen</dd>
  <dt>Title</dt>
  <dd>Made in Heaven</dd>
  <dt>Release date</dt>
  <dd></dd> <!-- 空要素 -->
  <dt>Review</dt>
  <dd>this is the best Album</dd>
</dl>

dd:empty::before {
  content: '-';
}

초점을 맞출 때 오류 알림 보이기

TL;DR
- focus-within div 태그에 "하위 요소에 초점이 있을 때"CSS
- focus-visible에서 포커스 루프 제거
- caret-color에서 구 색상 변경

<!-- FontAwesome 使用 -->
<div>
  <i class="fa fa-user"></i>
  <input type="text">
</div>

input {
  caret-color: red;
}

/* 子要素がフォーカスを持つ時に適用される CSS */
div:focus-within i {
  color: #f56161;
}
div:focus-within input {
  border: 1px solid #f56161;
}

/* 影つけて強調 */
input:focus {
  box-shadow: 2px 2px 2px 0 #f56161;
}

/* フォーカスリングを消す */
input:focus-visible {
  outline: none;
}

라이브러리 팝업 대화상자를 사용하지 않음

TL;DR
- <dialog> 설정
- document.getElementById("id").showModal()에서 대화상자 열기
-CSS에서 transition 사용하면 부스스한 느낌이 나요.

<dialog id="dialog">
  <!-- form がないとボタンが反応しないので必須 -->
  <form method="dialog">
    <p>これ便利じゃないですか?</p>

    <!-- button の value が dialog.returnValue になる -->
    <button value="yes">yes</button>
    <button value="no">no</button>
  </form>
</dialog>

<button id="trigger">Open dialog</button>

const $trigger = document.getElementById("trigger");
const $dialog = document.getElementById("dialog");

$trigger.addEventListener("click", () => {
  $dialog.showModal();
});

$dialog.addEventListener("close", () => {
  $result.value = $dialog.returnValue;
});

dialog {
  /* opacity 効かせるために display 必須 */
  display: block;
  opacity: 0;
}

dialog[open] {
  /* 2秒間かけて opacity を 0 > 1 に変化させる（フワッ） */
  opacity: 1;
  transition-property: opacity;
  transition-duration: 2s;
  transition-timing-function: ease;
}