HTML 기초

728x90

1. HTML(HyperText Markup Language)

HTML은 웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어이다. 웹 브라우저의 여러 내용 중에서 제목과 본문, 이미지, 표 등 웹 요소를 알려주는 역할을 한다.

2. 기본 문법

속성

속성은 태그의 부가적인 기능을 정의하는 것으로 선택사항이다. 시작 태그 내부에 정의하며 여러 속성을 작성할 때는 공백으로 각 속성을 구분한다.

<태그명 속성="값">콘텐츠</태그명>
<태그명 속성="값" 속성="값" />

주석

웹브라우저에는 표시되지 않는 코드로, 주로 코드에 대한 메모를 남기기 위해 사용된다.

<!-- 주석의 내용 -->

3. HTML 문서 기본 구조

<!DOCTYPE html>: 문서의 타입을 지정
<html>: HTML 파일의 시작과 끝을 표시. lang 속성으로 문서에서 사용할 언어를 지정할 수 있음
<head>: 문서의 정보를 기입하는 부분. 웹 브라우저 화면에는 표시되지 않음
- <meta>: 웹 문서와 관련된 정보(메타데이터)를 지정. 검색엔진이 페이지를 검새갈 때 참고할 수 있고 검색 결과에 반영할 수 있음
  - 일반적으로 문자 세트, 페이지 설명, 키워드, 작성자 및 뷰포트 설정을 지정하는 데 사용
  - charset 속성: 화면의 글자를 표시할 때 어떤 인코딩을 사용할지 지정
  - name 속성: 문서 정보
  - content 속성: 메타데이터 내용
  - http-equiv: 콘텐츠 속성 정보에 대한 http 헤
- <title>: 문서의 제목. 웹 브라우저의 제목 표시줄에 표시
<body>: 문서의 내용을 표시하는 부분

<!DOCTYPE html>
<html>

<head lang="ko">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="author" content="홍길동">
  <meta name="description" content="연습용 페이지">
  <meta name="keywords" content="공부, HTML, 실습">
  <title>문서의 제목</title>
</head>

<body>
  화면에 표시될 내용
</body>

</html>

4. 태그

(1) 텍스트

<p>: 하나의 문단을 표시. 문단과 문단 사이에 여백 발생
<hn>: 제목 표시.n은 1~6 사이의 숫자이고 숫자가 클수록 텍스트 크기가 큼
<hr>: 텍스트 사이 구분선
<br>: 줄바꿈.

html의 텍스트는 엔터를 이용한 줄바꿈을 무시하고 스페이스를 이용한 공백을 한 번씩만 허용한다. 따라서 줄을 바꿀 때는 <br> 태그를 사용하고 공백을 두 번 이상 표시할 때는   를 사용한다.

<body>
  <h1>고&nbsp;&nbsp;양&nbsp;&nbsp;이</h1>
  <hr>
  <h3>기본 정보</h3>
  <p>고양이는 포유류 식육목 고양이과의 동물이다.</p>
  <hr>
  <h3>식성</h3>
  <p>육식동물이지만, <br>
    <br>
    <br>
    등푸른 생성은 주지 않는 게 좋다.
  </p>
</body>

인라인 텍스트 요소

블록 레벨 요소: 자기가 속한 영역의 너비를 모두 차지
인라인 요소: 필요한 만큼의 공간만 차지

<mark>: 형광펜 효과
<strong>: 텍스트를 굵게 표시
<em>: 이탤릭체(기울기체)
<q>: 인용구
<s>: 취소선

<body>
  <h1>텍스트 요소 특징</h1>
  <p>그 다음 요소는 옆이 아닌 아래에 표시된다.(블록 요소)</p>
  <strong>스트롱 텍스트 요소(인라인 텍스트)</strong>
  <mark>마크 텍스트 요소</mark>
  <em>이엠 텍스트 요소</em>
  <s>취소선</s>
  <p>
    블록 레벨 요소의 안에는 
    <q>인라인 요소</q>가 포함되기도 한다.
  </p>
</body>

(2) 컨테이너

