• 목차

텍스트 요소 1

<h1>텍스트 관련 요소들</h1>
<!-- 제목요소 heading 1 ~ 6단계 -->
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>

<!-- 문단 p(paragraph)-->
<p>문단</p>
<p>F12, Ctrl(CMD) + shift + I</p>

<!-- 줄내림 br -->
<p>
  첫번째 줄<br>
  두번째 줄<br><br>
  다음 줄
</p>

<!-- 공백과 특수문자: &코드명; -->
<p>공백을 5(&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)칸을 추가</p>
<h2>&lt;멋진제목&gt;</h2>
<p>copyright &copy;</p>

<!-- 수평선 hr -->
<hr>

<!-- width 폭 지정: px(고정), %(가변) -->
<hr width="50">
<hr width="50%">

<!-- blockquote 인용문 -->
<!-- cite 속성: 출처 명시함(홈페이지 url, 책은 출판번호) -->
<blockquote cite="<https://www.wa.or.kr/m1/sub1.asp>">정보통신접근성 (Web 접근성)은 「지능정보화기본법」에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항 입니다.</blockquote>

자주 쓰는 특수문자

텍스트 요소 2

<h2>q - 인용구</h2>
  <p>
    팀 버너스리가 <q style="color:red;" cite="url">웹의 힘은 그 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있어야 한다...</q>라고 말했다.
  </p>
  
  <h2>strong 과 b 요소</h2>
  <strong>strong 중요의 의미</strong>
  <p>내일은 <strong style="color: blue;">창립기념일</strong>이오니 모두 참석 당부드립니다.</p>
  <b>b - bold</b>
  <p>금주의 영화 중에서 제일 인상 깊었던 영화 <b>서울의 봄</b>입니다.</p>
  
  <h2>em과 i 요소</h2>
  <em>em 강조의 의미</em>
  <i>i 이탤릭 스타일</i>
  <p>이제 <em>퇴근</em>할 시간이니 <i>얼른 정리</i>합시다!</p>
  
  <h2>span - 텍스트를 분할</h2>
  <p>
    <span style="color:red;">둘리</span>의 나이는 
    <span style="color: blue;">50</span>이고 
    <span style="color:green;">쌍문동 우이천</span>이 주 서식지입니다.
  </p>

  <h2>mark - 형광펜 강조 효과</h2>
  <p>금주의 영화챠트 1위는 <mark>서울의 봄</mark>이 차지했습니다.</p>

  <h2>small - 작은 요약글</h2>
  <p><small>작은 요약글 텍스트</small></p>

  <h2>del과 ins - 삭제(delete) 및 추가(insert)</h2>
  <p>내일 열리기로 했던 <del style="color: red;">이벤트가 취소</del>되었습니다.</p>
  <p>나는 예전에 <del>짜장면</del>을 좋아했는데 지금은 <ins>짬뽕</ins>이 좋아</p>
  <!-- 상품목록 정보의 예시 -->
  <h4>롱코트</h4>
  <p>
    <del>
      <small>490,000원</small>
    </del>
    <ins style="color: blue;">60,000원</ins>
  </p>

  <h2>위첨자(sup), 아래첨자(sub)</h2>
  <p>X<sup>2</sup> = Y<sup>2</sup></p>
  <p>H<sub>2</sub>O</p>

연습문제