[CSS] 토스트를 만드는 5가지 방법

 

 

📄 HTML

<!-- 토스트 -->
<div class="test-content">
    <p class="test-title">Toast</p>
        <button @click="showToast">
          토스트 띄우기
        </button>
    <div class="toast" :class="isShowToast && 'isShow'">
      <i>
        <img :src="require('@/assets/check-mark.png')">
      </i>
      <p class="toast__text">토스트 문구입니다. 두 줄 짜리 토스트 문구입니다. 토스트 문구입니다.</p>
    </div>
</div>

 

 

---

 

 

 

방법 1. inline을 사용한다.

#test-area {
  .toast {
    position: fixed;
    left: 10px;
    right: 10px;
    top: 350px;
    padding: 20px 24px;
    background-color: #2f2f2f;
    border-radius: 16px;

    i {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 10px;
      line-height: 28px;
      letter-spacing: -0.2px;
      vertical-align: middle;

      > img {
        width: 100%;
        height: 100%;
      }
    }

    &__text {
      display: inline;
      color: #fff;
      font-size: 16px;
      line-height: 28px;
      vertical-align: middle;
    }
  }
}

 

방법 2. float을 사용한다.

#test-area {
  .toast {
    position: fixed;
    left: 10px;
    right: 10px;
    top: 350px;
    padding: 20px 24px;
    background-color: #2f2f2f;
    border-radius: 16px;

    i {
      float: left;
      width: 20px;
      height: 20px;
      margin-right: 12px;
      line-height: 1.05;

      > img {
        width: 100%;
        height: 100%;
      }
    }

    &__text {
      display: inline;
      padding-left: 30px;
      color: #fff;
      font-size: 16px;
      line-height: 28px;
      letter-spacing: -0.2px;
    }
  }
}

 

 

 

---

 

 

 

방법 1. inline-block으로 지정 후 width에서 아이콘크기 + 여백을 뺀다.

#test-area {
  .toast {
    position: fixed;
    left: 10px;
    right: 10px;
    top: 350px;
    padding: 20px 24px;
    background-color: #2f2f2f;
    border-radius: 16px;

    i {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 10px;
      line-height: 28px;
      letter-spacing: -0.2px;
      vertical-align: middle;

      > img {
        width: 100%;
        height: 100%;
      }
    }

    &__text {
      display: inline-block;
      width: calc(100% - 30px);
      color: #fff;
      font-size: 16px;
      line-height: 28px;
      vertical-align: middle;
    }
  }
}

 

방법 2. flex를 사용한다.

#test-area {
  .toast {
    position: fixed;
    display: flex;
    align-items: center;
    left: 10px;
    right: 10px;
    top: 350px;
    padding: 20px 24px;
    background-color: #2f2f2f;
    border-radius: 16px;

    i {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 10px;
      line-height: 28px;

      > img {
        width: 100%;
        height: 100%;
      }
    }

    &__text {
      width: calc(100% - 30px);
      display: inline;
      color: #fff;
      font-size: 16px;
      line-height: 28px;
      letter-spacing: -0.2px;
    }
  }
}

 

방법 3. inline-block을 사용한다.

#test-area {
  .toast {
    position: fixed;
    left: 10px;
    right: 10px;
    top: 350px;
    padding: 20px 24px;
    background-color: #2f2f2f;
    border-radius: 16px;

    i {
      position: absolute;
      display: inline-block;
      top: 50%;
      width: 20px;
      height: 20px;
      margin-right: 10px;
      line-height: 28px;
      transform: translateY(-50%);

      > img {
        width: 100%;
        height: 100%;
      }
    }

    &__text {
      display: inline-block;
      padding-left: 30px;
      color: #fff;
      font-size: 16px;
      line-height: 28px;
      letter-spacing: -0.2px;
    }
  }
}

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.