컨테이너 요소는 콘텐츠나 레이아웃에 영향을 주지 않고 여러 요소를 묶어 관리하기 편하게 만드는 역할을 한다.

<div>: 블록 레벨 컨테이너
<span>: 인라인 컨테이너

(3) 이미지

<img src="이미지 파일 경로" alt="대체용 텍스트">

대체 텍스트는 이미지가 로딩되기 전이나 로딩에 실패한 경우 표시되고, 화면 낭독기가 대신 읽어주는 텍스트이다.

이미지의 크기를 조절하는 width, height 속성을 추가할 수도 있다.

  <img src="./img/cat.jpg" alt="고양이" width="300">

너비나 높이 중 하나만 지정하면 다른 속성은 원래 이미지의 비율을 자동으로 계산해 표시한다.

  <img src="./img/cat.jpg" alt="고양이" width="300" height="400">

(4) 링크

href 속성을 파일이나 링크로 연결한다. target 속성을 사용하면 새로운 탭에서 열지 결정할 수 있다.

  <!-- 현재 탭에서 열기 -->
  <a href="https://www.naver.com/" target="_self">Naver</a> 
  <hr>
  <!-- 새로운 탭에서 열기 -->
  <a href="https://www.naver.com/" target="_blank">Naver</a>

(5) 목록

<ol>: 순서 있는 목록
- start 속성: 시작 번호를 설정할 수 있음
- type: 기호 타입을 설정할 수 있음(숫자, 영어 대소문자, 로마 숫자 대소문자)
<ul>: 순서 없는 목록
<lli>: 목록의 항목. 항목을 무엇으로 감싸느냐에 따라 기호가 달라짐

위 태그 모두 블록 레벨 요소이다.

<body>
  <h1>과일</h1>
  <ul>
    <li>오렌지</li>
    <li>바나나</li>
    <li>사과</li>
    <li>배</li>
  </ul>
  <h1>채소</h1>
  <ol start="2" type="a">
    <li>양파</li>
    <li>당근</li>
    <li>청경채</li>
    <li>배추</li>
  </ol>
  <hr>
  <h1>반려동물의 특징</h1>
  <ul>
    <li>강아지</li>
    <ul>
      <li>귀엽다</li>
      <li>사랑스럽다</li>
    </ul>
    <li>고양이</li>
    <ul>
      <li>귀엽다</li>
      <li>도도하다</li>
    </ul>
  </ul>
</body>

(6) 표

<table>: 하나의 표. 표의 시작과 끝을 알림
<caption>: 표의 제목. 표의 위쪽 중앙에 표시됨
<tr>: 행
<th>: 제목 행
<td>: 셀

표의 구조 명확하게 표현하기: 코드 유지 보수가 편해지고 웹 접근성도 향상된다.

<thead>: 제목이나 주제
<tbody>: 본문
<tfoot>: 요약이나 맺음말

<body>
  <table border="1">
    <caption><strong>마라톤 참가선수 명단</strong></caption>
    <thead>
      <tr>
        <th>한국선수</th>
        <th>일본선수</th>
        <th>미국선수</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>김철수</td>
        <td>오오다</td>
        <td>제임스</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>세계랭킹 5위</td>
        <td>세계랭킹 8위</td>
        <td>세계랭킹 2위</td>
      </tr>
    </tfoot>
  </table>
</body>

(7) 폼 태그

<input>

사용자 입력을 받는다.

type 속성: 입력 형태를 지정. 대표적으로 text(기본값), email, password, search, date 등이 있음
placeholder 속성: 입력란에 적당한 힌트 내용 표시

<label>

입력 요소에 라벨을 붙인다. 웹 이용자에게 더 직관적인 입력 요소를 제공하며, 코드의 가독성이 향상된다.

<label> 태그는 2가지 방법으로 사용할 수 있다.

태그 안에 폼 요소를 넣는다.
id 속성을 이용해 라벨 태그와 폼 요소를 연결한다.

<body>
  <h1>로그인 해주세요</h1>
  <label>아이디
    <input type="text" placeholder="아이디">
  </label>

  <label for="pw">비밀번호</label>
  <input type="text" id="pw" placeholder="비밀번호">
