텍스트를 묶어주는 태그

hn 태그 -제목표시

기본형: <hn>제목</hn>
각 웹 콘텐츠 영역에서 제목을 표시 할때 사용하는 태그
크기: h1> h2> h3> h4> h5> h6    

h1

h2

h3

br 태그- 줄바꾸기

  기본형: <br>
  줄을 바꿀 위치에 <br>태그를 사용. 닫는 태그x

hr태그 -분위기 전환

기본형:<hr>
주제가 바뀔 때 분위기 전환. 수평 줄 생김

p태그 - 텍스트 단락

기본형:<p>텍스트</p>
입력한 내용 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어짐

가나다

라마바사

아자차타카파

blockquote 태그 -인용문 넣기

기본형:<blockquote>인용 내용</blockquote>
다른 텍스트보다 안으로 들여 써짐.

인용 내용

텍스트를 한줄로 표시하는 태그

strong, b -굵게 표시 / em,i - 이탤릭체로 표시

<strong>
<b>
<em>
<i>
strong, em: 흐름상 특정부분을 강조하고싶을때 사용
b, i : 단순히 표현하고싶을때 사용

q태그 - 인용내용 표시

줄바꿈 없이 다른 내용과 한 줄에 인용 내용 표시
인용 내용 앞뒤에 따옴표 (" ") 추가됨

mark - 형광펜 효과

<mark> 태그로 묶은 부분의 배경색이 노랑으로 표시.
css를 통해 다른색으로 변경가능

span, div - 영역묶기

<span> - 줄 안에서 (인라인)묶기
<div> - 줄 바꿔(블록)단락으로 묶기

목록을 만드는 태그

ul, li -순서 없는 목록

각 항목 앞에 불릿이 붙여짐
CSS의 list-style-type 속성으로 불릿 수정

ol, li -순서 목록

각 항목 앞에 숫자가 붙여짐
<ol> 태그의 속성
	- type  속성: 불릿 앞의 숫자 조정
    - start 속성: 중간 번호부터 수정
    - reserved 속성: 역순으로 표시
<ul>
  <li>1일차
    <ol type= "a">
    	<li>해녀 박물관</li>
        <li>낚시 체험</li>
    </ol>
  </li>
  <li>2일차
    <ol start="3">
      <li>용눈이 오름</li>
      <li>만장굴</li>
      <li>카약체험</li>
    </ol>
  </li>
</ul>

• 1일차
  1. 해녀 박물관
  2. 낚시 체험
• 2일차
  5. 용눈이 오름
  6. 만장굴
  7. 카약체험

표를 만드는 태그

row: 행
column: 열
<table>~</table>:표 전체
<tr>~</tr> : 행
<td>~</td> : 셀, <th> ~ </th> : 제목셀
<table>
		<tr>
			<th>1행 1열제목 셀</th>
			<td>1행 2열</td>
			<td>1행 3열</td>
		</tr>
		<tr>
			<th>2행 1열제목 셀</th>
			<td>2행 2열</td>
			<td>2행 2열</td>
		</tr>
	</table>

1행 1열제목 셀	1행 2열	1행 3열
2행 1열제목 셀	2행 2열	2행 2열