HTML 기본

•

기본 구조

•

단축키

•

Emmet 사용하기

•

Live Server

•

기본 태그

기본 구조

HTML 기본 구조 코드를 알아봅니다.

<!-- 중간 주석 : alt + shift + A -->
<!DOCTYPE html>     <!-- HTML5 문서임을 정의 -->
<html lang="en">    <!-- HTML 문서의 시작 -->
<head>              <!-- 브라우저의 정보를 제공하는 태그 - 메타정보, 페이지 제목 -->
    <meta charset="UTF-8">  <!-- 문자 인코딩 방식 지정 -->
    <!-- 뷰포트 : 페이지의 크기와 비율을 제어하는 방법을 지정 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 브라우저 창/탭 제목 -->
    <title>사이트 제목</title>
</head>
<body>  <!-- 본문 내용 : 화면에 표시되는 영역 -->
    
</body>
</html>
HTML
복사

기본 코드 작성

html 코드를 작성하면서 자주 사용하는 단축키와 Emmet 사용법을 알아봅니다.

단축키

기능	단축키
HTML 기본 구조 자동 완성	! + Enter
주석 처리	Ctrl + /
중간 주석 처리	Alt + Shift + A
자동 완성	Ctrl + Space
줄 바로 실행	Ctrl + Enter
한 줄 복사	Alt + Shift + (↑/↓)
한 줄 삭제	Ctrl + Shift + K
다중 커서 (마우스 클릭)	Alt + 왼쪽 클릭
다중 커서 (방향키)	Ctrl + Alt + (↑/↓)

Emmet 사용하기

Emmet 기본 문법

문법	설명
태그명#id명	해당 태그에 id 속성을 추가
태그명.class명	해당 태그에 class 속성을 추가
{내용}	태그 내부의 내용을 설정
*숫자	해당 태그를 지정된 숫자만큼 반복 생성
$	자동으로 숫자를 1부터 순차적으로 증가시켜 내용에 삽입

Emmet 기본 문법 설명

사용 예시	설명
h1#title{내용}	<h1> 태그에 id="title" 속성을 추가하고, 내용은 "내용"으로 설정
h2.main-title{내용}*3	<h2> 태그에 class="main-title" 속성을 추가하고, 내용은 "내용"인 <h2> 태그를 3개 생성
p.news{내용}*5	<p> 태그에 class="news" 속성을 추가하고, 내용은 "내용"인 <p> 태그를 5개 생성
p.number{$}*10	<p> 태그에 내용으로 1부터 10까지의 숫자를 자동으로 생성하는 <p> 태그 10개 생성 ($는 1부터 숫자를 증가시키는 Emmet 기호)

<!-- !엔터 : html 기본 구조 자동 완성 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 작성</title>
</head>
<body>
    <!-- 주석       : ctrl + / -->
    <!-- 중간 주석  : alt + shift + A  -->

    <!-- Emmet 기능 -->
    <!-- 자동 완성 : ctrl + space -->
    <!-- 바로 엔터 : ctrl + enter -->

    <!-- 한줄복사   : alt + shift + (↑/↓) ㅁ한자 -->
    <!-- 한줄삭제   : ctrl + shift + K -->
    <!-- 다중커서   : alt + 왼쪽클릭 -->
    <!-- 다중커서   : ctrl + alt + (↑/↓) -->
    
    h1#title{HTML 작성}
    <h1 id="title">HTML 작성</h1>

    h2.main-title{메인 타이틀}*3
    <h2 class="main-title">메인 타이틀</h2>
    <h2 class="main-title">메인 타이틀</h2>
    <h2 class="main-title">메인 타이틀</h2>

    p.news{HTML CSS JavaScirpt jQuery 시작!}*5
    <p class="news">HTML CSS JavaScirpt jQuery 시작!</p>
    <p class="news">HTML CSS JavaScirpt jQuery 시작!</p>
    <p class="news">HTML CSS JavaScirpt jQuery 시작!</p>
    <p class="news">HTML CSS JavaScirpt jQuery 시작!</p>
    <p class="news">HTML CSS JavaScirpt jQuery 시작!</p>

    p.number{$}*10
    <p class="number">1</p>
    <p class="number">2</p>
    <p class="number">3</p>
    <p class="number">4</p>
    <p class="number">5</p>
    <p class="number">6</p>
    <p class="number">7</p>
    <p class="number">8</p>
    <p class="number">9</p>
    <p class="number">10</p>
