안녕하세요 기술지원팀 서정민입니다. html 공부하면서 편리한 태그들에 대해 포스팅 하려고 합니다.
<p> 태그 – 단락 만들기
내용 생략!
<blockquote> 태그 – 인용문 넣기
다른 블로그나 사이트에서 인용할 경우 <blockquote> 태그를 이용해서 표기합니다. 이때 인용한 사이트 주소가 명확할 경우
cite 속성(cite 속성은 <blockquote> 태그나 <q> 태그에서 인용한 글의 인용 출처를 명시하기 위한 속성입니다)을 이용해 인용 사이트 주소를 표시할 수 있습니다.
<blockquote [속성 =”속성 값”] > 인용내용 </blockquote>
<pre> 태그 – 입력하는 그대로 화면에 표시하기
HTML에서는 아무리 많은 공백을 넣더라도 브라우저 창에는 한 개의 공백만 표시됩니다.
하지만 <pre> 태그를 사용할 경우 소스에 표시한 공백이 브라우저에 그댜로 표시됩니다. <pre> 태그는 프로그램 소스를 표시할 때 사용합니다. 주로 <code>나 <samp> , <kbd> 같은 태그를 사용해 프로그램 소스를 표시해야 할 때 적당한 들여쓰기가 필요하기 때문에 <pre> 태그가 함께 사용됩니다.
<mark> 태그 – 형광펜 효과 내기
HTML5의 새로운 태그 중 <mark> 태그가 있습니다. 이 태그는 선택한 부분에 형광펜을 그어놓은듯한 효과를 만듭니다. HTML4에서는 텍스트에 형광펜을 그은 듯한 효과를 내려면 스타일시트를 사용해야 했지만, HTML5에서는 <mark> 태그로 이런 효과를 쉽게 낼수 있습니다.
<time> 태그 – 날짜 또는 시간 정보 표시하기
<time> 태그는 날짜나 시간과 관련된 부분에 사용됩니다. 하지만 웹 문서에 날짜나 시간을 자동을 표시해주는 태그는 아닙니다.
기본형에서 []로 표시된 datetime 속성은 기계가 인식할 날짜나 시간으로, 사용할수도 있고 사용하지 않을수도 있습니다.
<time [datetime=”값”] > 시간이나 날짜 관련 내용 </time>
실제로 <time> 태그를 사용한 부분은 브라우저 화면상에는 다른 텍스트와 똑같이 표시되지만,
웹 브라우저가 문서를 해석할 때 <time> 태그로 묶인 텍스트는 일반 텍스트가 아니라 날짜나 시간에 대한 정보를 가지고 있는 부분이라고 이해합니다.
<p><time>2012년 9월 2일 </time>부터 일주일간 휴가입니다</p>
날짜와 시간 모두를 인식할 것인지, 날짜나 시간만 인식할 것인지를 명확하게 지정하고 싶다면,
datetime이라는 속성을 이용해 원하는 형태로 지정할 수 있습니다.
이때 datetime 속성에서 사용 할 수 있는 날짜와 시간 형식은 다음과 같습니다.
<time datetime=”YYYY-MM=DDThh:mm:ssZ”>
<p><time datetime=”2012-09-12″>다음주</time>부터 일주일간 휴가입니다</p>
datetime 속성의 날짜와 시간 형식
YYYY 연도
MM 월
DD 일
T 시간을 함께 표시해야 할 경우 앞의 날짜와 뒤의 시간 사이를 구분해주는 표시
hh 24시간제로 표시한 시간 (예:오후 5시면 17시)
mm 분
ss 초
Z 시간대 (Z는 그리니치 시간대를 나타내는 Zulu의 약자)
날짜만 지정할때
<p>나는 <time datetime=”2013-12-25″>올해 크리스마스</time>에 가족과 여행을 떠날 예정이다.</p>
시간만 지정할때
<p>테마 파크는<time datetime=”09:00:00″>오전 9시</time>에 개장합니다.</p>
날짜와 시간을 지정할 때
<p>나는 <time datetime=”2013-12-25t10:00z”>올해 크리스마스의 오전</time>에 가족과 여행을 떠날 예정이다.</p>
<time> 태그나 datetime 속성을 사용한다고 해서 날짜나 시간이 자동으로 표시되는 것은 아닙니다.
다만, 날짜나 시간 정보를 브라우저가 인식하게 하여 웹 표준 문서를 만드는데 도움이 되는것입니다.