HTML 기초강좌, 기초용어정리 3탄 [강조태그,공백태그,ins태그,인용태그]

HTML 기초강좌, 기초용어정리 3탄 [강조태그,공백태그,ins태그,address태그]

HTML 기초강좌 세번째! 

이번 포스팅에서는 컨텐츠를 구성할 때 사용 할 수 있는 강조태그, 공백태그, address태그 등을 

집중적으로 살펴보려고 합니다. 사실 HTML 태그를 설명하기엔 너무 광범위하잖아요.

많이 사용하는 태그들과 기초적인 태그들을 위주로 찬찬히 알아나가 보겠습니다.

자 우선 오늘의 태그를 소스파일을 불러와볼까요?

오늘 설명해드릴 태그들이 모두 포함된 소스파일입니다.

이렇게 봐서는 뭐가 뭔지 모르겠죠? 자 그럼 이 소스파일을 적용시킨 웹화면을 볼까요?

위의 소스파일을 익스플로러에서 열면 이렇게 표시됩니다.

이렇게만 봐서도 어떤 부분에 어떤 효과가 쓰였는지 잘 모르겠죠? 

그렇다면 좀 더 보기 쉽게 태그가 적용된 부분들을 표시해보겠습니다.

태그가 포함된 부분들을 빨간 박스로 표시해봤습니다.

총 6가지의 태그가 적용되어 있는데요. 1번부터 차근차근 살펴보도록 하겠습니다.

 

첫번째로 살펴볼 태그는 공백태그 입니다. 

HTML에서 공백은 여러가지가 있는데요. 이번에 소개해드리는 공백은 우리가 흔히 쓰는 스페이스바!

그 공백을 입력해주는 태그입니다. 보통 태그들은 앞뒤에 <> 괄호가 붙는데요.

이 공백태그는 다른 괄호없이 &nbsp; 이렇게 단독으로 사용합니다.

대부분 컨텐츠를 작성할 때 스페이스바를 인식하여 따로 이 태그를 쓰지 않아도 되지만

이미지를 넣거나 스페이스바 공백을 인식하지 못하는 경우 직접 입력하여 사용하실 수 있습니다. 

<strong>

두번째로 살펴볼 태그는 강조태그 중의 하나인 <strong> 태그입니다.

글자의 굵기를 설정해줌으로써 강조효과를 줄 수 있습니다. 

앞선 포스팅에서 살펴봤던 <b> 태그와 표면적으로는 글자를 굵게 표시한다는 같은 효과를 줍니다만 

<strong>태그는 강조의 의미를 갖고 <b>태그는 단순히 글자의 굵기만 주는 태그입니다.

<em>

세번째로 살펴볼 태그는 글자에 기울임을 줘서 강조를 하는 <em>태그입니다.

<em>태그 역시 앞에서 살펴봤던 <i> 태그와 표면적으로는 글자에 기울임을 준다는 것에서 동일하지만

강조의 의미를 가지고 있기 때문에 단순히 기울임만 주는 <i> 태그와는 차이가 있습니다.

<acronym>

네번째로 소개해드릴 태그는 약어나 머리글자를 표시하는데 쓰는 acronym 태그입니다.

위의 이미지를 보시면 아시겠지만 UN이라는 단어는 United Nations의 약어죠.

UN이라는 글자위에 마우스를 가져다대면 위의 화면처럼 전체 내용이 보이도록 하는 태그가 바로 acronym 태그입니다.

<del>, <ins>

다섯번째로 살펴 볼 태그는 삽입된 컨텐츠를 표시하거나 삭제할 때 사용하는 del 태그와 ins 태그입니다.

del 태그는 컨텐츠를 삭제할 때 사용하고 ins는 표시할 때 사용합니다.

위에 예시 보이시죠? 보통 홈페이지를 만들 때 잘 사용하지는 않지만 알아두시면 도움이 될 태그입니다.

<address>

마지막으로 살펴볼 태그는 주소를 나타낼 때 사용하는 address 태그입니다.

address는 페이지의 작성자에 대한 연락처 상세정보를 나타낼 때 사용합니다. 

address 요소 내의 컨텐츠들은 대부분 기울임으로 표시합니다.

오늘은 총 6가지의 태그들을 살펴봤습니다. 

컨텐츠를 강조하는 태그와 공백을 넣는 태그 그리고 adress 태그 등

하지만! 아직 살펴봐야할 태그들이 넘치고 넘칩니다. 

다음 포스팅에서는 목록을 만드는 태그들에 대해서 살펴보도록 하겠습니다!

---