프론트엔드/HTML, CSS

HTML

Ryuzy 2024. 10. 24. 17:08
728x90
반응형

1. HTML

HTML(HyperText Markup Language)은 웹 페이지를 만들기 위한 표준 마크업 언어로, 웹 브라우저가 내용을 구조화하여 표시할 수 있도록 도와줍니다. HTML은 제목, 단락, 목록, 이미지, 링크 등 다양한 요소를 태그(Tag)를 사용해 정의하며, 웹 페이지의 뼈대 역할을 합니다. 단독으로는 디자인이나 동적인 기능은 제공하지 않지만, CSS로 스타일을 적용하고 JavaScript로 기능을 추가함으로써 풍부하고 인터랙티브한 웹 페이지를 구성할 수 있습니다. 웹 개발의 기본이 되는 핵심 언어입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML이란?</title>
</head>
<body>
    <!--
        HTML 주석문
        작성일: 2024-10-24
        작성자: 류정원
    -->
    안녕하세요! HTML 문서의 예시입니다.
</body>
</html>
  • <!DOCTYPE html>: 이 문서가 HTML5 표준이라는 것을 선언합니다.
  • <html>: 전체 HTML 문서의 루트(root) 요소입니다.
  • lang="ko": 문서의 기본 언어가 한국어임을 나타냅니다. 접근성, 검색 최적화, 사용자 경험 모두에 영향을 미치는 중요한 요소입니다.
  • <head>: 문서의 메타 정보(문자 인코딩, 제목, 외부 파일 링크 등)를 포함합니다.
  • <meta charset="UTF-8">: 한글을 포함한 다양한 문자가 깨지지 않도록 UTF-8 인코딩을 지정합니다.
  • <meta name="viewport" ...>: 모바일 환경에서도 잘 보이도록 반응형 설정을 도와줍니다.
  • <title>: 브라우저 탭에 표시될 제목을 정합니다.
  • <body>: 실제 화면에 표시될 콘텐츠가 들어가는 부분입니다.

 

📌 주석문

HTML 주석은 코드에 설명이나 메모를 추가할 때 사용하는 기능으로, 브라우저에 표시되지 않으며 코드의 가독성과 유지보수에 도움을 줍니다. 주석은 <!--로 시작하여 -->로 끝나며, 이 사이에 작성된 내용은 HTML 문서 안에 존재하지만 사용자에게는 보이지 않습니다. 예를 들어 <!-- 여기는 헤더 영역입니다 -->와 같이 사용하여 특정 부분의 용도나 수정 사항 등을 표시할 수 있으며, 일시적으로 코드를 비활성화할 때도 활용됩니다.

 

 

2. 텍스트 태그

1. Heading

Heading 태그는 HTML에서 제목을 나타낼 때 사용하는 태그로, <h1>부터 <h6>까지 총 6단계가 있습니다. <h1>은 가장 중요하고 큰 제목을 의미하며, 숫자가 커질수록 덜 중요한 소제목으로 간주되어 글자 크기도 작아집니다. 이 태그는 문서의 구조를 계층적으로 표현하는 데 사용되며, 스크린 리더나 검색 엔진도 이를 참고해 콘텐츠의 중요도나 순서를 파악합니다. 일반적으로 한 페이지에 <h1>은 한 번만 사용하고, 그 아래에 <h2>, <h3> 등을 이용해 논리적인 구조를 구성하는 것이 좋습니다.

 

2. <p>, <br>

<p> 태그는 HTML에서 문단(paragraph)을 나타내는 블록 요소로, 텍스트 콘텐츠를 구분하여 읽기 쉽고 구조적인 형태로 표현할 때 사용됩니다. <p> 태그는 한 문단을 의미하며, 자동으로 위아래에 여백(margin)이 적용되어 다른 요소와 시각적으로 구분됩니다. 줄바꿈을 위해 <br> 태그를 사용하는 것과 달리, <p>는 논리적인 텍스트 단락을 만들기 위한 태그로, 문서의 의미 구조를 구성하는 데 중요한 역할을 합니다.

 

3. <hr>

