JAN's History

HTML 기초부터 심화까지 본문

html,css

HTML 기초부터 심화까지

JANNNNNN 2024. 8. 28. 21:14

최근 프론트엔드쪽으로 인턴을 하고 있어서 HTML,CSS,JavaScript 부분을 차근차근 공부해볼 생각이다..!!

1. HTML 태그 이해하기: Start Tag와 End Tag

1.1 Void 요소

Void 요소는 종료 태그(End Tag)가 필요 없는 요소입니다. 이들은 보통 단일 태그로 사용되며, 자체적으로 내용을 포함하지 않습니다. 예를 들어 <br>(줄바꿈) 또는 <img>(이미지 삽입) 태그가 있습니다.

<img src="image.jpg" alt="Sample Image">
<br>

⭐ 중요: Void 요소는 자체 종료 태그가 없기 때문에 닫는 슬래시( / )를 사용하지 않는 것이 일반적입니다. 예를 들어 <img />와 같은 형태는 XHTML에서는 사용되었으나, 최신 HTML에서는 사용하지 않습니다.

1.2 Content와 Element

Content는 태그 사이에 있는 실제 콘텐츠(텍스트, 이미지 등)입니다. Element는 Start Tag와 End Tag, 그리고 그 사이에 위치한 콘텐츠를 모두 포함하는 구조를 말합니다.

<p>This is a paragraph.</p>

위 예제에서 <p>는 요소(element)이고, This is a paragraph.가 콘텐츠(content)입니다.

1.3 Attribute

**Attribute(속성)**는 HTML 요소에 추가 정보를 제공하는 역할을 합니다. 속성은 항상 Start Tag 안에 위치하며, 속성 이름과 값이 쌍으로 이루어집니다. 대표적인 예로 id, class, src, href 등이 있습니다.

<a href="https://www.example.com" target="_blank">Visit Example</a>

위 예제에서 href와 target이 속성(attribute)이며, https://www.example.com과 _blank가 그 값입니다.

⭐중요: 속성은 요소의 동작과 스타일을 정의하는 데 중요한 역할을 합니다. 잘못된 속성 값은 예상치 못한 결과를 나타낼 수 있으므로 주의가 필요합니다.

2. HTML 요소 분류하기

2.1 인라인 요소와 블록 요소

  • 인라인 요소(In-line Element): 콘텐츠가 줄을 바꾸지 않고 같은 라인에 위치합니다. 대표적인 예로 <span>, <a>, <img> 등이 있습니다.
<p>This is a <span>highlighted</span> text.</p>
  • 블록 요소(Block Element): 콘텐츠가 새로운 줄에서 시작합니다. 대표적인 예로 <div>, <p>, <h1> 등이 있습니다.
<div>
    <h1>Title</h1>
    <p>This is a paragraph.</p>
</div>

⭐중요: 인라인 요소와 블록 요소의 차이를 이해하면 CSS를 활용하여 레이아웃을 구성할 때 유리합니다.

3. 콘텐츠 모델 이해하기

HTML 요소들은 크게 다양한 콘텐츠 모델로 분류됩니다. 각각의 모델은 특정한 역할과 특징을 지니고 있습니다.

  • Metadata content: 페이지나 다른 요소의 메타데이터를 포함하는 요소입니다. 예를 들어 <title>, <meta> 태그가 있습니다.
  • Flow content: 거의 모든 요소가 여기에 해당합니다. 예를 들어 <div>, <p>, <ul> 등이 있습니다.
  • Sectioning content: 페이지의 구조를 나누는 요소로, 웹 페이지를 논리적으로 구분합니다. 예를 들어 <section>, <article>, <nav> 등이 있습니다.
  • Heading content: 섹션의 제목을 나타내는 요소입니다. 예를 들어 <h1>부터 <h6>까지가 있습니다.
  • Phrasing content: 텍스트와 그 텍스트의 역할을 나타내는 요소입니다. 예를 들어 <span>, <strong>, <a> 등이 있습니다.
  • Embedded content: 외부 콘텐츠를 삽입할 때 사용하는 요소입니다. 예를 들어 <img>, <iframe>, <video> 등이 있습니다.
  • Interactive content: 사용자와의 상호작용을 포함하는 요소입니다. 예를 들어 <a>, <button>, <input> 등이 있습니다.

⭐중요: 각 콘텐츠 모델을 이해하면, 적절한 HTML 요소를 선택하여 의미론적이고 접근성 높은 웹 페이지를 작성할 수 있습니다.

4. HTML 문서 골격 만들기

HTML 문서는 일반적으로 다음과 같은 골격을 가집니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a sample HTML document.</p>
</body>
</html>

DOCTYPE

<!DOCTYPE html>은 해당 문서가 HTML5 표준을 따름을 선언하는 태그입니다.

html 요소

<html> 요소는 HTML 문서의 루트 요소(root element)로, 모든 내용이 이 요소 안에 포함됩니다.

head 요소