</body>

  <label><input type="checkbox">제육</label>
  <label><input type="checkbox">돈까스</label>
  <label><input type="checkbox">국밥</label>

<select>

여러 옵션을 포함할 수 있는 드롭다운 목록을 만든다. <option> 태그를 사용해 목록의 항목을 추가한다.

<select> 태그 속성

multiple 속성: 둘 이상의 항목을 선택
size 속성: 화면에 표시될 항목의 개수 지정

<option> 태그 속성

value 속성: 서버에 넘겨줄 값을 지정
selected 속성: 기본적으로 선택된 항목 지정

  <h2>음료를 고르세요</h2>
  <select multiple size="2">
    <option value="coffee">커피</option>
    <option value="coke" selected>콜라</option>
    <option value="water">물</option>
  </select>

<textarea>

여러 줄의 텍스트를 입력받을 수 있다. cols, rows 속성으로 대략의 크기를 지정한다.

  <h2>원하는 음료를 써주세요</h2>
  <textarea cols="20" rows="5"></textarea>

<progress>

작업의 진행 정도를 나타낼 때 사용한다.

max 속성: 작업량 지정
value 속성: 화면에 표시할 진척도 지정

  <h2>준비 상태는 아래와 같습니다.</h2>
  <progress max="100" value="80"></progress>

<button>

<input> 태그의 버튼 타입으로 만든 것과 외형은 같지만 <button> 태그를 이용하여 폼을 전송하거나 리셋하는 버튼을 삽입할 수 있다.

  <h2>추가 용무 시 호출해주세요</h2>
  <button>호출</button>
  <input type="button" value="호출">

<fieldset>

하나의 폼 안에서 구역을 나누어 표시할 때 사용한다.

<legend>

<fieldset> 태그로 묶은 그룹에 제목을 붙인다.

  <fieldset>
    <legend>음료 주문</legend>
    
    <h2>음료를 고르세요</h2>
    <select multiple size="2">
      <option value="coffee">커피</option>
      <option value="coke" selected>콜라</option>
      <option value="water">물</option>
    </select>

    <h2>원하는 음료를 써주세요</h2>
    <textarea cols="20" rows="5"></textarea>
  </fieldset>

<form>

폼을 만드는 태그로, 태그 사이에 여러 폼 요소를 넣는다.

method 속성: 클라이언트가 입력한 데이터를 어떻게 전송할지 지정. get 또는 post
action 속성: 입력값을 전송할 서버의 url
name 속성: 각 입력 요소에 추가하여 각 항목의 역할을 구별

  <form action="none.com" method="post">
    <label for="name">이름</label>
    <input type="text" id="name" name="name">
    <br>
    <label for="age">나이</label>
    <input type="number" id="age" name="age">
    <br>
    <label for="character">성격</label>
    <textarea id="character" name="character"></textarea>
    <br>
    <input type="submit">
  </form>

(8) 시맨틱 태그

HTML의 태그는 이름만 봐도 그 의미를 알 수 있어 시맨틱 태그라 한다.

시맨틱 태그를 사용하는 이유)

코드의 가독성 향상
검색 엔진 최적화 개선: 검색 엔진이 페이지의 구조를 잘 이해하고 중요한 콘텐츠를 더 잘 인식한다.
웹 접근성 향상: 화면 낭독기가 페이지의 의미를 더 쉽게 파악할 수 있다.

대표적인 시맨틱 태그는 다음과 같다.

<header>: 헤더 영역
<nav>: 네비게이션 영역
<main>: 주요 콘텐츠
<article>: 독립적인 콘텐츠
<section>: 콘텐츠 영역
<aside>: 사이드 바 영역
<footer>: 푸터 영역

5. 전역 속성

모든 HTML 태그에서 공통으로 사용할 수 있는 속성이다.