<hr> 태그는 HTML에서 수평선을 삽입할 때 사용하는 빈 요소(empty element)로, 주로 내용의 구분이나 전환을 시각적으로 나타내는 데 사용됩니다. 예를 들어, 주제를 나누거나 장면이 바뀌는 경우 등 문서 내에서 구획을 나눌 필요가 있을 때 <hr> 태그를 활용합니다. 이 태그는 자체적으로 닫는 태그가 필요 없으며(<hr>만 쓰면 됨), 기본적으로 브라우저는 얇은 회색 선으로 표시합니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Heading</title>
</head>
<body>
    <!-- Heading 태그 -->
    <!-- Heading 태그는 블록 태그 -->
     <h1>안녕하세요. Heading</h1> 여기에 글자를 쓰면 밑으로 내려가요
     <h2>안녕하세요. Heading</h2>
     <h3>안녕하세요. Heading</h3>
     <h4>안녕하세요. Heading</h4>
     <h5>안녕하세요. Heading</h5>
     <h6>안녕하세요. Heading</h6>
     일반 문자
     일반 문자
     일반 문자
     일반                 문자
     일반&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;문자
     일반 문자<br>
     일반 문자
     
     <hr>

    <!-- 문단 태그 -->
    <p>문단을 만드는 태그</p>일반 문자
    
    <hr>

    <!-- 서식 태그 -->
    <p><b>굵게</b> 표현하기</p>
    <p><strong>굵게</strong> 표현하기</p>
    <p><i>이탤릭체</i> 표현하기</p>
    <p><em>이탤릭체</em> 표현하기</p>
    <p><ins>밑줄</ins> 표현하기</p>
    <p><del>삭제</del> 표현하기</p>
    <p>x<sup>2</sup> + y<sup>3</sup> = z</p>
    <p>H<sub>2</sub>O</p>
</body>
</html>

 

HTML에서 태그는 크게 블록(Block) 태그와 인라인(Inline) 태그로 나뉘며, 이 둘은 화면에 표시되는 방식과 역할이 다릅니다. 아래는 두 태그의 차이를 비교한 표입니다.

 

 

3. 리스트 태그

1. <ul>

<ul> 태그는 HTML에서 순서 없는 목록(Unordered List)을 만들 때 사용하는 태그로, 보통 항목 앞에 ● 같은 기호가 붙는 리스트를 생성합니다. 이 태그는 반드시 하나 이상의 <li>(list item) 태그와 함께 사용되며, <ul>은 리스트 전체를 감싸고, <li>는 각 항목을 나타냅니다. 예를 들어, 쇼핑 목록이나 항목의 순서가 중요하지 않은 정보를 나열할 때 유용합니다. <ul>은 기본적으로 블록 요소이며, CSS를 사용해 기호 모양이나 들여쓰기를 조절할 수 있습니다. 문서를 구조화하고 가독성을 높이는 데 유용한 태그입니다.

 

2. <ol>

<ol> 태그는 HTML에서 순서 있는 목록(Ordered List)을 만들 때 사용하는 태그로, 항목 앞에 숫자(1, 2, 3...)나 문자(a, b, c...) 등의 순서 표시가 자동으로 붙습니다. <ul>과 마찬가지로 <li> 태그와 함께 사용되며, <ol>은 전체 목록을 감싸고 <li>는 각 항목을 나타냅니다. 순서가 중요한 절차, 단계, 순위 등을 나열할 때 유용하며, 기본적으로 블록 요소입니다.

 

3. <dl>

<dl> 태그는 HTML에서 설명 목록(Definition List)을 만들 때 사용하는 태그로, 용어와 그에 대한 설명을 짝지어 나타낼 수 있도록 구성된 목록입니다. 이 태그는 반드시 <dt>(definition term, 용어)와 <dd>(definition description, 설명) 태그와 함께 사용되며, <dl>이 전체 목록을 감싸고 <dt>와 <dd>가 한 쌍으로 사용됩니다. 예를 들어, 사전식 정의나 용어 설명, FAQ와 같은 구조를 표현할 때 적합합니다. <dl>은 일반적인 순서형 목록(<ol>, <ul>)과는 다르게 내용 간의 관계를 표현할 수 있는 구조화된 태그로, 웹 문서를 의미적으로 풍부하게 만드는 데 유용합니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>리스트 태그</title>
</head>
<body>
    <!-- 순서가 없는 태그 -->
    <ul>
        <li>김사과</li>
        <li>오렌지</li>
        <li>반하나</li>
    </ul>

    <hr>

    <!-- 순서가 있는 태그 -->
    <ol>
        <li>김사과</li>
        <li>오렌지</li>
        <li>반하나</li>
    </ol>

    <hr>

    <!-- 설명 목록 태그 -->
    <dl>
        <dt>류정원 선생님</dt>
        <dd>김사과</dd>
        <dd>오렌지</dd>
        <dd>반하나</dd>
    </dl>
</body>
</html>

 

 

4. 링크 및 미디어 태그

1. <img>

<img> 태그는 HTML에서 웹 페이지에 이미지를 삽입할 때 사용하는 태그로, 빈 요소(empty element)이며 닫는 태그 없이 단독으로 사용됩니다. 이 태그는 src 속성에 이미지 파일의 경로(주소)를, alt 속성에 이미지가 보이지 않을 때 대신 표시할 대체 텍스트를 지정합니다. 예를 들어 <img src="logo.png" alt="회사 로고">처럼 작성합니다. alt 속성은 접근성 향상과 SEO 최적화에도 중요한 역할을 하며, 이미지를 설명해주는 용도로 사용됩니다.

