02 텍스트 관련태그

• 블록(block)태그
  텍스트를 블록으로 묶어 처리하는 태그
  텍스트가 포함된 블록 전체에 적용됨

• <hn>태그 -제목표시하기

  👉 <hn>제목</hn>
  

일반 텍스트보다 굵고 진하게 표시됨
숫자 1~6까지 사용 , 숫자가 커질 수록 제목글씨가 작아짐

• <p>태그

  👉 <p>텍스트</p>

  paragraph의 줄임말
  <p>태그를 표시하는 텍스트 단락은 </p>태그를 만날때까지 줄바꿈 없이 텍스트를 한줄로 표시함
  

• <br>태그
👉 <br>

  break의 줄임말
  줄바꿈에 사용되는 태그

• <hr>태그
👉 <hr>

  horizontal의 줄임말
  수평줄을 삽입할때 사용(분위기 전환용)
  기본적으로 가로선이 삽입되며, css를 이용해 가로선을 없앨 수 있음

• <blockquote>
👉 <blockquote>인용내용</blockquote>
  

다른 블로그나 사이트를 인용할 경우 이용
인용 사이트가 명확할경우 cite속성을 이용해 인용사이트 주소를 표시가능

• <pre>태그
👉 <pre>텍스트</pre>
  preformat의 줄임말
  소스에 표시한 공백이 브라우저에 그대로 표시됨
  <code> <samp> <kbd>같은 태그를 사용해 프로그램 소스를 표시할때도 소스의 형태를 그대로 보여줘야하기 때문에 <pre>태그가 사용됨
  

<pre>태그를 사용할때 웹문서를 소리로 읽어주는 기계나 점자로 표시해주는 기계는 <pre>태그가 적용된 부분은 건너뛰어 버리기 떄문에 그부분의 내용을 알수 있도록 대체 텍스트를 추가하는 것이 좋음

• 인라인레벨 태그
  줄바꿈 없이 텍스트를 표시함
  닫는 태그 생략 불가능

  • <strong>,<b>태그
<strong>굵게 강조할 텍스트</strong>
<b>굵게 표시할 텍스트<b>
    <strong>태그는 화면 낭독기에서 강조하고 싶은 부분/ 화면 낭독기가 강조되었다고 알려줌
    <b>태그는 글자를 굵게 표시

  • <em>,<i>태그
<em>이탤릭체로 강조할 텍스트</em>
<i>이탤릭체로 표시할 텍스트</i>
    <em>: 문장에서 흐름상 특정부분을 강조하고 싶을때 사용
    <i>:마음속 꿈이나 기술적인 용어, 다른언어의 관용구일때 사용, 단순히 이탤릭체로 표시할때 사용

  • <q>태그
    quote의 줄임말

    <blockquote>	<p>
    블록레벨	인라인레벨
    줄이바뀌어 나타남	줄바꿈 없이 다른내용과 함꼐 표시됨
    	인용내용에 따옴표를 붙여 표시

  • <mark>태그
<mark>텍스트</mark>
    선택한 부분의 배경이 노란색이되는 효과
    css의 background-color 속성을 사용해 색상을 바꿀 수 있음

  • <span>태그
<span>내용</span>
    태그 자체로는 아무의미 없음
    줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용할때 사용

  • <ruby>태그
<ruby>내용<rt>주석</rt></ruby>
    동아시아 국가들의 글자에 주석을 함꼐 표기하기 위한 용도로 사용됨
    주석으로 표시할 내용은 <ruby> 태그 안에 <rt>태그로 표시

    <p>루비(ruby)는 1995년 일본의 프로그래머인 마츠모토 유키히로(<ruby>松本幸広<rt>まつもとゆきひろ</rt></ruby>)가
        만든 프로그래밍 언어입니다</p>

    

  • 기타 텍스트 관련 태그들

    <abbr> 약자표시,title 속성을 함께 사용할 수 있음

    <cite> 웹문서나 포스트에서 참고 내용표시

    <code> 컴퓨터 인식을 위한 소스코드

    <kbd> 키보드 입력이나 음성명령 같은 사용자 입력내용

    <small> 부가 정보처럼 작게 표시되는 텍스트

    <sub> 아래첨자

    <sup> 위첨자

    <s> 취소선

    <u> 밑줄
    

• 목록을 만드는 태그

  <ul>태그

  <ul>
    <li>내용</li>
    <li>내용</li>
  </ul>

  순서가 필요하지 않은 목록(unordered list)
  <ul> 태그 안에 <li>(list item)태그를 사용해 각항목을 표시함.
  각 항목에 작은 원이나 사각형 같은 불릿이 붙음
  <li>태그의 타입 속성은 css를 이용해서 수정함

  <ol>태그
  순서가 필요한 목록 (ordered list)

  • <ol>태그 속성으로 순서 목록의 숫자와 속성변경
    1.type속성

    속성값	설명
    1	숫자(기본값)
    a	영문 소문자
    A	영문 대문자
    i	로마숫자 소문자
    I	로마숫자 대문자

  • css의 list-style-type라는 속성을 이용해 지정가능
  2. start 속성
     순서목록은 기본적으로 1부터 시작하는데 start 속성을 이용하면 중간번호부터 시작가능
  3. reversed 속성
     항목을 역순으로 표시

• </li>태그 생략과 목록 중첩
  여러 항목이 나열될 시 </li>를 안써도 자동으로 인식하기 때문에 생략해도 지장이 없음