화면 크기에 따라 텍스트 변경하기

프로젝트를 하던 도중 데스크탑에선 잘 보이던 텍스트가 모바일 화면에선 줄바꿈이 되어 보기 불편해지는 현상이 발생한 경험이 있습니다.

이를 해결하기 위해 after를 활용한 예시를 보여드리겠습니다.

 

📌 ::after

• CSS에서 요소의 맨 마지막 자식으로 또 다른 하나의 요소를 만들어 줍니다.
• 요소에 장식용 콘텐츠를 추가할 때 자주 사용됩니다.

 

📌 코드 구현

<!-- HTML -->
<table>
  <tbody className="store-table-data">
    <tr>
      <td className="store-vegetable-data">
        <span></span>	<!-- 이 부분에 style을 적용할 것입니다. -->
      </td>
    </tr>
  </tbody>
</table>

/* CSS */
.store-vegetable-data > span::after {	/* 모바일 화면일 때 적용됩니다. */
  content: "채식";
  font-size: 0.97em;
  padding: 1px 5px;
  border-radius: 12px;
  border: 1px solid var(--main-color);
}

@media screen and (min-width: 800px) {	/* 데스크탑 화면일 때 적용됩니다. */
  .store-vegetable-data > span::after {
    content: "채식 가능";
    font-size: 1.05em;
  }
}

after는 content라는 속성이 필수로 사용됩니다. 즉 텍스트를 사용하지 않는다 하더라도 무조건 써줘야 합니다.

이제 원하는 텍스트를 content의 값으로 주면 화면에는 해당 텍스트가 보여집니다.

 

 

📌 결과

데스크탑 화면

 

모바일 화면

HTML에 텍스트를 넣지 않고 CSS만으로 쉽게 원하는 텍스트를 표현할 수 있습니다.