Typography

:root {
	font-size: 62.5% // 기본 폰트 16px의 62.5% -> 10px
}

body {
  font-size: 1.4rem; // root의 font-size: 1.4배
}

사용자가 폰트설정에서 기본 폰트 사이즈를 바꿀 수 있기 때문에
고정 픽셀을 하면 사용자의 폰트 관련 속성을 무시하고 고정 값이 들어감

CSS 변수

:root {
  --font-ko: "Noto Sans KR", sans-serif;

  /* 전역 변수, 모든 input이 가지고 있는 초기의 스타일링 */
  --input-height: 44px;
  --input-fs: 1.4rem;
  --input-padding: 14px;
}

디자인 평준화

select,
input[type="text"],
input[type="password"],
input[type="email"] {

  display: block; /* block이 되더라도 */
  
  /* width: auto가 컨테이닝 블록 기준으로 가득차지 않는다. */
  width: 100%; /* 억지로 100% 때려 줘야 함! */

  /* 피그마 디자인을 참고하여 재조정 */
  height: var(--input-height);
  line-height: var(--input-height);

  /* 텍스트의 안정적인 표현을 위해 좌우 padding */
  padding: 0 var(--input-padding);
  
  /* width: 100%에 padding이 플러스 알파 됨 -> 고것을 막겠당. */
  box-sizing: border-box;
}

input 감싸는 field

✔️ html

<div>
		<label for="email">이메일을 입력 해주세요.	</label>
	<div class="field">
		<input name="email" id="email" type="email" />
	</div>
</div>
                
✔️ css

/* Commons */
.field {
  border: 2px solid #ddd;
  border-radius: 4px;
}

input 자체의 스타일을 커스텀을 하면 다양한 입력 필드 유형을 소화하기 어렵기 때문에 field를 임의로 추가해서 감싸준다.

✔️ html

<div>
	<label for="name">예약자의 성함을 알려 주세요.</label>
	<div class="field type_small">
       <input
           name="username"
           id="name"
           type="text"
           value="홍길동"
           readonly
           placeholder="성함 입력"
       />
	</div>
</div>

✔️ css

.field.type_small {
  --input-height: 32px;
  --input-fs: 1.1rem;
  --input-padding: 10px;
}

전역 변수값을 사용하지 않고 지역 변수를 사용한다.
.field.type_small 마크업 내에서 사용되는 지역 변수를 만들어 입력창 커스텀 (좀 작은 버전!)

has()

💡 :has()
input:focus 되었을 당시의 .field(부모)를 선택하여 스타일링!

❌ .field는 그냥 div라 :focus 가 안됨

➡️ input 자체를 커스텀하기보다 div로 감싸서 스타일링 하는 것이 좋은데 이것은 :focus가 안되므로 :has를 사용한다!!

.field:has(input:focus) {
  border-color: var(--color-primary);
}

하위에 있는 입력 input이 포커스 됐을 때를 체크해서 동작한다.

:focus-within

.field:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 6px rgb( 131 208 156 / .25 );
}

has()를 사용하는 것도 좋지만

현재 상황에서는 모든 input, textarea 등 입력 필드 전체 대상으로 해당 focus가 표현되어야 하기 때문에

focus전용으로 나온 :focus-within을 사용하는것이 합리적이다.

실습 - Catdog (애니메이션)

✔️ html

<div class="choice">
      <label class="choice-item">
        <input type="radio" name="favorite" />
        <span class="choice-item-icon">
          <img src="images/cat.png" />
        </span>
      </label>
      <label class="choice-item">
        <input type="radio" name="favorite" />
        <span class="choice-item-icon">
          <img src="images/dog.png" />
        </span>
      </label>
    </div>

✔️ css

.choice-item input:checked + .choice-item-icon img {
  transform: scale(1) translateY(0);
}

.choice-item-icon img {
  transition: all 0.4s;
  transform: scale(1) translateY(280px);
}

❗️ + 는 다음 마크업을 선택하는 것.
그래서 input 다음에 변화가 일어날 요소가 위치해있어야 한다. (아니면 동작 안됨)

인접 형재 콤비네이터는 다음 나오는 마크업 대상만 됨
그래서 :has

:has - 마크업을 마음대로 바꿀 수 없는 상황에서 쓰기 좋음