본문 바로가기
Python_WEB/HTML

HTML5 - 190601 Basic Study 1

AnKiWoong 2019. 6. 1. 18:09
반응형

1. HTML5

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>


2. 제목 글자 태그

제목 글자 태그 h1

제목 글자 태그 h2

제목 글자 태그 h3

제목 글자 태그 h4

제목 글자 태그 h5
제목 글자 태그 h6
<h1>제목 글자 태그 h1</h1>
<h2>제목 글자 태그 h2</h2>
<h3>제목 글자 태그 h3</h3>
<h4>제목 글자 태그 h4</h4>
<h5>제목 글자 태그 h5</h5>
<h6>제목 글자 태그 h6</h6>


3. 본문 글자 태그

여기는 문단입니다. 반갑습니다.
어서오세요.   안녕히가세요.
welcome to my world!
©copyright allright reserved ♥

<p>여기는 문단입니다. 반갑습니다.<br>
        어서오세요.&nbsp;&nbsp;&nbsp;안녕히가세요.<br>
        welcome to my world!<br>
        &copy;copyright allright reserved ♥
</p>


4. 앵커 태그

다음 
네이버 
네이트

<a href = "http://www.daum.net" title="풍선도움말" target="_blank"> 다음 </a><br>
<a href = "http://www.naver.com" title="네이버로가자" target="_self"> 네이버 </a><br>
<a href = "http://www.nate.com" target="new"> 네이트 </a>


5. 특수 기호

&lt;  <  less than

&gt; >  greater than

&nbsp;  공백

&copy;  ⓒ 

&amp;  &

&raquo; >>  자세히보기

&laquo;  <<


6. 주석 처리

안녕하세요.

<!--
주석 처리 문장입니다.
-->

<p>안녕하세요.</p>


7. 글자 관련 태그

글자 관련 태그

font - 비표준 글자 태그

무궁화꽃이 피었습니다. 다람쥐, 요구르트, 햄버거를 먹자

무궁화꽃이 피었습니다. 다람쥐, 요구르트, 햄버거를 먹자

무궁화꽃이 피었습니다. 다람쥐, 요구르트, 햄버거를 먹자

무궁화꽃이 피었습니다. 다람쥐, 요구르트, 햄버거를 먹자


H2O 
1평은 3.3m2입니다.
밑줄넣기 insert 
underline 비표준 
취소선 표준 
취소선 비표준 
취소선 비표준 

<h2> 글자 관련 태그 </h2>
<font color="red" face="궁서" size="6"> font - 비표준 글자 태그 </font>
<p> <b>무궁화</b>꽃이 피었습니다. 다람쥐, 요구르트, 햄버거를 먹자</p>
<p> <i>무궁화</i>꽃이 피었습니다. <small>다람쥐, 요구르트,</small> 햄버거를 먹자</p>
<p> <strong>무궁화</strong>꽃이 피었습니다. <big>다람쥐, 요구르트,</big> 햄버거를 먹자</p>
<p> <em>무궁화</em>꽃이 피었습니다. 다람쥐, 요구르트, 햄버거를 먹자</p>
<br>
H<sub>2</sub>O <br>
1평은 3.3m<sup>2</sup>입니다.<br>
<ins> 밑줄넣기 insert </ins><br>
<u> underline 비표준 </u><br>
<del> 취소선 표준 </del><br>
<s> 취소선 비표준 </s><br>
<strike> 취소선 비표준 </strike><br>

b : 굵음

i : 기울어짐

smaill : 작음

sub : 아래첨자

sup : 윗첨자

ins : 밑줄넣기

del : 취소선


8. 루비 문자

大韓民國대한민국

<ruby>
    <span>大韓民國</span>
    <rp>(</rp>
    <rt>대한민국</rt>
    <rp>)</rp>
</ruby>


9. 기본 목록 태그

    가고싶은나라
  1. 한국
  2. 미국
  3. 북한
    먹고싶은메뉴
  • 짜장면
  • 볶음밥
  • 김치
<ol type="A" start="3"> 가고싶은나라
    <li>한국</li>
    <li>미국</li>
    <li>북한</li>
</ol>

<ul type="square"> 먹고싶은메뉴
    <li>짜장면</li>
    <li>볶음밥</li>
    <li>김치</li>
</ul>


10. 정의 목록 태그

html이란
홈페이지란 만드는 웹표준 언어
<dl>
    <dt> html이란 </dt>
    <dd> 홈페이지란 만드는 웹표준 언어</dd>
</dl>


11. 테이블 태그

중간고사 시험점수
1반2반3반비고
국어영어수학5월시험
909060
909060
컴퓨터 학원


<table border="1" cellpadding="0" cellspacing="0" width="300" bgcolor="pink">

    <thead>
        <tr align="center">
            <th colspan="4"> 중간고사 시험점수 </th>
        </tr>
    </thead>

    <tbody align="center">
        <tr>
            <th>1반</th> <th>2반</th> <th>3반</th>
            <th>비고</th>
        </tr>
        <tr>
            <td>국어</td> <td>영어</td> <td>수학</td>
            <td rowspan="3" align="center">5월시험</td>
        </tr>
        <tr>
            <td>90</td> <td>90</td> <td>60</td>
        </tr>
        <tr>
            <td>90</td> <td>90</td> <td>60</td>
        </tr>
    </tbody>

    <tfoot>
        <tr align="center">
            <td colspan="4" bgcolor="gold"> 컴퓨터 학원 </td>
        </tr>
    </tfoot>

