HTML 편집하기 (부분)

=== 현대 웹 개발에서의 HTML ===
==== React와 Vue의 시대 ====
요즘은 순수 HTML만 쓰는 경우가 거의 없다. React나 Vue 같은 *프레임워크(혹은 라이브러리)*를 사용한다. 이런 도구들은 HTML을 자바스크립트 안에 넣어서 쓴다. 이걸 JSX라고 부른다(React 기준).

<syntaxhighlight lang="jsx">
function App() {
    return (
        <div>
            이게 HTML 같지만 사실은 JSX라는 녀석이다! 신기하지 않은가?
        </div>
    );
}
</syntaxhighlight>

이런 식으로 쓴다. 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에서 완전히 퇴출당했다.