2018. 1. 5. 14:59ㆍ화면 속/HTML5
지난 HTML 태그가 head영역에 주로 쓰인 태그라면,
이번에는 body영역에 주로 사용되는 HTML 태그에 대해 알아보도록 하겠습니다.
*지난 HTML 태그 정리
2018/01/04 - [광고쟁이의 IT_study/HTML5] - HTML5 Tag의 기본, 다양한 HTML의 tag들(with head)
body 영역의 위치는 head 다음으로,
우리가 직접 웹에서 보게되는 영역을 생각하시면 됩니다 :)
대표적인 첫 번째 태그, <p>태그 입니다.
<p>태그는 전에 설명했으니, 가볍게 넘어가도록 하겠습니다.
실제로, 문장을 잡아주는 역할 외에 큰 역할은 없습니다.
문장을 잡아주는 태그로 p태그와 함께 자주 사용되는 태그는
<h>태그 입니다.
<h1> 부터 <h6>까지 사용할 수 있으며,
h1
이 가장 크고 굵은 글자,
h6
이 가장 작은 글자로 이루어져있습니다.
headline의 약자인 듯, 제목처럼 강조하고 싶은 문구에 주로 사용되는 태그입니다.
모두 굵은 글자이나, h3 이후로 사이즈는 p태그보다 작아지는 것 같습니다.
<b>태그와 <string>태그는 '굵게' 표시를,
<i>태그와 <em>태그는 '이탤릭체'(기울임) 표시를,
<small> 태그는 텍스트 크기를 '작게'표시하고,
<del> 태그는 '텍스트 위에 라인'을 표시합니다.
body의 중심이 되는 '텍스트'에 효과를 주는 태그들을 알아봤습니다 :)
CSS를 적용시키는 것 보다 빠르게 구동시킬 수 있으니
유용하게 쓰일 수 있겠죠 :)
이 외에도 조금 독특하게 쓰이는 태그들이 있는데요,
'엔터'효과를 내는
<br>태그가 있습니다.
<br> 태그는 별도의 닫는 태그, </br>태그를 사용하지 않아도,
단독으로 사용되어 그 기능을 활용할 수 있습니다.
'엔터'와 함께 자주 쓰는 효과로 '띄어쓰기'가 있을텐데요,
HTML문서에서는 몇 번 스페이스바를 누르더라도
단 1회 만 적용되므로,
별도의 공백 태그를 넣어주어야 합니다.
스페이스 바 기능을 하는 태그는
태그입니다.
해당 태그는 <> 안에 담기지 않고 단독으로 사용됩니다.
오늘 소개해드릴 마지막 태그는
<hr>태그 입니다.
해당 태그역시 <br>태그와 마찬가지로
단독으로 사용합니다.
<hr>태그는 해당 부분에 '라인'을 그려주는 태그로,
이런 라인을 그려줄 수 있게 됩니다.
단락을 나눌 때 유용하게 쓰일 수 있겠죠 :)
body에는 이 외에도
시맨틱 태그를 이용한 header, footer 나
div, span 등 영역을 나누는 태그,
img 등의 멀티미디어를 첨부하는 태그와
a 등 하이퍼링크를 거는 태그 등 HTML전반에 사용되는 태그를
거의 모두 사용할 수 있습니다.
그리고 또한 head 영역에서 설명드렸던
<script>태그 또한 body영역에 작성해줄 수 있습니다.
웹의 로딩 속도를 빠르게 하기위하여
body 끝 쪽에 입력해주기도 합니다 :)
태그의 종류는 매우 많으니, 천천히 알아나가시면 좋을 것 같습니다.
'화면 속 > HTML5' 카테고리의 다른 글
| HTML5 UL과 OL의 차이, 리스트 만들기 (0) | 2018.01.17 |
|---|---|
| HTML5 LINK 연결하기 (0) | 2018.01.16 |
| HTML5 Tag의 기본, 다양한 HTML의 tag들(with head) (0) | 2018.01.04 |
| HTML5의 특징, 시맨틱 웹(Semantic Web) (0) | 2018.01.02 |
| HTML5 기본 문법, 요소(element), 속성(attribute) (0) | 2018.01.01 |