HTML 요약 정리

Hyunsu·2023년 4월 23일

html

Today I Learned

목록 보기

33/37

대학교 때 전선으로 처음 들었던 html 과 css 를 다시 한 번 빠르게 복습하려고 한다.

당시 php 와 mysql 등을 이용해서 쇼핑몰 홈페이지 제작 팀플을 진행했었는데 프론트부터 백엔드까지 하나하나 만들어나가는 과정이 너무 재밌었던 기억이 난다.

아마 그 때 프로젝트를 진행하면서 웹 개발자를 하면 재미있을 것 같다고 생각했던 것 같다. html css 얘기를 하니까 서론이 길어졌지만

어쨌든 html 요약 정리를 해보자 📚

📝 목차

형식

기본 태그

스타일

목록

이미지 및 비디오

시맨틱 예제

폼 태그

테이블

1. 형식

html 의 기본 형식은 다음과 같다.

<!DOCTYPE html>
<html>
<head>
	<title>Document</title>
</head>
<body>
	<h1>hello world</h1>	
</body>
</html>

head 영역에는 문서의 정보를 담고 body 영역에는 문서의 내용을 담는다.

2. 기본 태그

기본 태그는 다음과 같다.

<h1></h1> ~ <h6></h6> : 제목 태그

<p></p> : 문단 태그

<div></div> : 문단 태그이며 용도에 맞는 태그가 없을 때 사용하는 것을 권장

<span></span> : 특정 영역을 꾸밀 때 주로 사용

H<sub>2</sub> : 아래 첨자

H<sup>2</sup> : 위 첨자

<br> : 개행

<hr>: 구분선

<p id="move"></p> : 아이디 설정

<a href="#move">click</a>: 해당 아이디로 이동

<a href="https://velog.io/" target="_blank">click</a> : 새 창 열어 링크 이동

abbr : 준말 표현

kbd : 키보드 표현

pre : 문자 그대로 표시

code : 코드 블록 표시

cite : 인용 블록 표기

3. 스타일

스타일 태그는 다음과 같다.

<strong></strong> : 글자 굵게 표시 및 음성 강조

<b></b>: 글자 굵게 표시

<em></em> : 글자 이탤릭체 표시 및 음성 강조

<i></i>: 글자 이탤릭체 표시

<mark></mark> : 형광펜 표시

4. 목록

목록 태그는 다음과 같다.

<!-- 순서 있는 목록 -->
<ol type="A">
  <li>HTML</li>
  <li>CSS</li>
</ol>

<!-- 순서 없는 목록 -->
<ul>
  <li>Java</li>
  <li>Oracle</li>
</ul>

<!-- 용어 정의 목록 -->
<dl>
  <dt>HTML</dt>
  <dd>마크업 언어</dd>
</dl>

5. 이미지 및 비디오

이미지 및 비디오 관련 태그는 다음과 같다.

<img src="src/cat.jpg" width="100px" alt="고양이 이미지">

<iframe width="1280" height="720" src="https://www.youtube.com" 
        title="YouTube video player" frameborder="0">
</iframe>

6. 시맨틱 예제

div 태그는 용도에 맞는 태그가 없을 때 사용하는 것이 좋다.
div 태그를 남발하게 되면 유지보수나 협업 시 어려움을 겪을 수 있다.

<body>
  <header>
    <h1>Facebook</h1>
  </header>
  <section>
    <article>
      <img width="100%" src="src/a.jpg" alt="">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </p>
    </article>
  </section>
</body>

따라서 위 예제에서 div 대신 section 과 article 태그를 사용하는 것이 시맨틱한 마크업이라고 할 수 있다.

7. 폼 태그

폼 태그는 다음과 같다.

<input type="text" name="" id=""> : 텍스트 창

<input type="password" name="" id=""> : 비밀번호 창

<input type="date" name="" id=""> : 날짜 창

<input type="time" name="" id=""> : 시간 창

<input type="range" name="" id=""> : 슬라이드 바

<input type="color" name="" id=""> : 색상 창

<input type="radio" name="" id=""> : 라디오 버튼

<input type="checkbox" name="" id=""> : 체크박스 버튼

<input type="submit" value="회원가입"> : 회원가입 제출 버튼

<textarea name="" id="" cols="30" rows="10"></textarea> : 텍스트 입력 창

다음과 같이 폼 태그를 활용한 간단한 회원가입 화면 구현을 할 수 있다.

<body>
  <form action="" method="get">
    <label for="id">아이디</label>
    <input type="text" name="아이디" id="id"><br>
    
    <label for="pw">패스워드</label>
    <input type="password" name="패스워드" id="pw"><br>
    
    <label for="male">남</label>
    <input type="radio" name="성별" id="male" value="남"><br>    
    
    <label for="female">여</label>
    <input type="radio" name="성별" id="female" value="여"><br>
    
    <p>자주 사용하는 프로그래밍 언어</p>
    <input type="checkbox" name="언어" id="java" value="Java">
    <label for="java">Java</label><br>
    
    <input type="checkbox" name="언어" id="c" value="C">
    <label for="c">C</label><br>    
    
    <input type="submit" value="회원가입">
  </form>
</body>

8. 테이블

테이블 관련 태그는 다음과 같다.

<body>
  <table>
    <thead>
      <tr> <!-- 한행 -->
        <th>구분</th> <!-- 제목 -->
        <th>이름</th>
        <th>판매량</th>
      </tr>
    </thead>
    
    <tbody>
      <tr>
        <td>1</td> <!-- 내용 -->
        <td>해리포터</td>
        <td>100</td>
      </tr>
      <tr>
        <td>2</td>
        <td>헝거게임</td>
        <td>200</td>
      </tr>    
      <tr>
        <td>3</td>
        <td>반지의 제왕</td>
        <td>300</td>
      </tr>         
    </tbody>
    
    <tfoot>
      <tr>
        <td colspan="2">총 판매량></td>
        <td>600</td>
      </tr>
    </tfoot>
  </table>
</body>