</body>
</html>
HTML
복사

Live Server

브라우저에서 html 파일을 서버 환경에서 실행해 보겠습니다

Live Server 설치

marketplace.visualstudio.com

[Extension] (확장) 

Live Server 검색

Live Server 실행

[Go Live] (우측 하단)

[Open with Liver Server] (HTML 파일 우클릭, 에디터 우클릭)

ALT + L  O

Live Server 종료

 Port :55xx (Click to close server)

[Stop Live Server] (에디터 우클릭)

ALT + L  C

Live Reload (실시간 페이지 리로드)

HTML, CSS, JS 파일을 수정하고 저장할 때마다 브라우저가 자동으로 새로고침되어 수정된 결과를 즉시 확인할 수 있습니다.

기본 태그

•

텍스트

•

리스트

•

링크

•

이미지

•

테이블

텍스트

텍스트 요소는 웹 페이지에서 문단, 헤더, 강조 등의 글자를 표현하는 데 사용되는 태그입니다.

텍스트 요소는 콘텐츠의 구조와 강조를 정의하는 데 중요한 역할을 합니다. 주로 문서의 헤더, 문단, 강조 부분 등에 사용됩니다.

주요 태그

태그	설명
<h1> ~ <h6>	제목을 나타내는 태그. <h1>이 가장 크고 <h6>이 가장 작음.
<p>	단락(문단)을 나타내는 태그.
<b>, <strong>	텍스트를 굵게 표시. <strong>은 의미적 강조를 나타냄.
<i>, <em>	텍스트를 기울여 표시. <em>은 의미적 강조를 나타냄.
<br>	줄바꿈을 의미하는 태그.
<span>	특정 텍스트에 스타일을 적용하기 위한 인라인 컨테이너.

text.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트 태그</title>
</head>
<body>
    <!-- heading : 제목 태그 (h1~h6) -->
    <!-- h$*6{Hello HTML} -->
    <h1>Hello HTML</h1>
    <h2>Hello HTML</h2>
    <h3>Hello HTML</h3>
    <h4>Hello HTML</h4>
    <h5>Hello HTML</h5>
    <h6>Hello HTML</h6>

    <!-- 
        텍스트 서식 태그
        b           : 볼드체 (bold)
        i           : 이탤릭체 (italic)
        strong      : 강조 (볼드체)
        em          : 강조 (기울임체)
        code        : 텍스트가 코드임을 표시
        sup         : 위첨자
        sub         : 아래첨자
        hr          : 구분선 (수평선)
    -->
    
    <hr>
    <!-- 태그를 작성할 때 < > 는 쓰지 않는다 -->
    <!-- 태그 이름만 작성하면 < > 기호는 자동완성된다. -->
    <p><b>이 텍스트는 bold 입니다</b></p>
    <p><strong>이 텍스트는 strong 입니다</strong></p>
    <p><i>이 텍스트는 i 입니다</i></p>
    <p><em>이 텍스트는 em 입니다</em></p>
    <p><code>이 텍스트는 code 입니다</code></p>
    <p><sub>아래 첨자</sub> 이고 <sup>위 첨자</sup> 입니다</p>
    <p>H<sub>2</sub>O</p>

    <!--
        HTML 엔터티 (특수문자)
        &nbsp;      : 공백문자 한 개
        &lt;        : <
        &gt;        : >
        &quot;      : "
        &amp;       : &
    -->
    <hr>
    <!-- html 에서는 연속된 공백은 하나의 공백으로 출력한다 -->
    공                                      백 <br>
    공 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 백 <br>
    &lt;
    &gt;
    &quot;
    &amp;
</body>
</html>
HTML
복사

paragraph.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>단락 태그 - p</title>
</head>
<body>
    <!-- <p></p>        : 문단 사이에 기본 여백을 가지는 태그 -->
    <!-- <br>           : break line. 개행(줄바꿈) [엔터] -->

    <p>하나의 단락입니다</p>
    <p>하나의 단락입니다</p>
    
    <p>
        하나의 단락입니다 <br>  <!-- br 로 다음 줄로 줄바꿈 -->
        두 번째 줄입니다.
    </p>

    <!-- <pre></pre>    : 입력한 그대로(공백, 개행 포함)의 텍스트를 출력하는 태그 -->
    <pre>
        1번째 줄입니다.
        2번째 줄입니다.
    </pre>
</body>
</html>
HTML
복사

리스트

리스트는 항목들을 나열하는 방법을 제공합니다.

