[HTML] 요약 정리

HTML에는 콘텐츠가 없는 문법과 콘텐츠가 있는 문법으로 나뉜다.

 

콘텐츠가 없는 문법

   태그 하나만 존재하고 시작 태그와 종료 태그의 구분이 없음.

 

콘텐츠가 있는 문법

   시작 태그와 종료 태그가 존재

• 블록 요소 : 줄 바꿈 되어서 출력되는 것
• 인라인 요소 : 줄 바꿈 되지 않고 출력되는 것

---

HTML 필수 태그

hn 태그

• 제목이나 주제와 같은 성격의 텍스트를 나타낼 때 사용하는 태그
• h1 ~ h6
• 단, 실무에서는 보통 h1 ~ h4 사용

p 태그

• 단락(문단, 문장)을 나타낼 때 사용하는 태그

br 태그

• 줄바꿈을 하기 위해서 사용하는 태그

blockquote & q 태그

• blockquote : 인용된 내용을 작성
• q : 짧은 인용문일 경우

<blockquote cite="">인용된 내용을 작성</blockquote>
<q cite="">짧은 인용문</q>

ins, del 태그

• ins : 어떠한 내용을 새롭게 삽입할 때 사용하는 태그
• del : 어떠한 내용을 삭제할 때 사용하는 태그

<ins>새롭게 삽입(추가)되는 내용</ins>
<del>기존에 있었지만 삭제되는 내용</del>

sub, sup 태그

• sub : 아래 첨자
• sup : 윗 첨자

<p> 공기의 원소 기호는 H<sub>2</sub>O입니다.</p>
<p>4<sup>2</sup>은 16입니다.</p>

div, span 태그

• 그룹을 짓기 위해 사용하는 태그
• div : 블록 요소나 인라인 요소 포괄적으로 그룹화할 때 사용
• span : 인라인 요소만 그룹화할 때 사용하는 태그

<div class="movie">
  <h2>영화 소개</h2>
  <p>영화 <span>소개</span>하는 페이지</p>
</div>

<div class="tv">
  <h3>TV 소개</h3>
  <p>TV 프로그램 <span>소개</span></p>
</div>

ul(unordered list) 태그

• 정렬되지 않은 리스트를 표시하는 태그
• li(list item)

<ul>
  <li>아이템 1</li>
  <li>아이템 2</li>
  <li>아이템 3</li>
</ul>

ol(ordered list) 태그

• 순서가 있는 리스트를 표시하는 태그
• li(list item)

<ol>
  <li>아침 먹기</li>
  <li>점심 먹기</li>
  <li>저녁 먹기</li>
</ol>

dl(definition list -> description list) 태그

• 어떠한 것을 설명할 때 사용하는 태그
• dt(description term), dd(description details) 태그 사용

<dl>
  <dt>HTML</dt>
  <dd>HTML은 HyperText Markup Language의 약자이다.</dd>
  
  <dt>CSS</dt>
  <dd>CSS는 Cascading Style Sheets의 약자이다.</dd>
</dl>

a(anchor) 태그

• 다른 문서 또는 내부의 다른 영역과 연결할 때 사용하는 태그
• target 속성을 _blank로 하면 새 탭으로 이동

<a href="http://www.naver.com" target="_blank">네이버</a>

img 태그

• src : 이미지의 경로
• alt : 이미지의 설명

<a href="https://pixabay.com/ko/illustrations/%EB%A7%88%EC%9D%8C-%EC%82%AC%EB%9E%91-%EB%A1%9C%EB%A7%A8%ED%8B%B1-%EB%A1%9C%EB%A7%A8%EC%8A%A4-9463310/" target="_blank">
        <img src="https://cdn.pixabay.com/photo/2025/03/11/22/58/hearts-9463310_1280.jpg" alt="하트">
    </a>

strong, em 태그

• strong : 문장을 강조할 때 사용 (굵게 표시)
• em : 단어를 강조할 때 사용 (기울여져서 표시)

<strong>경고! <em>관계자</em> 외 출입 금지</strong>

b(bold), i(italic) 태그

• 실무에서는 더 이상 사용하지 않음.

<b>경고! <i>관계자</i> 외 출입 금지</b>

---

폼(form)

• action : form에 입력한 요소들, 상호작용하는 요소들을 어떤 서버로 전송할지를 작성
• method : 그러한 데이터를 action 속성에 지정된 url로 전송하는 과정에서 어떠한 전송 타입으로 할지 지정하는 속성

input 태그

• 단일 태그로서 다양한 역할을 한다.

체크할 수 있는 체크 상호작용 입력

<input type="checkbox">

하나만 클릭할 수 있는 radio 요소

<input type="radio">

label 태그

• 상호작용 요소에 이름을 붙여준다.

한 줄 입력 요소

<label for="id">아이디:</label> <input type="text" id="id">

암호화되어서 입력

<label>비밀번호: <input type="password"></label>

fieldset 태그

• 상호작용 요소를 그룹화하는 태그

legend 태그

• 그룹화한 fieldset의 이름을 지정하는 태그

