[HTML] 텍스트 관련 태그, table 태그

텍스트 관련 태그

 

<h1>~<h6> 헤더 텍스트

: 굵고, 사이즈가 지정되어 있음. 단락에 대한 구분이 표현되어져있는 성격

 

<p> 태그

: 단락이 구분되어짐. 글자가 얇음.

 

<br />: 단락에 대한 구분(줄바꿈)

 

h태그와 p태그는 서로 상속될 수 없음

 

 

<hr /> 태그: 수평선을 나타내는 태그, 단락을 구분짓는 용도로 사용

이전에는 많이 사용했으나, 요즘은 css때문에 단락을 구분짓는 용도로 많이 사용

border에 비해 입체감이 있음

 

인용문을 나타내는 태그:

<blockquote></blockquote>

- 인용문을 나타내기 때문에 자동으로 들여쓰기가 됨. 마진 값 약 40px

 

<pre> </pre> 태그: 공백이나 줄 바꿈 결과값을 그대로 보여주는 태그

 

 

 

글자를 꾸며주는 태그

 

<strong></strong> 글자를 굵게 - 중요한 것들을 강조

이전에는 <b></b> 태그가 사용되었음.

글자를 꾸며주는 태그는 글자처럼 옆으로 나열되는 성격을 갖고 있기 때문에

<br> 을 넣어주어야 함.

 

<em></em> 태그: 이탤릭체로 표현

<i></i> 주변의 문장과 다른 의미의 느낌을 표현. 과거에 사용되었음.

 

 

<mark></mark>: 형광펜 같은 표현 - 부분의 강조(색 채움)

 

<ins></ins>: 글자 아래 밑줄.

<u></u> 밑줄 표현, ins 태그와 동일하나 ins를 더 많이 사용

 

<del></del> 취소선 표현

 

: 글자가 아래로 작아지는 아래첨자

: 글자가 위로 작아지는 위첨자

 

<span>글자를 꾸며주는 역할</span>

 

 

특수문자:

&, 공백, <, > , * 등등..

 

띄어쓰기가 절대 여러번 되지 않음. 스페이스바 여러번을 눌러도 한번밖에 적용되지 않음

&nbsp; 반드시 기억.

 

 

<ul></ul>: 목록 태그이며, 순서가 없는 목록 태그

<ol></ol>: 목록 태그이며, 순서가 있는 목록 태그

ul,ol은 필수적으로 li라는 자식이 상속되어야 함.

 

      <ul>

        <li>순서가 없는 목록 태그</li>

        <li>앞에 자동으로 부호가 생성</li>

        <li>네비게이션 메뉴 - 중요!</li>

      </ul>

 

      <ol>

        <li>순서가 있는 목록 태그</li>

        <li>앞에 자동으로 부호가 아닌 순서가 생성</li>

        <li>크게 많이 사용되지는 않음!</li>

      </ol>

 

 

정의 목록 태그: 특정 용어와 정의를 설명할 때 사용

      <dl>

        <dt>정의될 단어</dt>

        <dd>정의될 내용</dd>

      </dl>

 

기존의 <blockquote>(인용문) 태그처럼 들여쓰기가 되며 나타남

 

 

 

table 태그

웹 초기 테이블 레이아웃 구조로 구현

주로 표를 만들때 사용

<th> 태그의 속성: 자동 중간정렬 / 굵게 표현

기본적으로 테이블 내용의 세로 정렬은 중간

 

<table></table> 표의 시작과 끝, 테이블의 전체

<tr></tr> 줄의 시작과 끝(행을 만드는 태그)

<td></td> 칸의 시작과 끝(열을 만드는 태그)

<th></th> 테이블의 헤더부분을 만드는 태그(제목 역할)

 

테이블 태그는 선에 대해 언급을 해주어야 표인 것처럼 볼 수 있음.

<table border= "1">

 

      <tr>

        <td>table - 1</td>

        <td>table - 2</td> <!-- 한 줄 두 칸짜리 테이블 -->

      </tr>

      <tr>

        <td>table - 3</td>

        <td>table - 4</td> <!-- 두 줄 두 칸짜리 테이블 -->

      </tr>

 

테이블을 만들 땐 행과 열이 일정해야 함.

<table> 태그 사용 시 <tr>, <td> 가 함께 나타나야 하고,

중간에 <br> 이나 <p> 태그가 끼어들어가면 안됨. 내용물을 주고 싶다면 반드시 <td> 태그 안쪽에 줄 것

 

 

    <table border= "1">

      <tr>

        <th>tltle</th>

        <th>title</th>

        <th>title</th>

      </tr>

      <tr>

        <td>table - 3</td>

        <td>table - 4</td>

        <td>table - 3</td>

      </tr>

      <tr>

        <td>table - 5</td>

        <td>table - 6</td> <!-- 세 줄 세 칸짜리 테이블 -->

        <td>table - 3</td>

      </tr>

    </table>

 

<th> 태그는 표의 전반적인 구분을 해주는 태그, 제목의 성격을 띄고 있어

자동으로 중간 정렬이 이루어지며 글자가 굵어짐.

 

 

table 옵션에 대한 부분

1. table 옵션

- cellpadding="0" 칸의 여백 -> padding: 15px; 테이블 패딩

- cellspacing="0" border 의 여백 -> border-collapse: collapse; 테이블 테두리 축소

- border = "숫자" 선을 통해 결과값 확인 옵션 -> border: 1px solid black;

- width = "숫자" 표의 전체 넓이 -> width: 100%; 테이블의 너비

 

2. td 옵션

- width ="숫자" 칸의 넓이 -> width: 100%; 칸(열)의 너비

- height= "숫자"  칸의 높이 -> height: 500px; 칸(열)의 높이

- bgcolor="색상코드" 칸의 배경색상 -> background-color: #000 칸(열)의 배경색상 >> 이제는 사용하지 않음

 

차후 스타일 습득에 따라 사용하지 않아도 되는 옵션 / html5에서는 스타일시트 활용

 

 

td height로 높이를 줬을 때, 내용물이 세로선상에서 중심 배치가 됨.

 

 

셀 병합

세로 병합 : rowspan

가로 병합: colspan

 

가로 병합

    <h1>셀의 병합</h1>

    <!--가로로 병합, colspan="가로로 묶을 칸의 합"-->

    <table border ="1" cellpadding="0" cellspacing="0">

      <tr>

        <th colspan="2">colspan</th>

      </tr>

      <tr>

        <td>가로병합</td>

        <td>가로병합</td>

      </tr>

    </table>

 

    <!--세로로 병합, rowspan="세로로 묶을 칸의 합"-->

    <table border ="1" cellpadding="0" cellspacing="0">

      <tr>

        <th rowspan="2">rowspan</th>

        <th>rowspan</th>

      </tr>

      <tr>

        <td>가로병합</td>

      </tr>

    </table>

  

 

가상의 칸을 만들었다 생각하고 묶이는 칸은 삭제해 줌.

 

caption: 해당 테이블의 표의 의미, 타이틀 등을 설명해 줌

<caption></caption>

 

    <table border= "1">

      <caption> 테이블의 제목</caption>

      <tr>

        <td>table 1</td>

        <td>table 2</td>

      </tr>

    </table>

 

 

테이블 태그 바로 밑에 캡션 태그를 사용 가능, 테이블 위쪽 중앙에 자동으로 표시됨.

 

www.evernote.com/l/Alf4TJFdzzBHkrtN70VPSNp-LeWrzl1GA5s/

텍스트 관련 태그, table 태그