리스트는 순서가 있는 리스트(번호 리스트)와 순서가 없는 리스트(불릿 리스트)로 나뉩니다.

주요 태그

태그	설명
<ul>	순서가 없는 리스트를 생성 (불릿 리스트).
<ol>	순서가 있는 리스트를 생성 (번호 리스트).
<li>	리스트 항목을 나타내는 태그. <ul> 또는 <ol> 안에 사용.
<dl>	설명 리스트를 생성하는 태그.
<dt>	설명 리스트의 용어를 정의하는 태그.
<dd>	설명 리스트의 용어에 대한 설명을 나타내는 태그.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>리스트 태그</title>
</head>
<body>
    <!-- 
        리스트 태그
        : 항목을 나열하는 태그

        - ul : 번호 없는 리스트
        - ol : 번호 있는 리스트
        - dl : 정의 리스트
    -->    
    <h1>리스트 태그</h1>
    <!-- 번호 없는 리스트 -->
    <!-- ul>(li*3) -->
    <ul>
        <li>녹차라떼</li>
        <li>피스타치오 빽스치노</li>
        <li>아이스티</li>
    </ul>
    <!-- 번호 있는 리스트 -->
    <!-- ol>(li*3) -->
    <!-- 속성 : start, type(1,a,A,i,I), reversed -->
    <ol start="3" type="1" reversed>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavsScript</li>
    </ol>
    <!-- 정의 리스트 -->
    <!-- dl>(dt+dd+dt+dd) -->
    <dl>
        <dt>HTML</dt>
        <dd>- 마크업 언어</dd>
        <dt>CSS</dt>
        <dd>- 스타일 시트</dd>
    </dl>
</body>
</html>
HTML
복사

링크

링크는 다른 웹 페이지나 문서, 리소스로 연결할 수 있는 태그입니다.

링크는 클릭 가능한 텍스트나 이미지로 표현되며, 주로 다른 페이지나 외부 사이트로의 연결에 사용됩니다.

주요 태그 및 속성

태그	설명
<a>	하이퍼링크를 생성하는 태그. href 속성으로 링크할 URL을 지정.
href	링크할 주소(URL)를 정의하는 속성.
target	링크를 열 때의 창/탭 동작을 정의하는 속성. _blank는 새 창에서 열림.
title	마우스를 링크에 올렸을 때 표시되는 텍스트를 정의.
rel	현재 문서와 링크 문서의 관계를 정의.

list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>링크 태그</title>
</head>
<body>
     <!-- 
        a 태그

        * 속성
        - href : 이동할 경로(파일경로, URL, #id속성)
        - 경로
        * 절대 경로 : href="http://www.naver.com"   다른 웹사이트로 이동
        * 상대 경로 : href="../../test.html"        상위 경로의 다른 문서로 이동
        * 문서 내부 : href="#text"                  id 속성이 text 인 요소로 이동

        *) ../      : 상위 경로
            ./      : 현재 경로

        - target
        * _blank        : 새 창에서 열기
        * _self         : 현재 창에서 열기
        * _parent       : 부모 프레임에서 열기
        * _top          : 최상위 프레임에서 열기
     -->
    <h1>링크 태그</h1>
    <!-- a[href][target="_blank"] -->
    <!-- a[href][target="_self"] -->
    <!-- a#top[href="#bottom"] -->

    <a href="http://www.naver.com" target="_blank">네이버 (새 창)</a>
    <a href="http://www.naver.com" target="_self">네이버 (현재 창)</a>
    <a href="#bottom" id="top">맨 아래로 가기</a>

    <div style="height: 1000px;"></div>
    <p>
        이메일 <br>
        <!-- 이메일 링크 : mailto:이메일주소 -->
        <a href="mailto:wwwaloha@kakao.com">wwwaloha@kakao.com</a>
    </p>

    <h3>연락처 링크</h3>
    <p>
        연락처
        <!-- 연락처 : tel:전화번호 -->
        <a href="tel:01012341234">010-1234-1234</a>
    </p>
    
    <!-- a#bottom[href="top"]{맨 위로 이동 하기} -->
    <a href="#top" id="bottom">맨 위로 이동 하기</a>
</body>
</html>
HTML
복사

이미지

이미지를 웹 페이지에 삽입하는 태그입니다.

이미지는 시각적인 콘텐츠로, 웹 페이지에서 중요한 정보나 디자인 요소로 자주 사용됩니다.

하위 태그 및 속성

