레슨
시작
학습 시작
CodeGym /행동 /Python SELF KO /HTML 입문

HTML 입문

Python SELF KO
레벨 29 , 레슨 0
사용 가능

1. HTML 태그

HTML이 뭐야?

HTML (HyperText Markup Language) — 이건 웹페이지를 만들고 구조화하기 위해 사용하는 마크업 언어야. HTML을 사용하면 다양한 태그와 속성을 이용해 페이지 내용을 조직할 수 있고, 브라우저가 정보를 어떻게 보여줄지 알 수 있어. 이 강의에서는 태그, 태그 트리, 속성, 단일 태그, 그리고 HTML 문서 구조 같은 HTML의 기본 개념을 다룰 거야.

HTML에서는 태그가 주요 요소인데, 내용물을 마크업할 수 있게 해줘. 태그는 텍스트와 다른 요소들을 감싸서 어떤 식으로 보여줄지 브라우저에게 알려주는 역할을 해. 예를 들어, <h1>과 <p> 태그는 브라우저에게 텍스트가 헤딩인지 아니면 단락인지 알려줘.

태그는 <> 꺽쇠 괄호 속에 작성해. 대부분의 태그는 시작 태그와 종료 태그로 나눠져 있어. 예를 들면:

HTML 
                      
                        <h1>이것은 헤딩</h1>
                        <p>이것은 텍스트 단락이야.</p>

여기서 <h1>은 시작 태그이고, </h1>은 종료 태그야.

태그 트리

HTML 문서는 계층 구조를 가지고 있는데, 태그가 서로 중첩되어 있어서 트리 구조를 형성해. 이 "태그 트리"는 페이지 요소들이 어떻게 연결되어 있는지 그리고 어떤 순서로 보여져야 하는지를 결정해.

간단한 태그 트리 예제는 다음과 같아:

Python 

<html>
<head>
  <title>페이지 예제</title>
</head>
<body>
  <h1>페이지 헤딩</h1>
  <p>여기 단락 텍스트가 있어.</p>
</body>
</html>

이 예제에서 <html> 태그는 루트 요소이고, 그 안에 <head>와 <body>가 있어. <body> 안에는 <h1>와 <p>들이 있어. 이 구조는 페이지 내용을 논리적으로 배열할 수 있게 도와줘.

속성

HTML 속성은 태그에 추가 정보를 제공하기 위해 사용돼. 이건 시작 태그에서 사용되며 이름과 값으로 이루어져 있어. 예를 들면:

HTML 

<a href="https://example.com">사이트 링크</a>
<img src="image.jpg" alt="이미지 설명">
  • href은 링크 주소를 지정해.
  • src — 이미지를 가리키는 경로.
  • alt — 이미지를 로드하지 못했을 때 대신 보여주는 텍스트야.

속성을 사용하면 요소에 id (id), 클래스 (class), 스타일 (style) 등 여러 특징을 추가할 수 있어.

단일 태그

특정 HTML 태그는 내부 내용이 없고 닫는 태그가 필요 없어. 이런 태그를 단일 태그라고 불러. 예를 들어, <img> 태그는 이미지를 삽입하는 데 사용되고 구조는 다음과 같아:

CSS 
  
    <img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.codegym.cc/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="이미지 설명">
HTML 
  
    <img src="image.jpg" alt="이미지 설명">

다른 단일 태그 예시:

  • <br> — 줄 바꿈.
  • <hr> — 가로선을 추가해.

2. HTML 문서 입문

HTML 문서는 <!DOCTYPE html> 선언으로 시작하고, 이건 브라우저에게 HTML5 문서라는 것을 알려줘. 다음은 루트 태그 <html>이고, 그 안에 <head>와 <body>가 있어. <head>에는 문서의 메타데이터 (제목, 스타일, 스크립트)가 있고, <body>에는 페이지의 주요 내용이 있어.

HTML 문서 예제

Python 
      
        <!DOCTYPE html>
        <html lang="ko">
        <head>
          <meta charset="UTF-8">
          <title>내 첫 페이지</title>
        </head>
        <body>
          <h1>환영합니다!</h1>
          <p>이건 HTML 문서 예제야.</p>
          <a href="https://example.com">우리 사이트를 방문하세요</a>
        </body>
        </html>
  • <!DOCTYPE html>은 브라우저에게 문서가 HTML5라고 알려줘.
  • <html lang="ko">는 문서의 언어를 지정해.
  • <meta charset="UTF-8">은 문자 인코딩을 설정해서 문자들이 제대로 표시되게 도와줘.
  • <title>은 페이지 제목을 설정해, 브라우저 창 상단에 보여.

<head> 안에 추가 태그

<head> 태그는 페이지에 직접적으로 표시되진 않지만, 사이트 작동에 중요한 정보를 포함해. <head> 안에 추가할 수 있는 태그들은 다음과 같아:

  • <meta name="description" content="페이지 설명"> — 검색 엔진용 페이지 간략한 설명.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> — 사이트를 모바일 디바이스에 적응 가능하게 만들어.
  • <link rel="stylesheet" href="styles.css"> — CSS 파일을 연결해.
  • <script src="script.js"></script> — 외부 JavaScript 파일 연결.

이런 태그들은 사용자와의 상호작용을 개선하고, 검색 엔진에 최적화하며 필요한 리소스를 연결하는 데 도움을 줘.

코멘트
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION