HTML 기초

3903 단어 htmlbasics

HTML이란 무엇입니까?



HTML은 HyperText Markdown Language의 약자입니다. 인터넷에서 보는 거의 모든 웹 페이지의 기본 부분입니다. 당신은 아마도 이것을 백만 번 들었을 것입니다. 그러나 이것은 본질적으로 웹사이트의 뼈대입니다. 그것은 웹사이트에 구조를 제공합니다.
Html은 페이지의 모양(CSS의 용도)이나 상호 작용(JavaScript의 역할)에 신경 쓰지 않고 단순히 웹 페이지의 내용을 구조화합니다.

기본 구문



이것은 기본 HTML 구문 코드 스니펫입니다.

<p>I'm a paragraph</p>

<p> 로 시작해서 </p> 로 끝나는 것을 볼 수 있습니다. 이를 HTML 태그라고 합니다. 잘라낸 전체 코드를 html 요소라고 합니다. html 파일은 이러한 요소로 구성됩니다. 이 특정 예는 2개의 태그가 있는 요소입니다.

요소에는 두 가지 유형이 있습니다. 닫는 태그가 있는 자동 닫힘 요소 및 요소.

<input type="text" />


자동 폐쇄 요소의 예.

의미론



Html로 작업할 때 의미 체계를 살펴보고 싶습니다. 의미론은 HTML5에서 정말 큰 주제입니다. 콘텐츠가 잘 구성되어 있다는 의미입니다.
웹 사이트에 머리글, 주요 부분 및 바닥글이 있다고 상상해보십시오. 이전 HTML에서는 div 라는 요소로 이를 수행합니다. 이것은 당신의 코드가 정말로 지저분하다는 것을 의미했습니다. HTML5는 코드 가독성 및 유지 관리뿐만 아니라 우수한 검색 엔진 최적화에도 유용한 시맨틱 태그로 이 문제를 해결합니다.

이것은 샘플 HTML 코드입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>
  <header>
    <h1>My website title</h1>
  </header>
  <main>
    <section>
      <h2>Section title</h2>
      <article>
        <h3>Article name</h3>
        <p>Article content</p>
      </article>
    </section>
  </main>
  <footer>
    <p>This is a website footer</p>
  </footer>
</body>
</html>


문서만 봐도 어떻게 구성되어 있는지 알 수 있습니다.

여기에서 MDN에서 comprehensive list of html elements을 찾을 수 있습니다.

간단



HTML은 완전한 프로그래밍 언어(JavaScript 또는 Python과 같은)가 아니기 때문에 배우기 매우 쉽습니다. 간단한 웹사이트 제작과 같은 기본적인 사용법은 약 2주 만에 익힐 수 있습니다.

Html in itself isn't that interesting. What is interesting, however, is combining it with CSS and JavaScript. Then you can make really nice, good-looking and interactive websites.



학습 리소스



HTML을 배우는 방법에 대한 훌륭한 리소스가 많이 있습니다. 개인적으로 흥미롭다고 생각되는 몇 가지만 나열하겠습니다.

  • Freecodecamp's Responsive Web Design Course 시작하기에 좋은 곳입니다.

  • The Odin Project Foundation Course HTML, CSS, JavaScript, 소스 제어 등을 가르칩니다.

  • Codecademy's Learn HTML Course (이건 해보지 않았지만 피드백이 좋다)

  • 여기에 더 게시할 계획이므로 계속 지켜봐 주시고 마음에 드시거나 변경해야 할 사항을 알려주세요.

    좋은 웹페이지 즐겨찾기