태그	설명
<img>	이미지를 삽입하는 태그. src 속성을 통해 이미지의 경로를 지정.
src	이미지의 경로(파일 위치)를 지정하는 속성.
alt	이미지가 로드되지 않을 경우 대체 텍스트를 지정하는 속성.
width	이미지의 너비를 지정하는 속성.
height	이미지의 높이를 지정하는 속성.

img.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이미지 태그</title>
</head>
<body>
    <!-- 
        <img>
        - src               : 이미지 파일 경로
        - width/height      : 가로/세로 크기 지정
        - alt               : 이미지를 표시하지 못하는 경우 출력할 대체 텍스트
        - border            : 테두리 굵기 지정 (px)
    -->
    <h1>이미지 태그</h1>
    <div>
        <h2>HTML</h2>
        <img src="img/logo-html.png" alt="logo-html" width="100" height="140" title="HTML 로고" />
    </div>
    <div>
        <h2>CSS</h2>
        <img src="img/logo-css.png" alt="logo-css" width="100" height="140" title="CSS 로고" />
    </div>
    <div>
        <h2>HTML</h2>
        <img src="img/logo-js.png" alt="logo-js" width="100" height="140" title="JavaScript 로고" />
    </div>

    <hr>
    <div>
        <h2>URL 이미지</h2>
        <img src="https://pokemonkorea.co.kr/img/sub/img_compay_info.png" 
             alt="내가 좋아하는 이미지"
             border="5">
    </div>
    <div>
        <h2>이미지가 없을 때</h2>
        <img src="img/no-image.png" alt="대체 텍스트" title="이미지" />
    </div>
    <div style="height: 500px;"></div>
</body>
</html>
HTML
복사

테이블

표 형식으로 데이터를 구성하는 태그입니다.

테이블은 행과 열을 사용해 데이터를 구조적으로 표현하는 데 사용됩니다.

하위 태그 및 속성

태그	설명
<table>	테이블을 생성하는 태그.
<tr>	테이블의 한 행을 정의하는 태그.
<td>	테이블의 데이터를 담는 셀을 정의하는 태그.
<th>	테이블의 헤더 셀을 정의하는 태그.
<thead>	테이블의 머리글 섹션을 정의하는 태그.
<tbody>	테이블의 본문 섹션을 정의하는 태그.
<tfoot>	테이블의 하단 섹션을 정의하는 태그.
border	테이블에 테두리를 추가하는 속성.

table.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>테이블 태그</title>
</head>
<body>
    <!-- 
        table
        : 표 형태의 데이터를 표시하는 태그
        - tr (table row)        : 표의 하나의 행을 표시
        - th (table head)       : 표의 제목 행(header)의 열(data) 표시, 
                                  * 텍스트를 bold체로 가운데 정렬
        - td (table data)       : 표의 한 칸의 열(data)을 표시

        * rowspan               : 상하(행)의 셀을 병합, 
        * colspan               : 좌우(열)의 셀을 병합, 
            * 병합할 첫 번째 셀을 기준으로 셀의 개수를 지정
        
        - caption               : 표의 제목
        - border                : 표의 테두리 굵기(px) 지정

        - thead                 : 테이블 최상단의 영역을 지정
        - tbody                 : 테이블 몸체 영역을 지정
        - tfoot                 : 테이블 최하단의 영역을 지정

        - colgroup              : 열 그룹을 지정하여 하나 이상의 열에 동일한 형식을 지정하기 위해 사용
            - col               : 그룹화된 열을 나타내기 위해 사용
    -->
    <h1>카페 메뉴판</h1>
    <table border="1">
        <tr>
            <th width="200">메뉴</th>
            <th width="100">가격</th>
            <th width="100">종류</th>
        </tr>
        <!-- (tr>(td*3))*3 -->
        <tr>
            <td>아메리카노</td>
            <td>1,500</td>
            <td>hot/ice</td>
        </tr>
        <tr>
            <td>카페라떼</td>
            <td>2,500</td>
            <td>hot/ice</td>
        </tr>
        <tr>
            <td>아이스티</td>
            <td>3,000</td>
            <td>ice</td>
        </tr>
    </table>

    <hr>

    <h1>월별 수입</h1>
    <table border="1">
        <thead>
            <tr>
                <th>월</th>
                <th>수입</th>
            </tr>
        </thead>
        <tbody>
            <!-- (tr>td*2)*4 -->
            <tr>
                <td>09월</td>
                <td>1,000,000</td>
            </tr>
            <tr>
                <td>10월</td>
                <td>1,500,000</td>
            </tr>
            <tr>
                <td>11월</td>
                <td>2,000,000</td>
            </tr>
            <tr>
                <td>12월</td>
                <td>2,500,000</td>
            </tr>
        </tbody>
        <tfoot></tfoot>
            <tr>
                <td>합계</td>
                <td>7,000,000</td>
            </tr>
        </tfoot>
    </table>

    <hr>
    <h1>9월 달력</h1>
    <table>
        <colgroup>
            <col  style="background-color: red;">
            <col span="6" style="background-color: cornflowerblue;">
        </colgroup>
        <tr>
            <th>일</th>
            <th>월</th>
            <th>화</th>
            <th>수</th>
            <th>목</th>
            <th>금</th>
            <th>토</th>
        </tr>
        <!-- (tr>td{$}*7)*5 -->
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
        </tr>
        <tr>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>15</td>
            <td style="background-color: hotpink;">16</td>
            <td style="background-color: hotpink;">17</td>
            <td style="background-color: hotpink;">18</td>
            <td>19</td>
            <td>20</td>
            <td>21</td>
        </tr>
        <tr>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
            <td>26</td>
            <td>27</td>
            <td>28</td>
        </tr>
        <tr></tr>
            <td>29</td>
            <td>30</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

    <div style="height: 500px;"></div>
