[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> 취소선 표현
<sub></sub>: 글자가 아래로 작아지는 아래첨자
<sup></sup>: 글자가 위로 작아지는 위첨자
<span>글자를 꾸며주는 역할</span>
특수문자:
&, 공백, <, > , * 등등..
띄어쓰기가 절대 여러번 되지 않음. 스페이스바 여러번을 눌러도 한번밖에 적용되지 않음
반드시 기억.
<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 태그
텍스트 관련 태그
~
헤더 텍스트 : 굵고, 사이즈가 지정되어 있음. 단락에 대한 구분이 표현되어져있는 성격
태그 : 단락이 구분되어짐. 글자가 얇음.
: 단락에 대한 구분 h태그와 p태
www.evernote.com