</table>

- tr : 표 행 태그

- th : 행 내부의 제목 셀 태그

- td : 행 내부의 일반 셀 태그

- table 태그에 들어가는 태그들

- tr, td, th, col, colgroup,row, caption, tbody, tfoot, thead, summary

- table 태그에 들어있는 속성 : width, height, border, cellpadding, cellspacing, bordercolor, bgcolor, background

- tr과 td에 들어가는 속성 : align, valign, width, height, colspan, rowspan, bgcolor, backgrouond


12. 테이블 태그 Sample 1

Caption
Table HeaderTable HeaderTable Header
Table DataTable DataTable Data
Table DataTable DataTable Data
Table DataTable DataTable Data
Table DataTable DataTable Data


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Basic</title>
</head>
<body>
<table border="1">
    <caption>Caption</caption>
    <colgroup>
        <col span="2" style="background: red" />
        <col style="background: blue" />
    </colgroup>
       <thead style="background: green">
       <tr>
           <th>Table Header</th>
           <th>Table Header</th>
           <th>Table Header</th>
       </tr>
       </thead>
    <tbody>
    <tr>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
    </tr>
    <tr>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
    </tr>
    <tr>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
    </tr>
    </tbody>
    <tfoot style="background: yellow">
    <tr>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
    </tr>
    </tfoot>
</table>
</body>
</html>


13. 테이블 태그 Sample 2

태블릿 PC와 스마트폰 판매현황
구분태블릿 PC스마트폰
총판매수5만대16만대
상반기 판매수2만대5만대
하반기 판매수3만대11만대


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>태블릿 PC와 스마트폰 판매현황</title>
</head>
<body>
<table border="1" width="100%" summary="상하반기 태블릿 PC와 스마트폰 판매현황">
  <caption>태블릿 PC와 스마트폰 판매현황</caption>
  <colgroup>
    <col width="20%" />
    <col width="40%" />
    <col width="40%" />
  </colgroup>
  <thead>
    <tr>
      <th scope="col">구분</th>
      <th scope="col">태블릿 PC</th>
      <th scope="col">스마트폰</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th scope="row">총판매수</th>
      <td>5만대</td>
      <td>16만대</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th scope="row">상반기 판매수</th>
      <td>2만대</td>
      <td>5만대</td>
    </tr>
    <tr>
      <th scope="row">하반기 판매수</th>
      <td>3만대</td>
      <td>11만대</td>
    </tr>
  </tbody>
</table>
</body>
</html>


14. 테이블 태그 샘플 3

표 만들기

colgroup

상품에 따른 월별 판매현황
구분상품종류
스마트폰태블릿PC데스크탑PC
1월5만대3만대1만대

id, headers

상품에 따른 월별 판매현황
구분상품종류
스마트폰태블릿PC데스크탑PC
1월5만대3만대1만대


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>표 만들기</title>
</head>
<body>
<h1>표 만들기</h1>
<h2>colgroup</h2>
<table border="1" width="100%" summary="월별 스마트폰, 태블릿PC, 데스크탑PC 판매현황 ">
  <caption>상품에 따른 월별 판매현황</caption>
  <colgroup>
    <col width="20%" />
    <col width="25%" />
    <col width="25%" />
    <col width="30%" />
  </colgroup>
  <thead>
    <tr>
      <th rowspan="2" scope="col">구분</th>
      <th colspan="3" scope="colgroup">상품종류</th>
    </tr>
    <tr>
      <th scope="col">스마트폰</th>
      <th scope="col">태블릿PC</th>
      <th scope="col">데스크탑PC</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1월</th>
      <td>5만대</td>
      <td>3만대</td>
      <td>1만대</td>
    </tr>
  </tbody>
</table>
<h2>id, headers</h2>
<table border="1" width="100%" summary="월별 스마트폰, 태블릿PC, 데스크탑PC 판매현황 ">
  <caption>상품에 따른 월별 판매현황</caption>
  <colgroup>
    <col width="20%" />
    <col width="25%" />
    <col width="25%" />
    <col width="30%" />
  </colgroup>
  <thead>
    <tr>
      <th rowspan="2" id="division">구분</th>
      <th colspan="3" id="product">상품종류</th>
    </tr>
    <tr>
      <th headers="product" id="smartphone">스마트폰</th>
      <th headers="product" id="tabletpc">태블릿PC</th>
      <th headers="product" id="pc">데스크탑PC</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th headers="division">1월</th>
      <td headers="product smartphone">5만대</td>
      <td headers="product tabletpc">3만대</td>
      <td headers="product pc">1만대</td>
    </tr>
  </tbody>
</table>
</body>
</html>


반응형
저작자표시 비영리 변경금지

'Python_WEB > HTML' 카테고리의 다른 글

HTML5 - 190602 Basic Study 6(Membership page)  (0) 2019.06.02
HTML5 - 190602 Basic Study 5  (0) 2019.06.02
HTML5 - 190602 Basic Study 4  (0) 2019.06.02
HTML5 - 190601 Basic Study 3(Note)  (0) 2019.06.01
HTML5 - 190601 Basic Study 2  (0) 2019.06.01

'Python_WEB/HTML' Related Articles

티스토리툴바