</body>
</html>
HTML
복사

썸네일 만들기

•

thumnail.html

<!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>img - 이미지 태그</title>
</head>
<body>
    <!-- 
        <img>
        - src               : 이미지 파일 경로
        - width/height      : 가로/세로 크기 지정
        - alt               : 이미지를 표시하지 못한 경우 출력할 대체 텍스트
        - border            : 테두리 굵기 지정 (px 단위)
    -->

    <div>
        <h2>HTML</h2>
        <a href="thumbnail-1.html">
            <img src="img/logo-html.png" alt="logo-html"
                width="100" height="140" border="1">
        </a>
    </div>

    <div>
        <h2>CSS</h2>
        <a href="thumbnail-2.html">
            <img src="img/logo-css.png" alt="logo-css"
                    width="100" height="140" border="1">
        </a>
    </div>

    <div>
        <h2>JAVASCRIPT</h2>
        <a href="thumbnail-3.html">
            <img src="img/logo-js.png" alt="logo-js" 
                width="100" height="140" border="1">
        </a>
    </div>

    <div>
        <h2>이미지가 없을 때</h2>
        <img src="img/no.jpg" alt="대체 텍스트" title="이미지">
    </div>

</body>
</html>
HTML
복사

•

thumbnail-1.html

<!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>thumbnail</title>
</head>
<body>
    <img src="img/logo-html.png" alt="img/logo-html.png">
</body>
</html>
HTML
복사

•

thumbnail-2.html

<!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>thumbnail</title>
</head>
<body>
    <img src="img/logo-css.png" alt="img/logo-css.png">
</body>
</html>
HTML
복사

•

thumbnail-3.html

<!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>thumbnail</title>
</head>
<body>
    <img src="img/logo-js.png" alt="img/logo-js.png">
</body>
</html>
HTML
복사

HTML 기본

•

기본 구조

•

단축키

•

Emmet 사용하기

•

Live Server

•

기본 태그

기본 구조

HTML 기본 구조 코드를 알아봅니다.

기본 코드 작성

html 코드를 작성하면서 자주 사용하는 단축키와 Emmet 사용법을 알아봅니다.

단축키

기능	단축키
HTML 기본 구조 자동 완성	! + Enter
주석 처리	Ctrl + /
중간 주석 처리	Alt + Shift + A
자동 완성	Ctrl + Space
줄 바로 실행	Ctrl + Enter
한 줄 복사	Alt + Shift + (↑/↓)
한 줄 삭제	Ctrl + Shift + K
다중 커서 (마우스 클릭)	Alt + 왼쪽 클릭
다중 커서 (방향키)	Ctrl + Alt + (↑/↓)

Emmet 사용하기

Emmet 기본 문법

문법	설명
태그명#id명	해당 태그에 id 속성을 추가
태그명.class명	해당 태그에 class 속성을 추가
{내용}	태그 내부의 내용을 설정
*숫자	해당 태그를 지정된 숫자만큼 반복 생성
$	자동으로 숫자를 1부터 순차적으로 증가시켜 내용에 삽입

Emmet 기본 문법 설명

