HTML (스켈레톤)

Source: Dev.to

HTML: The Human Skeleton (우리 몸의 뼈대)

Structure is Everything (구조가 전부다)

우리 몸에는 근육(Muscles), 피부(Skin), 혈액 등 모든 것이 있기 전에 뼈대(Skeleton)가 먼저 존재합니다.
두개골(Skull)이 있는 곳에 뇌가 있습니다.
손뼈가 있는 곳에 손이 있습니다.

웹사이트에서도 마찬가지입니다:

• Header는 어디에 있어야 할까요?
• Footer는 어디에 있어야 할까요?
• Main Content는 어디에 있어야 할까요?

이를 결정하는 뼈대가 바로 HTML입니다.

HTML Tags as Body Parts (신체 부위와 태그)

(뇌)

이는 사람의 머리와 같습니다. 겉으로는 보이지 않지만, 웹사이트에 필요한 중요한 정보(설정) 모두가 이 안에 들어 있습니다.

(몸통)

이는 사람의 몸통과 같습니다. 웹사이트에서 눈에 보이는 모든 요소들(버튼, 이미지, 텍스트) 모두 이 안에 들어 있습니다.

(얼굴)

이는 여러분의 얼굴과 같습니다. 다른 사람에게 여러분을 식별시켜 주는 중요한 “Heading”입니다.

(발)

이는 사람의 발과 같습니다. 웹사이트의 가장 마지막 부분에 위치합니다.

HTML만 있다면 어떻게 될까요?

잠시 생각해 보세요, 사람 몸이 뼈만으로 움직인다면 어떨까요? 무섭겠죠!

• 그것은 보기에도 아름답지 않을 것입니다 (No CSS).
• 그래서 대화하거나 생각할 수도 없습니다 (No JavaScript).

하지만 그 뼈대(HTML) 없이는 사람도 살아갈 수 없듯이, HTML 없이는 웹사이트도 존재할 수 없습니다!

Example

<!-- Head (Heading) -->
<h2>I am the Face (Heading)</h2>

<!-- Torso (Content) -->
<h2>This is my Chest</h2>
<p>I am the skin and muscles (Content)</p>

<!-- Arms -->
<ul>
  <li>Left Hand</li>
  <li>Right Hand</li>
</ul>

<!-- Feet (Footer) -->
<footer>Standing on my Feet (Footer)</footer>

Explanation

“이 코드를 잘 살펴보세요! 사람 몸의 각 부위가 어떻게 구조를 가지고 있는지, 바로 그와 같은 방식으로 HTML도 작동합니다.”

The Whole Person

• The Head – 사람에게 머리(Head)가 얼마나 중요한지와 같이, 웹사이트에서는 이것이 바로 얼굴(헤드)이며, 여기에는 중요한 Title이 들어갑니다.
• The Body – 우리 몸의 몸통(Torso)처럼, 웹사이트의 주요 정보(Messages)가 이곳에 있습니다.
• The Arms – 우리 몸의 옆에 있는 팔처럼, 웹사이트의 사이드에 있는 링크나 버튼을 여기 배치할 수 있습니다.
• The Feet – 우리 몸을 지탱하는 발처럼, 웹사이트의 하단에 저작권 정보가 여기 들어갑니다.

Conclusion

“So, HTML은 웹사이트에 생명을 주는 것이 아니라, 웹사이트에 형태(Shape)를 부여하는 것입니다. 뼈대가 제대로 있으면 그 위에 CSS를 입혀 아름답게 만들 수 있습니다!”