id: 요소에 고유한 이름을 부여하는 식별자 역할
class: 요소를 그룹으로 묶을 수 있는 식별자 역할. 여러 요소에 같은 클래스를 적용할 수 있고 하나의 요소에 여러 클래스를 적용하는 것도 가능.
style: 요소에 적용할 CSS 스타일 선언
title: 요소의 추가 정보를 제공. title 속성을 적용한 요소에 커서를 올리면 툴팁이 나타남.

<body>
  <div id="cat">
    <p class="text">고양이는</p>
    <p class="text cute">귀엽다</p>
  </div>
  <div id="dog">
    <p class="text">강아지도</p>
    <p class="text cute">귀엽다</p>
  </div>
  <p title="툴팁 제공">타이틀 속성 예시</p>
</body>

Mini Project 1) 프로필 페이지 만들기

<!DOCTYPE html>
<html>

<head lang="ko">
  <meta charset="UTF-8">
  <title>티니핑의 프로필</title>
  <style>
    ul li {
      list-style: '🌸';
    }
  </style>
</head>

<body>
  <h1 title="하츄핑의 프로필 페이지">하 츄 핑</h1>
  <img src="./img/teenie.webp" alt="하츄핑" width="300">

  <div id="introduce">
    <p>💖 <strong>안녕! 난 사랑의 요정, 하츄핑이야!</strong> 💖</p>
    <p>하츄~! 만나서 반가워! 😊 나는 "쥬로링 동물탐정"에서 온 사랑의 요정, 하츄핑! ✨<br>
      내 이름처럼 사랑과 따뜻한 마음을 전하는 게 내 역할이야!
    </p>
  </div>
  <hr>
  <div id="fun-facts">
    <h2>내 특징!</h2>
    <p>
    <ul>
      <li>말버릇: <strong>"하츄~!"</strong></li>
      <li>특징: 둥글둥글한 핑크색 몸, <mark>반짝</mark>이는 날개 ✨</li>
      <li>성격: 사랑스럽고 다정해! 친구들을 돕는 걸 좋아해!</li>
      <li>능력: <em>사랑의 마법</em>으로 사람들의 마음을 따뜻하게 만들어! 💖</li>
    </ul>
    </p>
  </div>
  <hr>
  <span>&copy; 하츄핑</span>
</body>

</html>

Mini Project 2) 설문조사 양식 만들기

<body>
  <header>
    <h1>설문조사 양식</h1>
    <p>모든 항목에 빠짐없이 체크해주십시오.</p>
  </header>
  <hr>

  <main>
    <form>
      <fieldset>
        <legend>개인정보</legend>
        <label for="name">이름</label>
        <input type="text" id="name" name="name" placeholder="본명을 입력하세요">
        <br>
        <label for="email">이메일주소</label>
        <input type="text" id="email" name="email" placeholder="메일 주소를 쓰세요">
      </fieldset>

      <fieldset>
        <legend>설문</legend>
        <p>연령대가 어떻게 되십니까?</p>
        <input type="radio" id="teen" name="age">
        <label for="teen">10대</label>
        <input type="radio" id="twenty" name="age">
        <label for="twenty">20대</label>
        <input type="radio" id="thirty" name="age">
        <label for="thirty">30대</label>
        <input type="radio" id="fouty" name="age">
        <label for="fouty">40대</label>
        <input type="radio" id="fifty" name="age">
        <label for="fifty">50대</label>
        <input type="radio" id="other" name="age">
        <label for="other">그 외</label>

        <p>학원 선택 시 그 기준은 어떻게 되시나요?</p>
        <input type="checkbox" id="position" name="academy">
        <label for="position">위치</label>
        <input type="checkbox" id="price" name="academy">
        <label for="price">학원비</label>
        <input type="checkbox" id="teacher" name="academy">
        <label for="teacher">강사</label>
        <input type="checkbox" id="infra" name="academy">
        <label for="infra">시설</label>
      </fieldset>

      <fieldset>
        <legend>기타 의견</legend>
        <textarea rows="3" cols="30" name="comment"></textarea>
      </fieldset>

      <input type="submit">
    </form>
  </main>
  <hr>

  <footer>
    <p>입력하시느라 수고하셨습니다.</p>
  </footer>
</body>