아래 압축 파일을 다운받고 위치에 맞게 이미지를 저장합니다.

images.zip
0.02MB

spring1.png
spring2.png
images/spring3.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이미지</title>
</head>
<body>
    <h2>이미지</h2>
    <img src="https://tcpschool.com/img/logo.png" alt="TCP스쿨 로고">
    <img src="C:\Ryuzy\HTML\spring1.png" alt="봄 이미지"> <!-- 사용하지 않음-->
    <hr>
    <img src="./spring2.png" alt="봄 이미지">
    <img src="./images/spring3.png" alt="봄 이미지">
</body>
</html>

 

📌 속성

속성은 태그에 추가적인 정보를 제공하여 요소의 동작이나 표현 방식을 제어하는 역할을 합니다. 속성은 태그의 시작 태그 안에 작성되며, 일반적으로 이름="값" 형태로 사용됩니다. 예를 들어 <img src="image.jpg" alt="설명">에서 src는 이미지 파일의 경로를, alt는 이미지에 대한 대체 텍스트를 지정하는 속성입니다. 이러한 속성은 HTML 요소의 스타일, 동작, 접근성 등을 조정할 수 있으며, 필요한 설정을 태그마다 다르게 지정할 수 있습니다.

 

💡 웹에서 사용 가능한 이미지 포멧

이미지 포맷에는 JPEG, PNG, GIF, SVG, WebP 등이 있으며, 각각의 포맷은 용도와 특성에 따라 다르게 사용됩니다. JPEG는 사진처럼 색상이 많고 복잡한 이미지를 압축해 저장하는 데 적합하며, PNG는 배경 투명도나 선명한 이미지 표현에 유리합니다. GIF는 짧은 애니메이션을 표현할 수 있고, SVG는 확대해도 깨지지 않는 벡터 이미지로 아이콘이나 로고에 적합합니다. 최근에는 이미지 품질을 유지하면서도 용량을 줄일 수 있는 WebP 포맷이 많이 권장되며, 빠른 로딩 속도와 최적화 측면에서 현대 웹사이트에서 널리 사용되고 있습니다.

 

✅ SEO 최적화

SEO 최적화는 Search Engine Optimization, 즉 검색 엔진 최적화를 의미합니다. 간단히 말해, 웹사이트나 웹페이지가 검색 결과에서 더 상위에 노출되도록 만드는 모든 작업을 SEO 최적화라고 합니다. 우리가 구글이나 네이버 같은 검색 엔진에 무언가를 검색하면, 수많은 결과 중 위쪽에 있는 사이트를 더 자주 클릭하죠? 검색 결과 상위에 노출되면 더 많은 방문자를 얻을 수 있어, 블로그, 쇼핑몰, 회사 홈페이지 모두 SEO가 매우 중요합니다.

 

2. <a>

<a> 태그는 HTML에서 하이퍼링크(hyperlink)를 생성할 때 사용하는 태그로, 웹 페이지에서 다른 페이지, 파일, 이메일 주소 또는 같은 페이지 내 특정 위치로 이동할 수 있도록 연결해주는 역할을 합니다. href 속성에 이동할 URL 또는 경로를 지정하며, 예를 들어 <a href='http://www.naver.com'>네이버로 이동하기</a>와 같이 사용합니다. <a>는 기본적으로 인라인 요소이며, 텍스트뿐만 아니라 이미지 등 다른 요소를 감싸 링크로 만들 수도 있습니다.

아래 압축 파일을 다운받고 위치에 맞게 html문서를 저장합니다.

html.zip
0.00MB

test1.html
pages/test2.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>하이퍼링크</title>
</head>
<body>
    <h2>하이퍼링크</h2>
    <!-- 절대 경로 -->
    <a href="https://www.naver.com/">네이버</a>
    <a href="https://tcpschool.com/"><img src="https://tcpschool.com/img/logo.png" alt="TCP스쿨 로고"></a>

    <!-- 상대 경로 -->
    <a href="./test1.html">테스트1</a>
    <a href="./pages/test2.html">테스트2</a>
</body>
</html>

 

 

 

 

728x90
반응형

'프론트엔드 > HTML, CSS' 카테고리의 다른 글

div와 span  (0) 2025.04.02
테이블 만들기  (0) 2025.04.02
CSS  (0) 2025.04.02
Visual Studio Code  (2) 2024.10.23
인터넷과 웹  (4) 2024.10.23

'프론트엔드/HTML, CSS'의 다른글

  • 현재글HTML

관련글

티스토리툴바