HTML - 비추천 태그

안녕하세요, 웹 개발자 꿈나이들! 오늘 우리는 HTML의 흥미로운 측면을 탐구해볼 예정입니다: 비추천 태그와 속성들에 대해 말이죠. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 여정을 안내해드리는 것을 기쁘게 생각합니다. 그麼, 커피 한 잔 (또는 여러분의 좋아하는 음료)을 챙기고, HTML 요소들의 세상을 탐험해봅시다.

HTML - Deprecated Tags

비추천 태그는 무엇인가요?

이제 구체적인 내용으로 들어가기 전에, HTML의 맥락에서 "비추천"이 무슨 의미인지 이해해보겠습니다. 이는 웹이 말하는 것처럼, "감사합니다, 당신의 서비스에, 하지만 은퇴할 때가 되었습니다."라고 할 수 있습니다. 비추천 태그는 예전에는 흔히 사용되었지만, HTML의 최신 버전에서는 권장되지 않거나 더이상 지원되지 않는 요소들입니다.

그麼, 왜 이런 일이 일어나는 걸까요? 인터넷이 진화함에 따라, 우리는 더 나은, 더 효율적인 방법으로 콘텐츠를 구조화하고 스타일링할 수 있게 되었습니다. 휴대전화에서 스마트폰으로 업그레이드하는 것과 같은 이치입니다. 예전 것은 여전히 작동하지만, 새로운 것은 훨씬 더 많은 기능을 제공합니다!

HTML 비추천 태그

비추천 태그 중 가장 흔한 몇 가지를 살펴보겠습니다. 예시와 함께 어떻게 사용되었고, 지금은 어떻게 대체하는지 보여드리겠습니다.

`<center>` 태그

과거에는 텍스트를 중앙에 정렬하려면 <center> 태그를 사용했습니다. 이렇게 보입니다:

<center>이 텍스트는 중앙에 정렬되었습니다</center>

하지만 요즘에는 CSS를 사용하여 같은 결과를 얻습니다:

<p style="text-align: center;">이 텍스트는 중앙에 정렬되었습니다</p>

또는 별도의 CSS 파일에서:

.center-text {
text-align: center;
}

<p class="center-text">이 텍스트는 중앙에 정렬되었습니다</p>

`<font>` 태그

텍스트 스타일을 HTML에서 직접 변경할 때 <font> 태그를 자주 사용했습니다:

<font face="Arial" color="blue" size="3">이 텍스트는 파랑색 Arial 글꼴입니다</font>

이제는 CSS를 사용하여 모든 스타일링을 합니다:

<p style="font-family: Arial; color: blue; font-size: 16px;">이 텍스트는 파랑색 Arial 글꼴입니다</p>

`<big>`과 `<small>` 태그

이 태그들은 텍스트 크기를 변경하는 데 사용되었습니다:

<big>이 텍스트는 더 큽니다</big>
<small>이 텍스트는 더 작습니다</small>

최신 HTML과 CSS에서는 다음과 같이 합니다:

<span style="font-size: 1.2em;">이 텍스트는 더 큽니다</span>
<span style="font-size: 0.8em;">이 텍스트는 더 작습니다</span>

HTML 비추천 속성

태그만이 아니라, 속성들도 비추천될 수 있습니다! 몇 가지 예시를 보겠습니다.

`align` 속성

우리는 이전에는 이미지를 다음과 같이 정렬했습니다:

<img src="cat.jpg" align="right" alt=" 귀여운 고양이">

이제는 CSS를 사용합니다:

<img src="cat.jpg" style="float: right;" alt=" 귀여운 고양이">

`bgcolor` 속성

배경색을 다음과 같이 설정한 적이 있을 겁니다:

<body bgcolor="lightblue">
여러분의 웹사이트에 오신 것을 환영합니다!
</body>

이제는 모두 CSS로 합니다:

<body style="background-color: lightblue;">
여러분의 웹사이트에 오신 것을 환영합니다!
</body>

비추천 태그와 속성을 피해야 하는 이유

브라우저 지원: 최신 브라우저는 이러한 오래된 태그와 속성을 지원하지 않을 수 있습니다.
의미 분리: 구조(HTML)와 스타일(CSS)을 분리하는 것이 좋습니다.
접근성: 많은 비추천 요소는 스크린 리더와 친화적이지 않습니다.
유지보수성: 현재 표준을 사용하면 코드를 업데이트하고 유지보수하기 더 쉬워집니다.

회상 여행: HTML 비추천 웹페이지

회상의 여정을 떠나 비추천 태그와 속성을 사용한 웹페이지를 만들어보겠습니다. 그런 다음, 이를 현대화해보겠습니다.

오래된 방법

<html>
<head>
<title>내 멋진 90년대 웹사이트</title>
</head>
<body bgcolor="cyan">
<center>
<font face="Comic Sans MS" size="6" color="purple">
여러분의 멋진 웹사이트에 오신 것을 환영합니다!
</font>
</center>
<hr width="50%" color="red">
<p><b>제 좋아하는 것들:</b></p>
<ul>
<li><font color="green">비디오 게임 하기</font></li>
<li><font color="blue">피자 먹기</font></li>
<li><font color="red">영화 보기</font></li>
</ul>
<p align="right"><i>방문해주셔서 감사합니다!</i></p>
</body>
</html>

현대적인 방법

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내 멋진 현대적인 웹사이트</title>
<style>
body {
background-color: cyan;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
color: purple;
}
hr {
width: 50%;
background-color: red;
height: 2px;
border: none;
}
.green { color: green; }
.blue { color: blue; }
.red { color: red; }
.right-align { text-align: right; }
</style>
</head>
<body>
<h1>여러분의 멋진 웹사이트에 오신 것을 환영합니다!</h1>
<hr>
<p><strong>제 좋아하는 것들:</strong></p>
<ul>
<li class="green">비디오 게임 하기</li>
<li class="blue">피자 먹기</li>
<li class="red">영화 보기</li>
</ul>
<p class="right-align"><em>방문해주셔서 감사합니다!</em></p>
</body>
</html>

결론

그렇게 우리는 시간을 거슬러 올라가, HTML의 야생의 시절에서 현재의 세련된 웹으로 이동했습니다. 과거의 태그와 속성을回顾하는 것은 재미있지만, 현재 표준을 따르는 것이 중요합니다.

마무리하면서, 비추천 태그와 속성을 요약한 표를 아래에 제공합니다:

비추천 태그/속성	현대적인 대체물
`<center>`	`text-align: center;` (CSS)
`<font>`	CSS 속성 (`font-family`, `color`, `font-size`)
`<big>`, `<small>`	`font-size` (CSS)
`align` 속성	CSS 위치 (`text-align`, `float`)
`bgcolor` 속성	`background-color` (CSS)

HTML을 배우는 것은 새로운 언어를 배우는 것과 같습니다. 시간이 걸리고, 연습과 인내가 필요합니다. 두려워하지 마세요! 실험하고 실수를 하세요 - 우리 모두 그렇게 배웠습니다! 계속 코딩하고, 창조하고, 가장 중요한 것은 즐기세요!

Credits: Image by storyset

이전 튜토리얼:

HTML - 문자 인코딩