HTML - ① 필수 태그

kongmi 2023. 3. 8. 19:13

텍스트 작성하기

제목(Heading)

<h> 태그 이용

<h1>제목1의 크기입니다!</h1>
<h2>제목2의 크기입니다!</h2>
<h3>제목3의 크기입니다!</h3>
<h4>제목4의 크기입니다!</h4>
<h5>제목5의 크기입니다!</h5>
<h6>제목6의 크기입니다!</h6>

대부분의 웹 브라우저에서는 종료 태그를 사용하지 않더라도 html 문법을 제대로 표시해주지만 React 등에서는 엄격하게 체크하기 때문에 가급적 종료 태그를 추가해야 합니다.

단락(Paragraph)

내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미, 문단이라고도 함.
html에서는 <p> 태그를 이용하여 단락 표현

<h1>제목1의 크기입니다!</h1>
<h2>제목2의 크기입니다!</h2>
<h3>제목3의 크기입니다!</h3>
<p>여기서부터 단락입니다.</p>
<p>하나의 문단을 작성 할 때는 p 태그를 사용 합니다.</p>

<p> 태그의 위아래로는 약간의 여백(margin)이 자동으로 삽입됨

텍스트를 굵게 표시

<strong> 혹은 <b>

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
</head>
<body>
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
  <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p><i>비타민 C</i>와 <i>비타민 P</i>가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
  <h2>레드향 샐러드 레시피</h2>
  <h2>상품 구성</h2>
</body>
</html>

띄어쓰기, 줄 나누기

<br>

수평 가로 구분선

<hr>

서식(Formatting)

강조 효과

<b> 혹은 <strong>
둘 다 텍스트 강조한다는 점에서 동일하지만 <strong>은 스크린 리더 등의 보조 기술에서 중요성을 강조하고자 할 때 사용

<p><b>"이 부분"</b>은 단순히 글씨가 굵은 부분이에요!</p>
<p><strong>"이 부분"</strong>은 중요한 부분이라서 굵게 표현됐어요!</p>

짧은 인용구

<q>태그(quotation)를 사용하여 표현할 수 있으며, 자동으로 앞뒤에 큰따옴표가 붙음

<p>HTML의 정의는
<q>웹 페이지를 만들기 위한 하이퍼텍스트 마크업 언어</q>
입니다.</p>

블록 인용구

길이가 긴 인용문은 <blockquote> 태그를 사용
인용 부분을 별도의 단락으로 구분하여 나타냄

<p>HTML의 정의</p>
<blockquote>
인터넷 서비스의 하나인 월드 와이드 웹을 통해 볼 수 있는 문서를 만들 때 사용하는 프로그래밍 언어의 한 종류이다.
</blockquote>

ins, del 밑줄, 취소선

<ins> : 새로 추가된 텍스트(밑줄)
<de> : 취소선

<p>세일 기간을 맞이하여 온라인 수강권을 할인된금액(정가<del>36,000원</del>
<ins>20,000원</ins>)에 판매 합니다.</p>

sub, sup 아래 첨자, 위 첨자

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

문자셋

웹 브라우저가 html 문서를 정확하게 나타내기 위해서는 해당 문서가 어떠한 문자셋으로 저장되었는지 알아야 함.
따라서 html 문서가 저장될 때 사용된 문자셋에 대한 정보를 <head> 태그 내의 <meta> 태그에 명시
html5에서 UTF-8의 경우 : <meta charset=UTF-8">

ASCII : 가장 처음 만들어진 문자셋으로, 127개의 영문자와 숫자로 이루어져 있음
ANSI : 윈도우즈에서 만든 문자셋으로, 총 256개의 문자 코드 지원
ISO-8859-1 : 256개의 문자 코드를 지원하는 HTML4의 기본 문자셋
UTF-8 : 세상에 있는 거의 모든 문자를 표현할 수 있는 유니코드 문자를 지원하는 HTML5의 기본 문자셋

HTML 공간 분할

div, span

HTML 코드를 작성하다 보면 관련 있는 요소를 그룹으로 묶어야 하는 경우가 많습니다.
웹 페이지를 만들 때 이렇게 관련 있는 요소들끼리 그룹으로 묶으면 레아이웃을 구성하기 쉬워지고, HTML 페이지의 구조를 더욱 깔끔하게 작성할 수 있습니다.

