HTML 편집하기 (부분)

==== CSS의 통치 시대 ====
현대의 HTML은 CSS없이는 아무것도 할 수 없다고 해도 과언이 아니다. 예전에는 HTML에서 직접 스타일을 지정하는 태그들이 있었다.

<tabber>
|-|HTML 코드=
<syntaxhighlight lang="html">
<!-- 90년대 스타일 -->
<font color="red" size="5">빨간 글씨</font>
<marquee>움직이는 글자!</marquee>

<!-- 현대 스타일 -->
<style>
/* 빨간 글씨 스타일 */
  .text-red {
    color: red;
    font-size: 1.5rem; /* 약 24px */
    margin-bottom: 20px; /* 움직이는 글자와 간격 */
  }

  /* 움직이는 글자 영역 */
  .animate-scroll-container {
    position: relative;
    width: 100%; /* 부모 요소의 너비 */
    overflow: hidden; /* 넘치는 부분 숨기기 */
    white-space: nowrap; /* 한 줄 유지 */
    height: 2rem; /* 높이 설정 */
    border: 1px solid #ddd; /* 시각적 영역 구분 (선택 사항) */
  }

  /* 움직이는 글자 애니메이션 */
  .animate-scroll {
    display: inline-block;
    white-space: nowrap;
    position: absolute;
    animation: scroll 5s linear infinite;
  }

  @keyframes scroll {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
</style>

<span class="text-red text-xl">빨간 글씨</span>
<div class="animate-scroll">움직이는 글자!</div>
</syntaxhighlight>
|-|결과=
<codepen>https://codepen.io/gaon12/pen/PwYEEQM</codepen>
</tabber>

marquee 태그는 글자가 좌우로 흘러가는 효과를 주는 태그였다. 90년대에는 이게 특별한 기능이라고 생각했지만, 지금 보면 그저 눈을 어지럽게 만드는 기능일 뿐이다. 참고로 이 태그는 HTML5에서 완전히 퇴출당했다.