HTML의 구절 태그 6가지

이 포스트에서는 HTML의 6가지 구절 태그에 대한 내용을 다룹니다. HTML에서 쓸 수 있는 구절 태그는 어떤 구절 내에서 해당 태그로 감싼 내용에 어떤 효과를 주면서 그 의미를 분명히 하는 데 쓰입니다. HTML5에서 추가된 <mark> 태그도 같은 이유로 추가되었습니다. HTML5 전부터 쓰여 지금도 표준으로 쓰이는 6가지 구절 태그들은 다음과 같습니다. <em> 글에서 중요한 부분을 표시합니다. 기본적으로 … 더 보기 “HTML의 구절 태그 6가지”

HTML의 <blockquote> 태그와 <q> 태그

이 포스트에서는 <blockquote> … </blockquote> 태그와 <q> … </q> 태그에 관한 내용을 설명합니다. 이 두 태그는 인용문을 표현하기 위해 사용하는 태그라는 공통점이 있습니다. 하지만 다른 점이 있는데, 이 두 태그의 차이는 요약하자면 <div> 태그와 <span> 태그의 차이와 비슷합니다. <blockquote> 태그는 이름이 block과 quote의 합성어라는 특징에 걸맞게 인용문을 통째로 하나의 블록으로 할당합니다. 반면에 <q> 태그는 인용문을 … 더 보기 “HTML의 <blockquote> 태그와 <q> 태그”

HTML5에서 추가된 유용한 태그 <details>

이 포스트는 HTML5에서 추가된 <details> … </details> 태그에 관한 내용입니다. 이 태그는 기존에 자바스크립트를 이용해서 구현하였던 내용 접기/펼치기 기능을 자바스크립트 없이 구현하기 위한 태그입니다. 블로그 등을 보면 ‘더 보기’ 단추가 있고 누르면 숨겨져 있던 내용들이 나오며 ‘접기’ 버튼을 누르면 내용이 다시 숨겨지는 기능이 있었는데 바로 이 기능을 자바스크립트 없이 구현하기 위해 이 태그가 추가된 것입니다. … 더 보기 “HTML5에서 추가된 유용한 태그 <details>”

<font> 태그를 <span> 태그로 대체하기

이 포스트에서는 <span> 태그의 CSS로 <font> 태그를 대체하는 방법을 설명합니다. HTML의 유용한 태그 <span> 포스트에 설명한 바와 같이 과거에는 <font> 태그가 널리 쓰였으나 W3C에서 ‘HTML 문서에는 의미적인 기능을 부여한다’는 정책 기조를 수립함에 따라 HTML 4.01에서 <font> 태그를 표준에서 제외할 것을 예고하였고 HTML5부터 <font> 태그의 지원이 중단되었습니다. 이에 따라 기존의 <font> 태그는 비슷한 성격을 가진 <span> … 더 보기 “<font> 태그를 <span> 태그로 대체하기”

HTML의 유용한 태그 <span>

이 포스트는 HTML의 <span> … </span> 태그에 관한 내용입니다. 이 태그는 인라인 요소를 묶기 위한 태그입니다. 본래 글꼴 모양을 지정하기 위한 태그로 <font> … </font> 태그가 있었으나 크기의 미세한 지정이나 배경 글자색 지정이 불가능한 등 글꼴 모양 설정에 제약이 심하고 ‘HTML 문서에는 의미적인 기능을 부여한다’는 W3C의 기조와도 맞지 않아서 HTML 4.01 이후 권장하지 않는(deprecated) 태그가 … 더 보기 “HTML의 유용한 태그 <span>”

HTML의 <ins>와 <del> 태그

이 포스트는 HTML의 <ins> … </ins> 태그와 <del> … </del> 태그에 관한 내용입니다. 이름에서도 보다시피 <ins> 태그는 내용의 추가를 의미하는 태그이고 <del> 태그는 내용의 삭제를 의미하는 태그입니다. 얼핏 보면 오해할 수 있지만 <del> 태그는 내용 자체가 눈에 보이지 않게 하는 게 아니라 가로줄을 그어 삭제된 내용임을 표시하는 태그입니다. 이와 같은 기능을 하는 태그로 <s> 태그와 … 더 보기 “HTML의 <ins>와 <del> 태그”

HTML의 유용한 태그 <abbr>

이 포스트는 HTML의 <abbr> … </abbr> 태그에 관한 내용입니다. 이 태그 이름인 abbr은 abbreviation의 약자로 ‘축약어’를 의미합니다. 즉, 이 태그는 축약어를 쓸 때 사용하는 태그입니다. HTML5 표준이 제정되기 전에는 축약어는 <abbr> 태그로, 두문자어는 <acronym> 태그로 구분하여 사용하였으나, 두 태그를 굳이 구분하여 사용할 필요성이 부족하다는 지적에 따라 HTML5에서는 <abbr> 태그로 통합되었습니다. 우선, 이 태그에 필요한 CSS를 … 더 보기 “HTML의 유용한 태그 <abbr>”

HTML의 유용한 태그 <base>

이 포스트는 HTML의 <base> 태그에 관한 내용입니다. <base> 태그는 HTML5 표준이 정해지기 전에도 이미 표준으로 정해져 있는 태그입니다. 이 태그는 <head> … </head> 안에 쓰여 마치 <meta> 태그와 같이 작동하는 태그로, 페이지의 링크가 상대경로로 되었을 때 그 기준이 될 경로를 지정하고 다른 페이지로 링크할 때 기본적으로 그 링크의 대상이 되는 창 혹은 프레임을 어디로 할 … 더 보기 “HTML의 유용한 태그 <base>”

HTML5에서 추가된 유용한 태그 <time>

이 포스트는 HTML5에서 추가된 <time> … </time> 태그에 관한 내용입니다. <time> 태그는 ‘HTML 문서에는 의미적인 기능을 부여한다’는 W3C의 기조를 반영하기 위해 HTML5에서 추가된 태그 중 하나입니다. 이 태그의 용도는 문서 내용 안에 어떤 날짜나 시간을 나타내는 표현이 있을 때 그 부분에 사용하여 알맞은 날짜나 시간을 컴퓨터가 인식할 수 있게 의미적으로 나타내는 데 사용합니다. 이 태그의 … 더 보기 “HTML5에서 추가된 유용한 태그 <time>”

소셜 미디어 연동을 위한 오픈그래프 태그

이 포스트에서는 오픈그래프 태그에 관한 내용을 다룹니다. 오픈그래프(Open Graph)는 웹 페이지를 소셜 미디어와 연동하기 위한 기법입니다. 사이트가 소셜 미디어(트위터, 페이스북, 인스타그램 등)로 공유될 때 오픈그래프 정보가 우선적으로 활용됩니다. 여기에는 제목, 설명, 대표 이미지, URL 등이 들어갑니다. 오픈그래프 정보를 웹 페이지에 삽입할 때는 <head> … </head> 안에 메타 태그(<meta>)의 형태로 삽입합니다. 예를 들면, 다음과 같습니다. <meta … 더 보기 “소셜 미디어 연동을 위한 오픈그래프 태그”