HTML 요소의 타입

HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가집니다.

대부분의 html 요소는 이러한 display 속성값으로 두 가지 값 중 하나를 가지게 됩니다.

블록(blcok)
인라인(inline)

블록(block)타입의 요소

display 속성 값이 블록(block)인 요소는 언제나 새로운 라인에서 시작
해당 라인의 모든 너비를 차지합니다.

<p style="border: 3px solid red">
    p요소는 display 속성값이 블록인 요소입니다.
</p>

<p>, <div>, <h>, <ul>, <ol>, <form>

div

<div>요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소
<div>요소는 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용됩니다.

div 태그 사용x

<body>
    <p>영화 소개</p>
    <p>영화를 소개하는 페이지 입니다.</p>
    <p>TV 프로그램 소개</p>
    <p>TV 프로그램을 소개하는 페이지 입니다.</p>
</body>

div 태그 사용o

<div class="movie">
    <p>영화 소개</p>
    <p>영화를 소개하는 페이지입니다.</p>
  </div>
  <div class="tv">
    <p>TV 프로그램 소개</p>
    <p>TV 프로그램을 소개하는 페이지입니다.</p>
  </div>d

div 태그 범위 확인

<div style="background-color:lightgray; color:green; text-align:center">
    <h1>div요소를 이용한 스타일 적용</h1>
    <p>이렇게 div요소로 여러 요소들을 묶은 다음에 style 속성과 클래스 등을 이용하여
    한 번에 스타일을 적용할 수 있습니다.</p>
</div>

인라인(inline) 타입의 요소

display 속성 값이 인라인인 요소는 새로운 라인에서 시작되지 않습니다.
요소의 너비도 해당 라인 전체가 아닌 해당 html 요소의 내용 만큼만 차지합니다.

<span>, <a>, <img>, <strong>, <em>, <input>, <button>

<p>이렇게
<span style="border: 3px solid red">span요소로 텍스트의 일부분</span>
만을 따로 묶은 후에 스타일을 적용할 수 있습니다.</p>

HTML 리스트

ul 순서X

순서가 없는 리스트는 <ul>태그로 시작하며, 여기에 포함되는 각각의 리스트 요소는 <li>태그로 시작합니다.
각각의 리스트 요소 앞에는 검정색의 작은 원이 위치합니다.

<h1>판매 중인 과일</h1>
<ul>
    <li>사과</li>
    <li>멜론</li>
    <li>바나나</li>
</ul>

ol 순서O

순서가 있는 리스트는 <ol>태그로 시작하며, 여기에 포함되는 각각의 리스트 요소는 <li>태그로 시작합니다.
각각의 리스트 요소 앞에는 기본 마커로 아라비아 숫자가 위치합니다.

<ol>
    <li>사과</li>
    <li>멜론</li>
    <li>바나나</li>
</ol>

dl 정의형 목록

<body>
    <dl>
        <dt>HTML</dt>
        <dd>HTML은 Hyper Text Markup Language의 약자로 웹 문서의 구조를 설계하기 위한 목적으로 개발된 언어입니다.</dd>
        <dt>CSS</dt>
        <dd>CSS는 Cascading Style Sheets의 약자로 웹 문서를 꾸미기 위한 목적으로 개발된 언어입니다.</dd>
      </dl>  
</body>

링크, 이미지 넣기

a : 링크 연결

<a href="대상 경로" target="링크 연결 방식" title="링크 설명"></a>

target 속성

target 속성값	설명
_blank	새 창 or 새 탭
_self	현재 창

<h2><a href="/html/intro" target="_blank">blank</a></h2>
<h2><a href="http://google.co.kr">구글로 이동</a></h2>

<a href=“URL”>

절대 주소 : “a href=“http://naver.com”
상대 주소 : “a href=”/lectute/logo.png”
같은 페이지 내에서 명시된 id를 가진 요소 연결 : “a href=#bottom”
자바스크립트 : “a href=”javascript:alert(”반갑습니다!!”)”

img 이미지

<img src=”이미지 경로" alt=”이미지 설명">

<img src="./images/bear.png" alt="이미지가 없습니다.">

기호	설명
./	현재 폴더 (생략 가능)
../	상위 폴더

이미지 링크

