텍스트와 하이퍼링크 관련 태그들
텍스트를 묶어서 처리하는 태그들
<p> - 단락 만들기
1. 태그로 표시하는 텍스트 앞뒤에서 줄바꿈이 일어난다.
2. 나중에 CSS를 이용해 텍스트 서식을 손쉽게 조절할 수 있다.
<blockquote> 태그 - 인용문 넣기
1. <blockquote [속성="속성 값]> 인용 내용 </blockquote>
<pre> 태그 - 입력하는 그대로 화면에 표시하기
1. 소스에 표시한 공백을 그대로 브라우저로 보여주는 태그
2. 주로 프로그램 소스를 표시할 때 사용한다.
3.<code> , <samp>, <kbd> 같은 태그들과 같이 사용한다.
다양한 텍스트 관련 태그들
//인라인 태그: 줄바꿈 없이 태그를 사용한 영역에만 적용되는 태그
<mark> 태그 - 형광펜 효과 내기
1. 선택한 부분에 형광펜을 그어놓는 듯한 효과를 준다.
2. <mark> 태그의 설정을 바꾸면 형광펜의 속성(색, 채도 등)을 바꿀수 있다.
<time> 태그 - 날짜 또는 시간 정보 표시하기
<time [datetime="YYYY-MM-DDThh:mm:ssZ"]> 내용 </time>
YYYY: 연도
MM: 월
DD: 일
T: 시간을 함께 표시해야 할 경우 앞의 날짜와 뒤의 시간 사이를 구분해주는 표시
hh: 24시간제로 표시한 시간
mm: 분
ss: 초
Z: 시간대
<strong>, <em> 태그 - 중요한 내용 강조하기
1. 전체 내용 중에서 강조하고 싶은 부분에 사용하는 태그.
2. <strong> 태그를 사용한 부분은 굵게 표시되고, <em> 태그를 사용하면 이탤릭체로
표시된다.
<b> 태그 - 굵게 표시하기
<i> 태그 - 이탤릭체로 표시하기
<q> 태그 - 인용한 내용 표시하기
1. <blockquote> 태그는 블록 레벨 태그이기 때문에 인용된 내용은 줄바꿈이 되고 다른 내용과 구별되도록 안으로 들여써진다.
2. BUT!!! <q> 태그는 인라인 레벨 태그이기 때문에 줄바꿈 없이 다른 내용과 한 줄에 표시
<span> 태그 - 줄바꿈 없이 영역 묶기
1. 태그 자체는 아무 의미 없음
2. 텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어서 스타일을 적용하려고 할때 사용
<kbd>
1. 키보드 입력이나 음성 명령과 같이 사용자 입력 내용을 표시할 때 사용하는 태그
<code>
1. 파일 이름이나 컴퓨터 프로그램 등 컴퓨터가 인식할 수 있는 소스를 표시하는 태그
<samp>
1. 프로그램 처리 결과를 표시하는 태그
<sup>
1. 수학 식을 표현할 때 텍스트에 위 첨자를 표현하는 태그
<sub>
1. 수학 식을 표현할 때 텍스트에 아래 첨자를 표현하는 태그
<s>
1. 문서에서 특정 텍스트를 제거한다는 의미로 취소선을 그리는 태그
<ul>, <ol>, <li> 태그 - 목록 만들기
1. 순서가 필요하지 않을 경우: <ul> 태그
2. 순서가 필요할 경우 <ol> 태그
1. type 속성: 순서 목록 앞에 붙는 숫자의 종류를 조절
2. start 속성: 중간 번호부터 시작가능
3. reversed 속성: 번호를 역순으로 표시 가능
3. 각 항목을 표시: <li> 태그
4. 불릿을 바꾸고 싶을 때: CSS의 list-style-type
// 불릿: 각 항목 앞에 작은 원이나 사각형
<ul>
<li> 내용 </li>
<li> 내용 </li>
</ul>
<ol [속성="속성 값"]>
<li> 내용 </li>
<li> 내용 </li>
</ol>
<dl>, <dt>, <dd> 태그 - 정의 목록 만들기
// 사전 구성을 떠올리자 '제목'과 그에 대한 '설명'으로 이루어진 정의 목록을 만든다.
1.<dt> 태그 = '제목'
2. <dd> 태그 = '설명'
표 관련 태그들
<table> 태그 - 표만들기
1. 표의 시작과 끝을 나타냄
2. layout을 만들 때 쓰지 말 것!!!
<tr>, <td>, <th> 태그 - 표의 행과 열 만들기
//<tr> 태그가 행 하나를 만든 후 <tr> 과 </tr> 태그 사이에 셀을 만드는 <td> 태그가 필요한 갯수만큼 삽입된다. <table>, </table> 태그 사이에 <tr> 태그가 세 번 사용되면 행이 3개가 만들어지고, 각 <tr> 태그 안에 <td> 태그가 두 번씩 사용되면 각 행에 셀이 2개씩 만들어진다.
// <th> 태그 역시 셀을 만드는 태그로서 해당 셀에 들어가는 내용을 제목으로 처리하여 셀의 가운데 배치하고 굵게 표시합니다.
colspan, rowspan 속성 - 행 또는 열 합치기
<td colspan="합칠 열의 개수"> 내용 </td>
<th colspan="합칠 열의 개수"> 내용 </th>
<td rowspan="합칠 행의 개수"> 내용 </td>
<th rowspan="합칠 행의 개수"> 내용 </th>
<caption> 태그 - 표에 제목 붙이기
1. 붙여진 제목은 표의 위쪽 가운데에 표시됩니다.
2.<caption> 태그는 <table> 태그 바로 다음에 사용해야 하며,
<table> 태그 하나에는 <caption> 태그 하나만 사용할 수 있다.
3. <caption> 태그를 사용하지 않을 경우 <table> 태그의 summary 속성을 이용해서 표의 요약 내용을 추가해야 한다. 즉 <caption> 태그나 summary 속성 중 하나는 반드시 사용한다.
<col>, <colgroup> 태그 - 여러 열 묶기
1. 몇 개씩 열을 묶어 한꺼번에 스타일을 지정하고 싶을 때 사용
2. <col> 태그는 한 열에 있는 모든 셀을 묶는 것으로, 주로 한 열에 똑같은 스타일을 적용하려 할 때 사용
3. 닫은 태그는 없음
4.<colgroup> 태그는 여러 개의 <col> 태그를 묶어 그룹으로 스타일을 적용하기도 하고, <colgroup span="2">처럼 span 속성을 이용해 열을 묶기도 한다.
//행을 묶는 태그
<colgroup>
<col> <colgroup span="값"> ... </colgroup>
<col>
...
</colgroup>
//<col> 태그와 <colgroup> 태그를 사용하겠다면 <tr> 태그와 <td> 태그 전에 사용해야 하며, <caption> 태그가 있다면 <caption> 태그 다음에 써야 한다. 그리고 <col> 태그를 사용한 열의 개수와 <colgroup> 태그를 사용한 열의 개수를 합했을 때 전체 열의 개수와 정확히 일치해야 한다.
<thead>, <tbody>, <tfoot> 태그 - 표의 제목과 본문 등 구분해주기
제목 본문 바닥
1. <tbody> 태그 이전에 <thead>와 <tfoot> 태그가 와야 함.
원하는 곳으로 연결해주는 하이퍼링크
<a> 태그 - 원하는 문서나 사이트로 연결하기
1. <a href="경로"> 텍스트 또는 이미지 </a>
새 창 또는 새 탭에서 링크 열기
//<a> 태그 안에 target 속성을 추가해주면 된다.
1. <a href="경로" target="_blank"> 텍스트 또는 이미지 </a>
링크를 미리 알려주는 툴팁
// 링크 위에 마우스 포인터를 올려놓았을 때 나타나는 작은 설명 박스
1. <a href="경로" title="링크 내용에 대한 요약 설명"> 텍스트 또는 이미지 </a>
한 페이지 안에서 이동할 수 있는 앵커
//웹 문서가 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커라고 한다.
사용법
1. 이동하고 싶은 위치마다 name 속성을 이용해 앵커를 만들고 각각 다른 이름을 지정한다.
<a name="앵커 이름"> 텍스트 또는 이미지 </a>
2. 이렇게 붙여놓은 앵커 이름들은 마치 링크를 만들 때처럼 이름을 링크한다.
<a href="#앵커 이름"> 텍스트 또는 이미지 </a>
댓글 없음:
댓글 쓰기