인라인 요소는 가로, 세로 값을 가질 수 없어서 레이아웃보다는 텍스트를 다루는데 적합하다.
그래서 글씨를 다루는 태그들은 대부분 인라인 요소이다. ( <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>을 적용한 것. 둘 다 폰트가 두꺼워지는 효과가 있다.
<mark>
사용자의 주의를 끌기 위해 하이라이팅 할 때 사용
<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>- 추가된 텍스트 표시
