Front-End의 모든것/HTML

HTML 이란? - 기본 개념 및 구조 - 1

모두다레벨업 2024. 10. 12. 01:04
728x90
반응형

안녕하세요!

하루 하루 배우고자 하는 열정을 응원합니다!

(전 이미 나태해짐의 끝을 달리는가 봅니다...🦥)

 

먼저 프론트엔드 개발시 기본적으로 익혀야할 언어인

'HTML'에 대해서 설명하고자 합니다!

 

 

ⓒ Photography by pexels - https://www.pexels.com/

 

 

 

1️⃣ HTML이란?

HTML(Hypertext Markup Language)은 웹페이지의 구조와 내용을 정의하는 마크업 언어입니다.

웹 브라우저가 이 HTML 문서를 해석하여 사용자에게 시각적으로 보여주게 됩니다.

HTML은 **태그(tag)**로 구성되며, 각 태그는 문서의 다양한 요소(텍스트, 이미지, 링크, 동영상 등)를 정의합니다.

 

 

 

2️⃣ HTML의 기본 개념

  • 요소(Element): HTML의 가장 기본적인 단위로, 태그와 그 내용으로 구성됩니다. 예를 들어 <p>이것은 문단입니다.</p>는 <p> 태그로 시작하고, 내용이 있으며, </p> 태그로 끝납니다.
  • 태그(Tag): 요소를 정의하는 명령어로, <태그명> 형식으로 사용됩니다. <h1>, <p>, <div> 등이 대표적입니다.
  • 속성(Attribute): 태그에 추가 정보를 제공하는 것으로, 태그 안에 key="value" 형식으로 작성됩니다. 예를 들어, <img src="image.jpg" alt="이미지 설명">에서 src와 alt는 속성입니다.

 

 

 

3️⃣ HTML 기본 구조

HTML 문서는 보통 아래와 같은 기본 구조를 가집니다:

<!DOCTYPE html>
<html lang="ko">
<head><!-- 헤드 : 웹사이트의 정보를 입력하는 부분 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document Title</title>
</head>
<body>
    <header>
        <!-- 헤더: 페이지의 상단 부분 -->
        <h1>페이지의 제목이 들어갑니다.</h1>
    </header>

    <nav>
        <!-- 네비게이션: 상단메뉴(GNB), 좌측메뉴(LNB)나 링크를 배치하는 공간 -->
        <ul>
            <li><a href="#">홈</a></li>
            <li><a href="#">프로젝트</a></li>
            <li><a href="#">포트폴리오</a></li>
            <li><a href="#">문의사항</a></li>
        </ul>
    </nav>

    <main>
        <!-- 메인 컨텐츠: 웹사이트의 주요 내용이 위치하는 곳 -->
        <section>
            <h2>섹션 제목</h2>
            <p>이곳에 내용이 들어갑니다.</p>
        </section>
    </main>

    <footer>
        <!-- 푸터: 웹사이트의 하단 부분 -->
        <p>이곳에는 사이트맵, 푸터로고 등이 들어갑니다.</p>
    </footer>
</body>
</html>
 

기본 구조 설명:

  1. <!DOCTYPE html> : 문서가 HTML5로 작성되었음을 선언합니다.
  2. <html lang="ko"> : HTML 문서의 루트 요소로, lang="ko"은 문서의 언어가 영어임을 지정합니다. 한국어로 설정할 경우 lang="en"로 변경할 수 있습니다.
  3. <head> : 메타데이터를 정의하는 부분으로, 문서 제목(title), 문자 인코딩(charset), 뷰포트 설정, 외부 리소스 연결(CSS, JavaScript) 등을 포함합니다.
  4. <meta charset="UTF-8"> : UTF-8 문자 인코딩을 사용하여 다양한 언어의 문자를 지원하도록 설정합니다.
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0"> : 반응형 웹 디자인을 지원하기 위해 뷰포트를 설정합니다.
  6. <title>Document Title</title> : 웹 브라우저 탭에 표시될 문서 제목을 정의합니다.
  7. <body> : 웹페이지의 실제 콘텐츠가 들어가는 부분입니다. 사용자가 보게 될 텍스트, 이미지, 링크 등의 요소들이 이 안에 들어갑니다.

 

 

 

4️⃣ 주요 HTML 태그:

  • 텍스트 관련 태그
    • <h1> ~ <h6> : 제목을 나타내는 태그, 숫자가 작을수록 큰 제목.
    • <p> : 문단을 나타내는 태그.
    • <a> : 하이퍼링크를 정의하는 태그.
    • <img> : 이미지를 삽입하는 태그.
    • <ul>, <ol>, <li> : 목록을 정의하는 태그(순서 없는 목록, 순서 있는 목록).
  • 구조 관련 태그
    • <header> : 페이지나 섹션의 머리글 부분.
    • <nav> : 내비게이션 링크를 포함하는 부분.
    • <main> : 페이지의 주요 콘텐츠를 담는 부분.
    • <section> : 문서 내의 구역을 나타내는 태그.
    • <footer> : 페이지나 섹션의 바닥글 부분.

※ https://www.w3schools.com/tags/default.asp 에 접속하시면 HTML 버전별 지원 및 브라우저 호환성 등 자세힌 정보를 확인하실 수 있어요!!

 

 

 

 

5️⃣ HTML의 중요한 특성

  • 웹 표준 준수: HTML은 웹 표준을 따르기 때문에 모든 브라우저에서 동일하게 작동하도록 설계되어야 합니다.
  • 반응형 웹 디자인 지원: CSS 및 JavaScript와 결합하여 모바일, 태블릿, 데스크톱 등 다양한 디바이스에서 잘 동작하는 웹페이지를 만들 수 있습니다.

 

 

 

여기까지 HTML에 대해서 알아보았습니다!

 

 

HTML은 웹 개발의 기초이기 때문에,

이를 잘 이해하고 활용하는 것이 매우 중요합니다.

 

궁금한 사항이 있으시면 댓글로 달아주세요!

최대한 빠르고 정확한 정보로 회신드리도록 힘쓰겠습니다.

 

상황에 맞는 태그를 필요한 만큼만 잘 사용하여

마크업 고수가 되는 그날까지

응원하고 또 응원합니다!

728x90
반응형