티스토리 뷰

IT/IT 이것 저것

비전공자를 위한 HTML 기초

KS짱짱맨 2025. 4. 8. 10:22

 

1. HTML이 무엇인가요?

HTML은 웹페이지(인터넷에서 보는 페이지)를 만들 때 사용하는 약속이자 규칙이에요.

  • 예를 들어, 그림을 그릴 때는 붓, 물감, 캔버스 같은 재료가 필요하죠.
  • 웹페이지를 '그림'이라고 생각하면, 그 그림을 그릴 수 있는 '붓'이나 '물감' 같은 것이 HTML이라고 보면 돼요.

HTML은 “HyperText Markup Language”의 줄임말이지만, 너무 어려워 보이니 '웹페이지를 만드는 도구' 라고 기억하면 돼요.

참고서
https://developer.mozilla.org/ko/docs/Web/HTML/Element

 

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN

이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다. 필요로 하는 요소를 쉽게 찾을 수 있도록 기능별로 분류했으며, 각각의 요소 참조 페이지 사이드바에서는 사전 순

developer.mozilla.org

 

2. HTML의 기본 구조

HTML 문서는 보통 이렇게 생겼어요:

<!DOCTYPE html>
<html>
<head>
  <title>내 웹페이지 제목</title>
</head>
<body>
  <!-- 여기서부터 내용을 적어요! -->
  <h1>안녕하세요!</h1>
  <p>이것은 HTML 페이지입니다.</p>
  <!-- 여기까지 내용을 적어요! -->
</body>
</html>
  • <!DOCTYPE html>: "이 문서는 HTML이에요!" 라고 알려주는 문장.
  • **<html>**와 </html>: HTML 문서 전체를 감싸는 태그(상자).
  • **<head>**와 </head>: 웹페이지 제목이나 설정 정보를 적는 곳.
  • **<body>**와 </body>: 화면에 실제로 보이는 내용(글, 사진 등)을 적는 곳.

지금은 어떤 부분이 정확히 뭘 하는지 다 이해하지 못해도 괜찮아요.
“이런 틀이 있구나!” 정도만 기억해도 충분해요.

3. 태그(Tag), 클래스(Class), 속성(Attribute)란?

3.1 태그(Tag)란?

  • 태그는 웹페이지에서 무언가를 표시하거나 꾸밀 때 사용하는 명령어예요.
  • 태그는 **<태그이름>**으로 시작해서 **</태그이름>**으로 끝나요.
  • 예: <p>(문단), <h1>(큰 제목), <div>(나누어지는 상자) 등등.

예시

<p>여기는 문단(paragraph)을 표시하는 p 태그입니다.</p>
  • 이 코드를 브라우저(크롬, 엣지 등)에서 보면, "여기는 문단(paragraph)을 표시하는 p 태그입니다." 라는 글자가 문단 형태로 나타나요.

3.2 클래스(Class)란?

  • 클래스는 태그를 구분하거나 묶어서 스타일(색, 크기 등)을 줄 때 써요.
  • 예: 옷가게에서 '빨간 옷'을 모아놓고, '파란 옷'을 모아놓고 구분하는 느낌이에요.

예시

<p class="red-text">이 문장은 빨간색으로 꾸밀 거예요.</p>
<p class="red-text">이 문장도 빨간색으로 꾸밀 거예요.</p>
  • 여기서 class="red-text"라고 썼다면, 두 문장을 같은 그룹(클래스)으로 묶은 거예요.
  • 나중에 '빨간색으로!'라고 정해주면, red-text 클래스를 가진 모든 글자가 빨간색이 돼요.

3.3 속성(Attribute)란?

  • 속성은 태그에 있는 추가 정보예요.
  • 태그에 붙여서, 그 태그가 어떤 특징을 가져야 하는지 알려줘요.
  • 클래스도 사실 속성 중 하나지만, **클래스(class)**처럼 이름이 정해져 있는 것도 있고, href, src 같은 다른 속성도 있어요.

예시

여기를 누르면 다른 사이트로 이동해요!
  • **<a>**는 링크를 만드는 태그고, 그 안에 href라는 속성을 넣어줘서,
    "이 버튼을 누르면 어디로 이동할지"를 알려주는 거예요.

