TIL

JS

select 태그 사용

const [fruit, setFruit] = useState(null);
const fruitOptions = ["사과", "바나나", "귤"];

function handleChange(e) {
  setFruit(e.target.value);
}

return (
  <select onChange={handleChange}>
    <option value={null}>과일을 선택해 주세요.</option>
    {fruitOptions.map((option) => {
      return <option value={option}>{option}</option>
    })}
  </select>
)

다음과 같이 코드를 작성했을 때, 아무 것도 선택하지 않는 경우 fruit에 그대로 null이 들어가길 바랐지만,
“과일을 선택해 주세요.”가 들어가는걸 확인했다.

<option value="">선택해 주세요.</option>
이렇게 빈 문자열로 value를 설정하니 원하는 대로 구현되었다.

select 태그 스타일링

기본 디자인을 초기화 시켜준 뒤, select 태그를 간단하게 스타일링했다.
그 중 화살표를 추가하는 것은 화살표 이미지를 backgroud에 입히는 방식이었다.
구글링을 하면 대표적인 코드가 나오지만, 그대로 따라해도 무조건 화살표가 나오지는 않는다.
나의 경우에는

background: no-repeat url("/img/selectArrow.png");
background-size: 6%;
background-position: 98% 60%;

이렇게 값을 주었을 때 원하는 결과물을 얻을 수 있었다.
select + option 태그 조합을 ul li 태그로 분리하여 스타일링 하는 방식도 있는 것 같다.

리액트에서의 select 초기값 사용

처음에는 selected를 이용해 구현했는데,
Warning: User the defaultValue or value props on <select> instead of setting selected on <option>.
다음과 같은 에러를 만났다.

리액트에서는 option 태그에 selected 어트리뷰트를 사용하는 대신에 select 태그에 value 어트리뷰트를 사용한다고 나와 있다.
초기값 조건을 바로 걸어줄 수 있어서 간단하다.

CSS

텍스트 수직 정렬이 가능한 `vertical-align`

텍스트 수직 정렬은 line-height를 맞추는 방법만 생각했었는데,
아이콘 옆에 두니 텍스트 가운데가 묘하게 맞지 않는 것 같다는 피드백을 보고 고민하다가 알게된 CSS 속성이다.

이 속성은 “inline 또는 table-cell box에서의 수직 정렬을 지정”한다고 되어있다.
span 태그(inline)를 사용해서 정렬이 가능한 것 같다.
아이콘 svg 자체에 포함된 여백 차이 때문에 완전히 정렬하긴 어렵지만,
line-height: middle;를 추가해서 아주 약간은 정렬에 도움이 되었다.

다음에 한번도 사용해보지 않은 display: table; 방식에 대해서도 공부해봐야겠다.

`input type=date`의 텍스트 중앙정렬

다양한 input을 사용하는 어느 form은 모두 텍스트 좌측 정렬이었다.
그런데 type=date인 input 값만 중앙정렬..너무 거슬려

input::-webkit-date-and-time-value {
  text-align: right;
}

다음과 같은 코드로 정렬을 재설정해줄 수 있었다.
date-and-time-value인걸 보니 type=time에도 해당되는 것 같다.

JS + CSS

웹폰트 사용하기

웹에서는 잘 적용된 폰트가, 모바일에서는 적용이 되지 않는다.
폰트를 적용하는 방식은 여러 가지가 있는 것 같다.

사용자 정의 폰트를 만드는 방식
1. 로컬에 저장된 폰트 불러오기
2. 웹 상의 폰트 불러오기
link 태그로 불러오는 방식
폰트가 정의된 스타일시트를 불러오는 방식

1-1. 로컬에 저장된 포트로 사용자 정의 폰트 만들기

@font-face {
  font-family: "CustomFont";
  src: url("path-to-font.woff2") format("woff2"),
       url("path-to-font.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

로컬에 .woff .ttf 같은 형식의 글꼴을 저장한 뒤 @font-face로 사용자 정의 폰트를 만드는 방식

1-2. 웹 상의 폰트를 불러와 사용자 정의 폰트를 만드는 방식

@font-face {
  font-family: "CustomFont";
  src: local("Custom Font"), /* Check for locally installed font */
       url("customfont.woff2") format("woff2"), /* Fallback font sources */
       url("customfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

1-1의 방식과 거의 같다.
여기서 url을 웹에서 제공하는 폰트로 변경할 수 있고, local() 옵션을 주면 설치 여부를 확인하여 미설치의 경우 url에서 가져올 수 있다.

link 태그로 불러오는 방식
```html

html의 `<head>` 태그 안에 삽입하는 방식  

3. 폰트가 정의된 스타일시트를 불러오는 방식
```css
@import url("https://fonts.cdnfonts.com/css/sf-pro-display");

@import 문은 css 스타일 코드 내부나, html <head>태그 내부에 <style> 태그로 감싸서 삽입할 수 있다.

각 방식에 대해서는 좀 더 차이에 대해 알아봐야겠다!
검색하다보니 폰트 로드로 인한 페이지 로딩 시간에 대한 우려가 많이 보였는데,
우리 웹은 폰트가 두개뿐이지만 좀 더 신경써서 최적화를 해봐야겠다.

TIL

JS