<a href="https://www.google.com" target="_blank">
            <img src="./images/google_logo.png" alt="구글 로고">
        </a>

표(table) 만들기

caption 표 제목

<table>
	<caption>표 제목</caption>
</table>

tr 행

<table>
	<tr></tr>
</table>

th,td 열

<table>
	<tr>
		<th>제목</th>
		<td>내용</td>
	</tr>
</table>

예시

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>표(table)</title>
  <style>
    table{
      border-collapse:collapse;
    }
    th, td{
      border:1px solid #ccc;
    }
  </style>
</head>
<body>
<table>
  <tr>
    <th>번호</th>
    <th>상품명</th>
    <th>수량</th>
    <th>가격</th>
  </tr>
  <tr>
    <td>1</td>
    <td>콜라</td>
    <td>1개</td>
    <td>1,500원</td>
  </tr>
  <tr>
    <td>2</td>
    <td>사이다</td>
    <td>2개</td>
    <td>1,000원</td>
  </tr>
  <tr>
    <td>3</td>
    <td>탄산수</td>
    <td>3개</td>
    <td>1,000원</td>
  </tr>
</table>
</body>
</html>

rowspan, colspan 병합

행과 행 병합 : rowspan
열과 열 병합 : colspan

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>table</title>
  <style>
    table{
      border-collapse: collapse;
    }
    th, td{
      border: 1px solid #ccc;
      text-align: center;
    }
  </style>
</head>
<body>
  <!-- 테이블의 시작을 의미 -->
  <table>
    <tr>
      <th>번호</th>
      <th>상품명</th>
      <th>수량</th>
      <th>가격</th>
    </tr>
    <tr>
      <td>1</td>
      <td>콜라</td>
      <td>1개</td>
      <td>1,500원</td>
    </tr>
    <tr>
      <td>2</td>
      <td>사이다</td>
      <td>2개</td>
      <td rowspan="2">1,000원</td> <!-- 행 병합-->
    </tr>
    <tr>
      <td>3</td>
      <td>탄산수</td>
      <td>3개</td> 
      <!-- 4행 4열은 3행 4열과 병합했으므로 생성하지 않습니다. -->
    </tr>
    <tr>
      <td>총 금액</td>
      <td colspan="3">6,500원</td> <!-- 열 병합-->
      <!-- 5행 2열부터 열 3개를 병합했으므로 나머지 열은 생성하지 않습니다. -->
    </tr>
  </table>  
</body>
</html>

col, colgroup 열 그룹화

col 태그는 하나의 열을 그룹화, colgroup 태그는 span 속성과 함께 사용해 2개 이상의 열을 그룹화
특정열에 배경색을 넣거나 너비를 바꾸려면 원하는 열을 선택 할 수 있어야 하는데 이럴 때 사용하는 태그가 col과 colgroup 태그 입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    table, th, td {
      border:1px solid #ccc;
      border-collapse: collapse;
    }
    th, td { padding:10px 20px; }
  </style>
</head>
<body>
  <h2>상품 구성</h2>
  <table>
    <caption>선물용과 가정용 상품 구성</caption>
    <colgroup>
      <col style="background-color:#eee;">
      <col>
      <col style="width:150px">
      <col style="width:150px">
    </colgroup>
    <thead>
      <tr>
        <th>용도</th>
        <th>중량</th>
        <th>갯수</t>
        <th>가격</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">선물용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>35,000원</td>
      </tr>
      <tr>
        <td>5kg</td>
        <td>18~26과</td>
        <td>52,000원</td>
      </tr>
      <tr>
        <td rowspan="2">가정용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>30,000원</td>
      </tr>   
      <tr>
        <td>5kg</td>
        <td>18~26과</td>
        <td>47,000원</td>
      </tr>
    </tbody>        
  </table>
</body>
</html>

멀티미디어 설정

audio 태그

<audio src="medias/spring.mp3" controls></audio>

video 태그

<video src="medias/salad.mp4" controls width="700"></video>

audio, video 태그 속성

종류	설명
controls	컨트롤 바 표시
autoplay	자동 실행
loop	반복 재생
muted	소리 제거
width, height	크기 지정

<audio src="medias/spring.mp3" autoplay loop></audio>

저작자표시 비영리 변경금지 (새창열림)