html 요소(3)_인라인 텍스트

인라인 요소는 가로, 세로 값을 가질 수 없어서 레이아웃보다는 텍스트를 다루는데 적합하다.
그래서 글씨를 다루는 태그들은 대부분 인라인 요소이다. ( <p> <h1> 등 제외 )

a

• ( Anchor )
  페이지의 위치, 파일, 이메일 주소와 그 외 다른 url로 연결할 수 있는 하이퍼링크를 만듦

• href로 경로를 설정하고, target으로 링크가 보여지는 위치를 지정

<a href="url" target="_blank">
  
<a href="#title">    <!-- id 값을 경로로 지정할 수도 있음 -->

<a target="_blank">  <!-- 새 탭에 띄움 -->
<a target="_self">   <!-- 현재 창에 띄움(기본값) -->

<a download>         <!-- 리소스 다운로드하는 용도 -->

span

• 아무 의미 없이 영역을 나누는 역할

• <div>와 유사하나 <div>는 블록 요소이다.
  <span>은 대표적인 인라인 태그로 한줄에 여러개 작성 가능 !

• 굳이 따지자면,
  레이아웃을 다룰 때는 <div> 텍스트를 다룰 때는 <span>이 적절할 것 같다.

br

• 줄 바꿈

안녕하세요<br>
<br>
<br>
반갑습니다.

• 위와 같이 간격을 만들기 위한 용도로는 적절하지 않음

위에서 본 <br>태그처럼 단순히 꾸미는 용도로 사용하는 것이 적절하지 않은 태그들이 있다.

스타일링 태그 ?

<b> <strong>

첫 번째는 <b>를 적용,
두 번째는 <strong>을 적용한 것. 둘 다 폰트가 두꺼워지는 효과가 있다.

💡 b / strong 태그의 차이점

<mark>

사용자의 주의를 끌기 위해 하이라이팅 할 때 사용

<i> <em>

첫 번째는 <i>를 적용,
두 번째는 <em>을 적용한 것. 둘 다 폰트가 기울어지는 효과가 있다.

💡 i / em 태그의 차이점

<u>

밑줄 효과

위의 요소들은 모두 텍스트를 강조하는 효과가 있지만, 단순히 텍스트를 꾸미기 위한 용도로는 적합하지 않다.

텍스트를 스타일링 하고 싶다면
font-size: bold; font-style: italic; text-decoration: underline; 등과 같은 css를 이용하는 것이 적절하다!

그 외

• <sup> / <sub> - 위 첨자 / 아래 첨자

• <abbr> - 약어에 대한 설명 제공

<abbr title="HyperText Markup Language">HTML</abbr>

• <dfn> - 용어임을 정의

• <cite> - 창작물에 대한 참조. (책, 논문, 영화, 노래 등의 제목)

• <q> - 짧은 인용문

• <code> - 컴퓨터 코드를 작성할 수 있음. monospace 폰트를 사용하여 코드처럼 보이게 함

  

• <del> - 삭제된 텍스트 표시

• <ins> - 추가된 텍스트 표시