<form action="" method="">
  <fieldset>
    <legend>기본 정보</legend>
    <label for="id">아이디: <input type="text" id="id"></label>
    <label for="pw">비밀번호: <input type="password" id="pw"></label>
  </fieldset>
  <fieldset>
    <legend>옵션 정보</legend>
    <label>가족관계: <input type="text"></label>
    <label>생년월일: <input type="text"></label>
  </fieldset>
</form>

textarea 태그

• 여러 줄의 text를 입력할 수 있다.

<textarea></textarea>

select box 태그

• select 라는 태그를 반드시 사용해야 한다.
• select 태그는 몇 가지의 속성이 존재한다.
  • size 속성 : select 박스에서 보여지는 개수
  • multiple 속성 : 1개 이상의 select 요소를 동시에 선택할 수 있다.
  • optgroup : select 타입 요소를 그룹화하기 위해 등장한 태그

<select>
  <optgroup label="성별">
    <!-- value 속성을 서버로 전송 -->
    <option value="male">남</option>
    <option value="female">여</option>
  </optgroup>
</select>

button 태그

• disabled : 클릭하지 못하게 비활성화하는 공통 속성

<button>안녕</button>
<button disabled>반가워</button>

기타 속성

• readonly : 볼 수만 있고 편집 불가능

<input type="text" readonly>

• maxlength : 지정된 숫자만큼만 입력 가능

<input type="text" maxlength="2">

• checked : 체크가 되어 있는 상태로 나옴

<input type="checkbox" checked>

• placeholder : 한 줄 입력 요소에만 사용 가능. 백그라운드에 연하게 적혀 있다.

<input type="text" placeholder="아이디">

---

Table(테이블)

표(table) :  2차원 격자 형태로 구성된 데이터를 의미

행(row), 열(column)이 만나는 쉘(cell)로 구성된다.

border

• 테두리 생김(CSS로 설정 가능해서 실무에서 사용하지 않음)

<table border="1"></table>

caption

• 만들려는 표의 제목 표시

<caption>가격표</caption>

tr

• 행

th(td)

• 열
• th : 제목 성격의 셀을 나타낼 때 (진하게 표시)

<thead>
  <tr>
    <th>번호</th>
    <th>상품명</th>
    <th>수량</th>
    <th>가격</th>
  </tr>
</thead>
<tfoot>
  <tr>
    <td>총 금액</td>
    <td colspan="3">2,500원</td>
  </tr>
</tfoot>
<tbody>
  <tr>
    <td>1</td>
    <td>콜라</td>
    <td>1개</td>
    <td>1,500원</td>
  </tr>
</tbody>

• tbody 태그 전에 tfoot 태그가 작성되어야 한다.

---

Scope

제목 성격의 셀을 행과 열에 표현하고자 할 때 scope를 사용하여 분류를 하는 것이다.

<tbody>
  <table border="1">
  <caption>성적표</caption>
  <tr>
    <th scope="col">구분</th>
    <th scope="col">중간고사</th>
    <th scope="col">기말고사</th>
  </tr>
  <tr>
    <th scope="row">전공</th>
    <td>A+</td>
    <td>B+</td>
  </tr>
  <tr>
    <th scope="row">교양</th>
    <td>C-</td>
    <td>B+</td>
  </tr>
</table>

• colgroup : 2개의 열 범위 지정 가능
• 두 개 이상의 가로에 rowgroup으로 표현

---

시맨틱 태그

header 태그

• 웹 사이트의 헤더 영역을 나타낼 때 사용

<header></header>

nav 태그

• 웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 링크 영역

<nav></nav>

section 태그

• 웹 페이지에서 논리적으로 관련있는 내용과 영역을 나타낼 때 사용
• hn 태그를 하나 이상 반드시 사용

<section>
  <h2>제목</h2>
</section>

article 태그

• 웹 페이지에서 독립적으로 영역을 구분할 때 사용하는 태그

<article></article>

aside 태그

• 웹 페이지의 사이드 영역에서 정보를 나타낼 때 사용
• ex) 광고 배너 등

<aside></aside>

footer 태그

• 사이트의 마지막 부분을 의미

<footer></footer>

main 태그

• header와 footer 사이의 전체적인 중요한 컨텐츠 영역

<main></main>

---

멀티미디어 태그

<!-- 오디오 -->
<audio src="" controls></audio>

<audio controls>
  <source src="" type="audio/mp3">
</audio>

• controls 속성을 작성하지 않으면 아무것도 나오지 않음
• controls는 제어바이다.

<video src="" controls></video>

 

웹 브라우저마다 지원하는 영상(음악) 포멧과 지원하지 않는 영상(음악) 포멧이 존재한다.

---

글로벌 속성

글로벌 속성 : 태그의 종류와 상관 없이 모두 사용 가능한 속성

• class 속성 : 겹쳐도 괜찮음
• id 속성 : 하나의 html 문서에서 unique 해야 함.
• style 속성 : css 코드를 작성하기 위한 속성
• title 속성 : html 문서에 추가적 정보를 tool 태그 형태로 작성하기 위함
• hidden : html 요소가 화면에 가려짐
• lang 속성 : 언어의 text가 어떤 언어인지 표현

<body>
  <p class="red" id="red" style="" title="test" hidden="">p tag</p>
  <p class="red" id="red" style="" title="test" lang="en">p tag</p>
  <p class="red" id="red" style="" title="test" data-aa>p tag</p>
</body>