HTML 인라인 요소인 태그들

a태그 :
1a태그는 클릭했을 때 설정된 url로 이동시켜주는 하이퍼링크를 만들어주는 기능을 하는데 이때 여러 속성 값이 쓰인다. 인라인 요소이다.
2 href : 이동할 페이지에 주소(url)를 작성하는 속성이다 
3  target : _self,와 _blank가 있는데 _self가 기본값이다 
  _self = 해당 페이지에서 a태그에 href에 해당하는 페이지를 열어주고
  _blank=새로운페이지에서 a태그에 href에 해당하는 페이지를 열어준다.
4 인라인요소이다
다른 속성들도 많지만 이 두 개만 알고 있어도 사용하는데 문제가 없다.

ex)

<ul>
  <li><a href="https://naver.com">네이버</a></li>
  <li><a href="https://google.com" target="_blank">구글</a></li>
  <li><a href="https://whale.naver.com/ko/" target="_blank">네이버 웨일</a></li>
</ul>

위 코드를 확인해보면 ul과li태그를 사용하여 목록을 구성해줬고  a태그를 이용해  하이퍼링크를 설정해줬는데 
이때 href로 주소(url)을설정해줬고 target을 이용해 새로운 페이지에서 열리게 해 줬다 target을 설정하지 않은 태그는 기본값이 self이므로 작성하지 않았다.

a태그는 같은페이지 안에서 이동도 가능한데 이때 이동하고 싶은 태그에 아이디를 설정해주어 a태그에 href에 이동하고 싶은 태그에 아이디를 넣어주면 된다 
ex)

<style>
    ul li {
      margin-bottom: 1000px;
    }
  </style>
  <ul>
    <h2 id="naver">네이버를 클릴했을때 이곳으로 이동</h2>
    <h2 id="google">구글을 클릭했을때 이곳으로 이동</h2>
    <h2 id="naver-whale">네이버웨일을 클릭했을때 이곳으로 이동</h2>
    <li><a href="#naver">네이버</a></li>
    <li><a href="#google" target="_blank">구글</a></li>
    <li ><a href="#naver-whale" target="_blank">네이버 웨일</a></li>
  </ul>

abbr태그 : 
1약어(줄임말)를지정하는태그이다 title이라는 속성을 이용해 약어에 대한 설명을 적어줄 수 있다. 
2인 라인 요소이다

ex) 

<p>Using <abbr title="Hyper Text Markup Language">HTML</abbr> is fun and easy!</p>

위코드에서 p태그 안에 HTML이라는 내용을 abbr태그로 래핑 하였고 title을 이용해 설명을 적어줬다 화면에서 위 내용을 확인해보면 HTML부분에 밑줄이 그어져 있을 것이고 그 부분에 마우스 포인터를 두면
title에 적혀있는 설명이 나오게된다

b태그 :
1 bold에 줄임말로써 특정내용에 글자를 굵게 만든다 
2인 라인 요소이다

ex)

<p><b>동해물과</b> 백두산이 마르고 닮토록</p>

위코드를 확인해보면 b태그로 래핑 되어있는 동해 물과는 글자가 굵게 표시된다 

strong태그 : 
1strong태그는 의미에 중요성을 나타날 때 사용된다
2화 면상에 글자가 두껍게 표시된다.
3인 라인 요소이다 

ex)

 <p><b>동해물과</b> 백두산이 <strong>마르고 닮토록</strong></p>

위코드를 확인해보면 b태그로 래핑 되어있는 동해물과 와 strong태그에 있는 마르고 닮도록에 글자가 굵게 표시된다 
b태그와 비교하자면 글자가 두껍게 표시된다는 공통점이있지만 strong태그는 정보통신기기(눈이 보이지 않는 사람을 위해 글을 읽어주는 프로그램)가 글을 읽을 때 강하게 발음하지만 b태그에는 그런 기능이 없다.

mark태그 :
1mark태그로 래핑 하면 래핑 된 글자가 하이라이팅 된다 즉 래핑 된 글자에 배경색이 노란색으로 형광팬칠 되는 기능이 있다.
2인 라인 요소이다 

ex)

<p><b>동해물과</b> 백두산이 마르고 <mark>닮토록</mark></p>