4. 자주 쓰는 주요 태그

  • <h1>, <h2>, <h3>...
    • 제목(글자)을 크고 진하게 보여줄 때 사용해요.
    • **<h1>**이 가장 큰 제목, 숫자가 커질수록(2, 3...) 글자가 조금씩 작아져요.
  • <p>
    • 문단(paragraph)을 표시하는 태그.
    • 글을 여러 줄로 표현할 때 사용해요.
  • <div>
    • 구역을 나누는 상자(box)라고 보면 돼요.
    • 화면을 여러 부분으로 구분할 때 자주 쓰여요.
  • <img>
    • 이미지를 보여주는 태그.
    • 예: <img src="그림파일주소.jpg" alt="그림 설명" />
  • <a>
    • 링크를 만드는 태그.
    • 예: <a href="https://주소">여기를 눌러 보세요</a>
  • <ul>, <li>
    • 목록(리스트)을 만들 때 사용.
    • **<ul>**은 목록 전체를 감싸고, **<li>**는 목록 안에 들어가는 각 항목을 나타내요.

예시:

<ul>
  <li>사과</li>
  <li>바나나</li>
  <li>딸기</li>
</ul>

 

 

 

  • <meta>
    • <meta> 태그는 웹페이지에 대한 정보를 브라우저나 검색엔진에게 알려줄 때 사용해요.
    • 보통 <head> 태그 안에 위치해요.
    • 예) <meta charset="UTF-8"> : “이 웹페이지는 UTF-8이라는 글자 인코딩 방식을 써요.”
    • 예) <meta name="description" content="이 웹페이지는 초등학생을 위한 HTML 설명입니다.">
    • 검색엔진(구글, 네이버)이 페이지를 더 잘 이해하도록 도와줘요.
  • 자주 쓰는 속성
    • charset: 웹페이지 글자 인코딩(글자를 어떻게 인식하는지)에 대한 정보
    • name: 어떤 정보를 담는지 나타낼 때 사용(ex. description, keywords 등)
    • content: name 속성에 대한 실제 내용
  • <form>
    • <form> 태그는 설문지나 회원가입 같은 입력 양식을 만들 때 사용해요.
    • 예) 이름을 적고, 이메일을 적고, 제출(Submit) 버튼을 누르면 서버로 보내는 기능 등.
  • 자주 쓰는 속성
    • action: 입력 내용을 어디(어떤 주소)로 보낼지 정해요.
    • method: 입력 내용을 어떻게 보낼지 정해요(보통 GET 또는 POST).

예시:

<form action="https://example.com/submit" method="POST">
  <!-- 입력칸, 버튼 등을 여기 넣어요 -->
</form>

 

 

  •  <input>
    • <input> 태그는 사용자(사람)가 직접 글자를 적거나, 옵션을 선택할 수 있게 하는 입력칸이에요.
    • 예) 이름칸, 비밀번호칸, 체크박스, 라디오버튼 등 전부 input으로 만들 수 있어요.
  • 자주 쓰는 속성
    • type: 이 입력칸이 어떤 종류인지 알려줘요. (예: "text", "password", "checkbox", "radio", "email" 등)
    • name: 이 입력칸의 이름(서버로 전송할 때 구분하기 위해 사용)
    • placeholder: 사용자가 입력하기 전에 미리 보여주는 안내 문구
    • value: 입력칸에 미리 적어둘 내용

예시:

<input type="text" name="username" placeholder="이름을 적어주세요" />
<input type="password" name="userpass" placeholder="비밀번호를 적어주세요" />

 

 

  •  <button>
    • <button> 태그는 클릭할 수 있는 버튼을 만들어요.
    • 버튼을 누르면 어떤 일을 할지(예: 폼 제출, 자바스크립트 실행 등)를 정해줄 수 있어요.
  • 자주 쓰는 속성
    • type: "button", "submit", "reset" 중 하나
      • "submit": <form> 안에서 입력된 내용(데이터)을 서버로 보내요.
      • "reset": 입력한 내용을 다 지워버려요.
      • "button": 특별한 기능 없이 단순 버튼(주로 자바스크립트와 함께 사용).

예시:

<button type="submit">제출하기</button>
<button type="reset">내용 지우기</button>

 

 

  •  <label>
    • <label> 태그는 <input> 같은 입력칸에 **이름표(라벨)**를 붙여 주는 태그예요.
    • 스크린 리더(시각장애인용 프로그램)나 접근성 향상에 좋아요.
    • <input>와 짝지어 쓸 때 for 속성을 사용해요.
  • 자주 쓰는 속성
    • for: 어떤 <input>의 id와 연결할지 정해요.

