코코아톡 클론코딩(7일차)

하루 빼먹었다.. 꾸준히 하는게 중요하니까 이런 걸로 괜히 스트레스받지 말자~~~

BEM 방식과, 다른 방식(id 등을 이용하는)을 같이 이용해보았는데. 코드를 직접 작성해보니, BEM 이 조금 더 코드를 작성하기에 편할 것 같다! 복잡하지 않고 단순해서 좋을 것 같아서 BEM 으로 작성을 해보자!!

@import "./reset.css";
@import "./status-bar.css";
@import "./variables.css";

body {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

.welcome-header {
  display: flex;
  text-align: center;
  margin: 90px 0px;
  flex-direction: column;
  align-items: center;
}

.welcome-header__title {
  margin-bottom: 20px;
  font-size: 25px;
}

.welcome-header__text {
  width: 60%;
  opacity: 0.7;
}

/* 여기까지가 BEM */

#login-form {
  display: flex;
  flex-direction: column;
  margin: 0px 30px;
}

#login-form input {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 15px 0px;
  font-size: 16px;
  margin-bottom: 15px;
}

#login-form::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

#login-form input:not([type="submit"]):focus {
  transition: border-color 0.3s ease-in-out;
  border-color: var(--yellow);
}

#login-form input[type="submit"] {
  background-color: var(--yellow);
  cursor: pointer;
  font-size: 14px;
  border-radius: 5px;
  border: none;
}

#login-form a {
  text-align: center;
  text-decoration: none;
  color: inherit;
  font-size: 15px;
}

“:” 과 “::”의 차이. → “:” 는 가상 클래스(pseudo-class)를 지정하는 것이라고 함. 이것보단 state 와 관련된 것으로 생각하면 좋을 것 같다. (focus 와 같은 것들) → “::” 는 가상 요소(pseudo-element)를 지정하는 것. attribute 와 관련된 것으로 생각해보자.(placeholrder 와 같은 것들)

  #login-form input:not([type="submit"]):focus {
    transition: border-color 0.3s ease-in-out;
    border-color: var(--yellow);
  }

위 코드는 BEM 방식을 사용하지 않고, 요소를 선택한 것이다. 나는 이것이 직관적이지 않아보여 BEM 을 사용하기로 했다!

  body {
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  }

  .test {
    text-align: center;
    font-size: 15px;
  }
  ```

```HTML
  <div>
    <span>asdf</span>
    <a href="#" class="test">asdfsdf</a>
  </div>

  body {
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    text-align: center;
  }

  .test {
    font-size: 15px;
  }

  <div>
    <span>asdf</span>
    <a href="#" class="test">asdfsdf</a>
  </div>

text-align 이 어떤 속성인지 이해가 잘 되지 않아서, 위 두가지 예시를 확인해보았다. div > a(class=“test”) 를 가운데 정렬로 만들고 싶었음. 그래서 첫 번째를 시도했는데 아무런 변화가 없었고, 두 번째 코드로 변경하니 가운데로 옮겨짐. → 찾아보니 text-align 은 block 요소 내부에 있는 inline 요소의 위치를 조정하는 것이라고 함. 정렬하기 원하는 요소에 직접 text-align 을 적용하는 게 아니고 block 요소인 부모에게 설정할 것! 뭐 div 로 가두면 걔만 설정할 수 있을듯??