자주 사용하는 인라인 클래스, base class 만들기

인라인 클래스로 많이 사용하는 기본적인 클래스들을 정의해두자
나머지는 자주쓰는 클래스들은 mixin에서 생성해준다.

.w-100 {
  width: 100%;
}

.w-fit {
  width: fit-content;
}

/* display 속성과 flex */
.d-none {
  display: none;
}
.d-block {
  display: block;
}
.d-flex {
  display: flex;
}

.flex-row {
  display: flex;
  flex-direction: row;
}
.flex-start {
  display: flex;
  align-items: flex-start;
}
.flex-center {
  display: flex;
  align-items: center;
}
.flex-end {
  display: flex;
  align-items: flex-end;
}
.flex-start-between {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.flex-center-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.flex-center-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-center-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.flex-center-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* font 및 text */
.font-weight-400 {
  font-weight: 400;
}
.font-weight-500 {
  font-weight: 500;
}
.font-weight-600 {
  font-weight: 600;
}
.font-weight-700 {
  font-weight: 700;
}

.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-underline {
  text-decoration: underline;
}
.text-line {
  text-decoration: line-through;
}
.no-wrap {
  white-space: nowrap;
}
.pre-line {
  white-space: pre-line;
}
.cursor-pointer {
  cursor: pointer;
}
.position-relative {
  position: relative;
}

.border-top {
  border-top: 1px solid #000;
}
.border-bottom {
  border-bottom: 1px solid #000;
}