예시:

<label for="user-name">이름:</label>
<input id="user-name" type="text" placeholder="이름을 적어주세요" />

라벨의 for="user-name"과 입력칸 id="user-name"이 똑같으면, 라벨을 클릭해도 입력칸이 활성화돼요.

 

  •  <table>
    • <table> 태그는 표(테이블)를 만들 때 사용해요.
    • 그 안에 <tr>(table row: 가로줄)과 <td>(table data: 칸)을 넣어서 표현해요.
    • 제목 칸은 <th> 태그를 써요.
  • 자주 쓰는 속성
    • border: 테두리 두께 지정(HTML5에서는 보통 CSS로 테두리를 스타일링하지만, 예시로 알아두세요)
    • cellpadding, cellspacing: 칸 안쪽/칸 사이 여백 (역시 CSS로도 많이 조정함)
    • width, height: 표의 너비, 높이 (CSS로도 설정 가능)

예시:

<table border="1"> <!-- border="1"은 테두리를 보여주는 예시 -->
  <tr>
    <th>이름</th>
    <th>나이</th>
  </tr>
  <tr>
    <td>철수</td>
    <td>10</td>
  </tr>
  <tr>
    <td>영희</td>
    <td>9</td>
  </tr>
</table>

 

2. 각 태그별 속성 요약

아래 표는 태그와 자주 쓰는 속성을 한눈에 정리한 거예요.

태그 주요 속성 설명

<meta> charset, name, content 웹페이지 정보(글자 인코딩, 설명 등)
<form> action, method 입력 데이터를 어디로, 어떤 방식으로 보낼지
<input> type, name, placeholder, value 사용자 입력칸 종류(텍스트, 비밀번호, 체크박스 등), 이름, 안내 문구, 초기 값
<button> type (submit, reset, button) 클릭 가능한 버튼 만듦 (폼 제출, 내용 초기화 등)
<label> for 어떤 <input id="...">와 연결할지
<table> border, cellpadding, cellspacing, width 표(테이블)에 대한 테두리, 여백, 너비 등

 

 

5. 클래스와 속성, 무엇이 다를까?

  1. 클래스(class)
    • “이 태그들은 모두 한 그룹입니다!”라고 표시할 때 사용.
    • 여러 태그에 같은 클래스를 달 수 있어요.
    • 주로 디자인이나 스타일을 한꺼번에 적용할 때 씁니다.
  2. 속성(attribute)
    • “이 태그에 이런 추가 정보가 있어요!”라고 알려주는 것.
    • 클래스(class)도 속성 중 하나이고, 그 외에도 여러 속성들이 있어요.
    • 예: href (링크 주소), src (이미지 주소), alt (이미지 대체 문구), id (고유 이름) 등등.

정리

  • 클래스는 "여러 태그를 같은 이름으로 묶어, 공통된 스타일이나 성질을 적용하기 위함"
  • 속성은 "태그에 필요한 다른 정보(주소, 크기, 설명, ID 등)를 추가해 주는 것"

6. 마무리

이제 HTML이 어떤 역할을 하고, 태그, 클래스, 속성이 무엇인지 알았어요.

  • HTML: 웹페이지에 글, 그림 등을 나타내기 위한 규칙
  • 태그: HTML에서 글, 이미지, 링크 등을 표시하기 위한 기본 도구
  • 클래스: 여러 태그를 ‘그룹’으로 묶고, 한 번에 스타일(색, 크기 등)을 적용하기 위해 사용
  • 속성: 태그에 필요한 추가 정보(주소, 구분, 특징 등)를 적어주는 것

다음에 할 수 있는 공부

  1. CSS(웹페이지 꾸미는 방법)와 연결해서, 클래스(class)를 실제로 꾸며보세요.
  2. JavaScript(웹페이지를 움직이게 하는 방법)를 배워보면서, HTML과 어떻게 연결하는지 보면 좋아요.
728x90

'IT > IT 이것 저것' 카테고리의 다른 글

비전공자를 위한 JS기초  (1) 2025.04.08
비전공자를 위한 CSS 기초  (0) 2025.04.08
Figma_아이콘을 어떻게 바꿀까? (How to change Icon in instance)  (0) 2024.11.18
Django 시작하기  (1) 2024.03.27
Chat GPT API Document 공부 정리  (0) 2023.05.04
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
글 보관함
250x250