사용 예시	설명
h1#title{내용}	<h1> 태그에 id="title" 속성을 추가하고, 내용은 "내용"으로 설정
h2.main-title{내용}*3	<h2> 태그에 class="main-title" 속성을 추가하고, 내용은 "내용"인 <h2> 태그를 3개 생성
p.news{내용}*5	<p> 태그에 class="news" 속성을 추가하고, 내용은 "내용"인 <p> 태그를 5개 생성
p.number{$}*10	<p> 태그에 내용으로 1부터 10까지의 숫자를 자동으로 생성하는 <p> 태그 10개 생성 ($는 1부터 숫자를 증가시키는 Emmet 기호)

기본 태그

•

텍스트

•

리스트

•

링크

•

이미지

•

테이블

텍스트

텍스트 요소는 웹 페이지에서 문단, 헤더, 강조 등의 글자를 표현하는 데 사용되는 태그입니다.

텍스트 요소는 콘텐츠의 구조와 강조를 정의하는 데 중요한 역할을 합니다. 주로 문서의 헤더, 문단, 강조 부분 등에 사용됩니다.

주요 태그

태그	설명
<h1> ~ <h6>	제목을 나타내는 태그. <h1>이 가장 크고 <h6>이 가장 작음.
<p>	단락(문단)을 나타내는 태그.
<b>, <strong>	텍스트를 굵게 표시. <strong>은 의미적 강조를 나타냄.
<i>, <em>	텍스트를 기울여 표시. <em>은 의미적 강조를 나타냄.
<br>	줄바꿈을 의미하는 태그.
<span>	특정 텍스트에 스타일을 적용하기 위한 인라인 컨테이너.

text.html

paragraph.html

리스트

리스트는 항목들을 나열하는 방법을 제공합니다.

리스트는 순서가 있는 리스트(번호 리스트)와 순서가 없는 리스트(불릿 리스트)로 나뉩니다.

주요 태그

태그	설명
<ul>	순서가 없는 리스트를 생성 (불릿 리스트).
<ol>	순서가 있는 리스트를 생성 (번호 리스트).
<li>	리스트 항목을 나타내는 태그. <ul> 또는 <ol> 안에 사용.
<dl>	설명 리스트를 생성하는 태그.
<dt>	설명 리스트의 용어를 정의하는 태그.
<dd>	설명 리스트의 용어에 대한 설명을 나타내는 태그.

링크

링크는 다른 웹 페이지나 문서, 리소스로 연결할 수 있는 태그입니다.

링크는 클릭 가능한 텍스트나 이미지로 표현되며, 주로 다른 페이지나 외부 사이트로의 연결에 사용됩니다.

주요 태그 및 속성

태그	설명
<a>	하이퍼링크를 생성하는 태그. href 속성으로 링크할 URL을 지정.
href	링크할 주소(URL)를 정의하는 속성.
target	링크를 열 때의 창/탭 동작을 정의하는 속성. _blank는 새 창에서 열림.
title	마우스를 링크에 올렸을 때 표시되는 텍스트를 정의.
rel	현재 문서와 링크 문서의 관계를 정의.

list.html

이미지

이미지를 웹 페이지에 삽입하는 태그입니다.

이미지는 시각적인 콘텐츠로, 웹 페이지에서 중요한 정보나 디자인 요소로 자주 사용됩니다.

하위 태그 및 속성

태그	설명
<img>	이미지를 삽입하는 태그. src 속성을 통해 이미지의 경로를 지정.
src	이미지의 경로(파일 위치)를 지정하는 속성.
alt	이미지가 로드되지 않을 경우 대체 텍스트를 지정하는 속성.
width	이미지의 너비를 지정하는 속성.
height	이미지의 높이를 지정하는 속성.

img.html

테이블

표 형식으로 데이터를 구성하는 태그입니다.

테이블은 행과 열을 사용해 데이터를 구조적으로 표현하는 데 사용됩니다.

하위 태그 및 속성

태그	설명
<table>	테이블을 생성하는 태그.
<tr>	테이블의 한 행을 정의하는 태그.
<td>	테이블의 데이터를 담는 셀을 정의하는 태그.
<th>	테이블의 헤더 셀을 정의하는 태그.
<thead>	테이블의 머리글 섹션을 정의하는 태그.
<tbody>	테이블의 본문 섹션을 정의하는 태그.
<tfoot>	테이블의 하단 섹션을 정의하는 태그.
border	테이블에 테두리를 추가하는 속성.