<head> 요소는 문서의 메타데이터를 포함하며, 보통 제목(<title>)과 메타 태그(<meta>), 스타일(<style>) 등이 이 안에 위치합니다.

body 요소

<body> 요소는 실제로 화면에 표시되는 콘텐츠를 포함합니다. 웹 페이지의 텍스트, 이미지, 동영상 등이 여기에 위치합니다.

⭐중요: HTML 문서의 구조는 논리적이며 표준화된 방식으로 구성되어야 합니다. 이는 SEO와 접근성, 유지 보수성에서 큰 영향을 미칩니다.

5. 시맨틱한 HTML 작성하기

**시맨틱(Semantic)**한 HTML은 코드의 의미를 정확히 표현하는 태그를 사용하는 것입니다. 시맨틱 태그는 검색 엔진과 스크린 리더가 페이지의 구조와 내용을 더 잘 이해할 수 있게 돕습니다.

예시 태그들

  • <h1> ~ <h6>: 페이지의 제목과 소제목을 정의합니다.
<h1>Main Title</h1>
<h2>Subtitle</h2>
  • <header>: 문서나 섹션의 머리말을 나타냅니다.
<header> <h1>Welcome to My Website</h1> </header>
  • <footer>: 문서나 섹션의 바닥글을 나타냅니다.
<footer> <p>© 2024 My Website. All rights reserved.</p> </footer>
  • <main>: 문서의 주요 콘텐츠를 나타냅니다.
<main> <article> <h2>Article Title</h2> <p>This is the main content of the article.</p> </article> </main>
  • <article>: 독립적으로 구분되는 콘텐츠를 나타냅니다.
  • <section>: 논리적으로 구분되는 섹션을 나타냅니다.
    • article과 유사하지만, 페이지의 단일 부분을 그룹화 하는 데에 유용합니다. 예를들어 기사의 헤드라인을 모으거나, 각 블로그의 피드 정보가 나타나는 형식으로 사용됩니다.
    • 요소의 콘텐츠를 함께 묶는 것이 합리적일때 <article> 다신 <section> 요소를 사용하는 것이 좋습니다.
  • <aside>: 예시로 광고, 인용같은 본문과는 별도로 관련된 콘텐츠를 나타냅니다.
  • <nav>: 내비게이션 링크를 그룹화할 때 사용됩니다.

⭐중요: 시맨틱 태그를 사용하면 코드가 더 읽기 쉬워지고, 검색 엔진 최적화(SEO)에 도움이 됩니다.

6. SEO 최적화하기

HTML 문서를 작성할 때 SEO(Search Engine Optimization)를 고려하는 것은 매우 중요합니다. 검색 엔진은 시맨틱한 HTML과 구조화된 데이터를 바탕으로 웹 페이지를 더 잘 이해하고 색인합니다.

중요한 SEO 요소들

  • Title: <title> 태그는 검색 엔진 결과 페이지(SERP)에서 웹 페이지의 제목으로 표시됩니다. 제목은 페이지의 내용을 명확하게 나타내야 합니다.
<title>Introduction to HTML Basics</title>
  • Meta Description: <meta name="description"> 태그는 검색 결과에서 페이지에 대한 요약을 제공합니다. 150자 이내로 작성하며, 주요 키워드를 포함하는 것이 좋습니다.
<meta name="description" content="Learn the basics of HTML, including tags, elements, and semantic markup.">
  • Header Tags: <h1>부터 <h6>까지의 헤더 태그는 콘텐츠의 계층 구조를 명확하게 표현합니다. 중요한 키워드는 적절한 헤더 태그에 포함하는 것이 좋습니다.
  • Alt Text: 이미지 태그(<img>)의 alt 속성은 이미지에 대한 설명을 제공합니다. 이는 검색 엔진이 이미지를 이해하고 색인화하는 데 도움을 줍니다.
<img src="html-basics.png" alt="HTML Basics Illustration">
  • URL 구조: 간단하고 이해하기 쉬운 URL 구조는 검색 엔진과 사용자 모두에게 유리합니다.
https://www.example.com/html-basics
  • Internal Linking: 관련된 콘텐츠 간에 내부 링크를 제공하여 사이트 구조를 명확히 하고, 사용자와 검색 엔진이 페이지를 탐색하기 쉽게 만듭니다.
<a href="/advanced-html">Advanced HTML Concepts</a>

⭐중요: SEO는 단순히 키워드를 포함하는 것에 그치지 않습니다. 페이지의 구조, 콘텐츠의 품질, 시맨틱 마크업 등이 모두 고려되어야 합니다.

'html,css' 카테고리의 다른 글

CSS 선택자, 박스 모델에 대해서 알아보자  (1) 2024.10.02
헷갈리기 쉬운 HTML 태그 총 8가지 비교!  (1) 2024.09.12
시맨틱 태그와 <div> 태그의 사용방법  (1) 2024.09.09
HTML 태그와 기능  (3) 2024.09.07
CSS 웹 디자인의 기본부터 심화까지  (0) 2024.08.30
'html,css' Related Articles more