TIL 01 | placeholder, value 폰트 설정

상단바의 영역을 정확히 3등분하기

justify-content: space-between;
지금 하고 있는 클론 코딩에서는 space-between을 적용할 div가 3개인데 이 3개의 너비가 각각 다 다르다. 그래서 중간의 것이 딱 중앙에 위치하지 못하다는 문제가 있음.

해결

1. 3등분하기
각각 div의 너비를 33%로 설정후 justify-content: center;로 변경
: 왼쪽 div는 해결되었으나 가운데, 오른쪽 수정 필요

2. 가운데 div center 적용

  .status-bar__column:nth-child(2) {
    display: flex;
    justify-content: center;
  }

3. 오른쪽 div flex-end 적용

  .status-bar__column:nth-child(3) {
    display: flex;
    justify-content: flex-end;
  }

4. 오른쪽 div를 설정하고나니 오른쪽의 아이콘들 높낮이가 이상한 문제
: align-items: center; 추가 후 아이콘 사이 여백 조절을 위해 margin: 0px 5px; 추가. 그래도 배터리 아이콘이 높낮이가 이상하니 html에서 배터리 아이콘 크기 조절

CSS 폰트 설정

※ external css로 작업

1. vsc 기본 폰트 사용

body{
 font-family: ;
 }

2. 인터넷에서 font소스 따오기

• https://fonts.google.com/

@import칸의 <style> </style> 사이 값을 css 최상단에 복붙 (inline css가 아니고 external css여서). 이후 body를 열어 CSS rules to specify families를 복붙하면 된다. 이때, 폰트를 너무 많이 가져오면 웹사이트가 느려짐.

• https://noonnu.cc/

'웹폰트로 사용'을 보면 font-family가 있다. 얘를 css에 붙여넣은 후, 마찬가지로 body를 열어 font-family: ""를 입력하면 된다.

그런데...input의 placeholder나 value에는 font 적용이 안됨 😥

구글링을 해보니 같은 질문에 대한 여러 답변들이 있었는데 몇 가지만 이야기를 해보자면

(1) .class명::placeholder에서 font-family 설정

.class이름::placeholder {
  font-family: ;
}

문제점 : placeholder에만 적용됨. submit의 value에는 또 적용 안됨 별도의 조치 필요

(1-1) inline css로 html쪽에 style="font-family: '폰트'" 추가

<div>
  <input
    class="login-form__submit"
    style="font-family: 'Wemakeprice-Bold'"
    type="submit"
    value="Log In"
  />
</div>

이러니까 되긴되는데 external css로 작업하다가 inline css해서 찝찝..

(1-2) .class명 input[value="Log In"]{font-family:폰트;} 추가

.login-form input[value="Log In"] {
  font-family: cursive;
}

input의 value에도 폰트가 적용되었다. placeholder 따로 value 따로 적용되는듯? 한 번에 바뀌는 방법을 찾아봄

(2) body {font-family}에 * 추가

body * {
  font-family: ;
}

placeholder뿐만아니라 submit의 value까지 한번에 적용됨
문제점 : 이후 특정 부분만 다른 폰트로 변경해보려 하는데 변경 안됨 ㅎㅎ;; 없을땐 잘 변경 됐었는데..

(2-1) 가만 생각해보니 똑같은 방법으로 .class에 추가하면 되는거 아닌가 싶어서 해봄

.class명 * {
  font-family: ;
}

된다!!😂 body에 * 추가했을 때처럼 form외의 다른 특정 부분을 다른 폰트로 바꾸고 싶은데 못 바꾸는 것도 아니고, 잘 바뀌어짐. 해당 class에만 적용되는거니까 문제도 없을 것 같음. 만약 계속 만들어보다가 문제 발생하면 바꾸기로...