위코드에서 mark태그로 래핑 된 닮도록에 배경색이 노란색으로 칠해졌음을 확인할 수 있다.

em태그 :  
1의미를 강조할 때 쓰인다. 
2 중첩이 가능하고 중첩할수록 의미가 강해진다 
3 정보통신 보조기기(눈이 보이지 않는 사람을 위해 글을 읽어주는 프로그램)가 글을 읽을 때 강조해서 발음한다.
4 글씨체가 이탤릭체(기울임체)로 표시된다.
5인 라인 요소이다.

ex)

<p><b>동해물과</b> 백두산이 <em><em><em>마르고</em></em></em> <mark>닮토록</mark></p>

위코드를 화면상에 출력해보면 마르고에서 변화한 것은 글자가 기울어질 뿐이지만 정보통신기기가 글을 읽을 때는 강하게 발음하는 효과가 있고 중첩될수록 발음이 더 강해진다.

i태그:
1 i태그는 글자체를 기울임체로 바꿔주는 기능이 있다.
2인 라인 요소이다 

ex)

<p><i>동해물과 백두산이 마르고 닮토록</i></p>

위코드를 확인해보면 i태그로 묶인 내용에 글자가 기울어졌음을 확인할 수 있다.

dfn태그 :
1 definiton의약어로 용어를 정의할 때 사용되는 태그이다 
2 inline요소이다 
ex)

<p>hello <dfn>HTML</dfn></p>

위코드에 dfn태그로 정의된 HTML은 기울임체로 출력된다.

cite태그 :
cite태그는 창작물(책, 논문, 영화, tv 프로그램 등등)의 제목을 설정하는 태그이다 
인라인 요소이다.
ex)

 <p><cite>무한도전</cite> 무한도전은 mbc에서 방영되는 프로그램이다</p>

위 코드에 cite태그로 래핑 된 무한도전은 이탤릭체로 표시된다.

q태그:
q태그는 인용문을 정의할때 사용된다 
cite라는 속성을이용해 인용문을 가져온 사이트에 주소(url)를 적어줄 수 있다.
blcokquote와 동일한 기능을 가지지만 q태그는 주로 짧은 인용문을 작성할 때 사용된다.
인라인 요소이다.
ex)

<p><q cite="http://www.aunaenews.com">연탄재 함부로 발로 차지 마라 너는 누구에게 한번이라도 뜨거운 사람이었느냐</q></p>

인용문인만큼 ""표 사이에 내용이 표시되는 것을 확인할 수 있다.

u태그 :
1u태그는 글자에 밑줄을 설정해준다 
2인라인요소이다.
3a태그와 헷갈릴 수 있기 때문에 주의해서 사용해야 한다.
ex)

<p><u>동해물</u>과 백두산이 마르고 닮도록</p>

위코드를 확인해보면 u태그로 감싸진 동해물에 밑줄이 그 지게 된다  

sup태그, sub태그:

sup태그:윗첨자를 만드는 기능을 한다
sub태그:아랫 첨자를 만드는 기능을 한다.
인라인 요소이다
ex)

<p>x<sup>4</sup>+y<sup>2</sup>,H<sub>2</sub>O</p>

위 코드를 확인해보면 윗첨자와 아랫 첨자가 생성되었음을 확인할 수 있다.

span태그
1 div태그와 같이 의미를 가지지않는태그이다
2 인라인요소이다.

ex)

<p>동해물과<span style="background-color: red; color: white;">백두산</span>이 마르고 닭도록</p>

위 코드와같이 특정 글자에 style을 적용하고 싶을 때 주로 사용된다.

br태그
1 빈태그로써 닫히는 태그가 없다 
2 태그를 쓴 다음 글에 줄바꿈을 해준다
3 인라인요소이다.

ex)

<p>동해물과 백두산이 마르고 닮토록 <br>
    하느님이 보우하사 우리나라 만세
  </p>

위코드를 확인해보면 닮토록 다음 내용이 줄 바꿈 되었음을 확인할 수 있다.
br태그는 여러번쓰면 쓴 만큼 줄 바꿈이 된다.
줄 바꿈 된 내용과 내용 사이에 줄 간격이 너무 짧아서 br태그를 여러 번 사용해서 간격을 만드는 것은 하면 안 된다 css를 이용하는 것을 권장한다