Html #3 -태그 종류(Inline속성 태그)

Inline속성 태그

• inline속성을 가지고 있는 태그들은 여러개 출력시 가로로 출력되며, 출력된 결과물 사이에 공백이 1칸씩 생긴다.
• 줄의 속성이 있어서 넓이 높이를 가질 수 없다.
• block속성과는 다르게, 내용이 포함된 부분까지만 영역을 가진다.

글자를 굵게 표현하는 태그 - <b> , <strong>

• 두 태그 모두 글자를 굵게 강조하는 태그. 출력시 눈에 차이점이 보이지는 않는다.
• <b> : 문장의 일부를 단순 강조할 때 사용.
• <strong> : 시각장애인들을 위한 웹접근성을 고려한 태그로 화면낭독기 (센스리더-시각장애인용 화면낭독기 프로그램)에서 구분할 수 있음.
• 사용자들이 반드시 알아야하는 경고의 의미를 담은 내용은<strong>태그를 이용하는 것이 좋음.

글자를 기울여 표현하는 태그 - <i> , <em>

• 글자를 강조할 때 사용하는 태그로, 적용시 기울임서체(이탤릭체)로 표현해줌.
• <i> : 마음속의 생각이나 용어, 관용구 등에 사용.
• <em> : 문장의 흐름에서 특정 부분을 강조할 때 사용
• 두 태그를 아주 엄격하게 구분해서 사용하지는 않음.

취소선을 나타내는 - <s>태그, 밑줄을 나타내는 - <u>태그

• <s> : 글자 중앙에 취소선을 그어서 내용이 취소됐음을 나타내는 태그.
• <u> : 글자 밑에 내용을 강조하기 위해 밑줄을 나타내는 태그.

★★★★★글자의 특정 부분을 꾸미는 태그 - <span>

• span 태그는 글자의 일부분을 꾸밀 때 주로 사용하는 태그로, inline 속성의 대표 태그이다.
• 단순 글자를 꾸미는 용도 이외에도 햄버거 버튼을 만들거나 디자인 요소를 만들때 많이 사용된다.

기타 태그

• <sup> : 위첨자
• <sub> : 아래첨자

<p>
        <b>Lorem, ipsum</b> dolor <strong>amet 		consectetur</strong> adipisicing elit. 
        <em>Fuga excepturi quasi</em> ab? Quae ut <s>itaque</s> <u>aperiam</u> 
        <sup>1</sup><i>tempora repellendus</i><sub>2</sub>  in dolorem odio obcaecati. 
        <h2>Perferendis</h2> eius nesciunt <del>itaque</del> maiores 
        aliquam quia deserunt.
</p>
     
      <p>안녕하세요.</p>
      <p>반갑습니다.</p>
      <i>제 이름은</i>
      <em>홍길동입니다.</em><br>
      <span style="color : red;">오늘 뭐 먹지?</span>