이 포스트에서는 CSS로 웹 폰트를 설정하는 방법에 대해 설명합니다. 웹 폰트로 사용할 수 있는 폰트는 대개 TTF, OTF, WOFF, WOFF2, SVG, EOT의 6가지가 있습니다. TTF 여러 곳에서 두루 사용되는 표준 트루타입 글꼴입니다. 거의 모든 브라우저에서 지원합니다. 다만 인터넷 익스플로러에서는 9부터 지원합니다. OTF TTF를 기반으로 한 오픈타입 글꼴입니다. TTF와 마찬가지로 거의 모든 브라우저에서 지원합니다. 다만 인터넷 … “CSS로 웹 폰트 설정하기” 더 읽기
이 포스트에서는 <span> 태그의 CSS로 <font> 태그를 대체하는 방법을 설명합니다. HTML의 유용한 태그 <span> 포스트에 설명한 바와 같이 과거에는 <font> 태그가 널리 쓰였으나 W3C에서 ‘HTML 문서에는 의미적인 기능을 부여한다’는 정책 기조를 수립함에 따라 HTML 4.01에서 <font> 태그를 표준에서 제외할 것을 예고하였고 HTML5부터 <font> 태그의 지원이 중단되었습니다. 이에 따라 기존의 <font> 태그는 비슷한 성격을 가진 <span> … “<font> 태그를 <span> 태그로 대체하기” 더 읽기
이 포스트는 HTML의 <span> … </span> 태그에 관한 내용입니다. 이 태그는 인라인 요소를 묶기 위한 태그입니다. 본래 글꼴 모양을 지정하기 위한 태그로 <font> … </font> 태그가 있었으나 크기의 미세한 지정이나 배경 글자색 지정이 불가능한 등 글꼴 모양 설정에 제약이 심하고 ‘HTML 문서에는 의미적인 기능을 부여한다’는 W3C의 기조와도 맞지 않아서 HTML 4.01 이후 권장하지 않는(deprecated) 태그가 … “HTML의 유용한 태그 <span>” 더 읽기
이 포스트에서는 CSS로 전환 효과(transition)를 구현하는 방법을 포스팅합니다. CSS로 롤오버 버튼 만들기 포스트에서 포스팅한 바와 같이 간단한 롤오버 버튼은 자바스크립트 대신 CSS로 구현할 수도 있다는 글을 포스팅한 바 있습니다. 이 CSS를 응용하면 CSS에 의한 형태 전환이 이루어질 때 바로 전환되지 않고 서서히 매끄럽게 전환되는 효과를 구현할 수 있습니다. 이를테면 크기가 변하는 상자의 경우 바로 변하지 … “CSS 전환 효과 구현하기” 더 읽기
이 포스트는 HTML의 <ins> … </ins> 태그와 <del> … </del> 태그에 관한 내용입니다. 이름에서도 보다시피 <ins> 태그는 내용의 추가를 의미하는 태그이고 <del> 태그는 내용의 삭제를 의미하는 태그입니다. 얼핏 보면 오해할 수 있지만 <del> 태그는 내용 자체가 눈에 보이지 않게 하는 게 아니라 가로줄을 그어 삭제된 내용임을 표시하는 태그입니다. 이와 같은 기능을 하는 태그로 <s> 태그와 … “HTML의 <ins>와 <del> 태그” 더 읽기
이 포스트는 HTML의 <abbr> … </abbr> 태그에 관한 내용입니다. 이 태그 이름인 abbr은 abbreviation의 약자로 ‘축약어’를 의미합니다. 즉, 이 태그는 축약어를 쓸 때 사용하는 태그입니다. HTML5 표준이 제정되기 전에는 축약어는 <abbr> 태그로, 두문자어는 <acronym> 태그로 구분하여 사용하였으나, 두 태그를 굳이 구분하여 사용할 필요성이 부족하다는 지적에 따라 HTML5에서는 <abbr> 태그로 통합되었습니다. 우선, 이 태그에 필요한 CSS를 … “HTML의 유용한 태그 <abbr>” 더 읽기
이 포스트는 HTML의 <base> 태그에 관한 내용입니다. <base> 태그는 HTML5 표준이 정해지기 전에도 이미 표준으로 정해져 있는 태그입니다. 이 태그는 <head> … </head> 안에 쓰여 마치 <meta> 태그와 같이 작동하는 태그로, 페이지의 링크가 상대경로로 되었을 때 그 기준이 될 경로를 지정하고 다른 페이지로 링크할 때 기본적으로 그 링크의 대상이 되는 창 혹은 프레임을 어디로 할 … “HTML의 유용한 태그 <base>” 더 읽기
이 포스트는 HTML5에서 추가된 <time> … </time> 태그에 관한 내용입니다. <time> 태그는 ‘HTML 문서에는 의미적인 기능을 부여한다’는 W3C의 기조를 반영하기 위해 HTML5에서 추가된 태그 중 하나입니다. 이 태그의 용도는 문서 내용 안에 어떤 날짜나 시간을 나타내는 표현이 있을 때 그 부분에 사용하여 알맞은 날짜나 시간을 컴퓨터가 인식할 수 있게 의미적으로 나타내는 데 사용합니다. 이 태그의 … “HTML5에서 추가된 유용한 태그 <time>” 더 읽기
이 포스트에서는 오픈그래프 태그에 관한 내용을 다룹니다. 오픈그래프(Open Graph)는 웹 페이지를 소셜 미디어와 연동하기 위한 기법입니다. 사이트가 소셜 미디어(트위터, 페이스북, 인스타그램 등)로 공유될 때 오픈그래프 정보가 우선적으로 활용됩니다. 여기에는 제목, 설명, 대표 이미지, URL 등이 들어갑니다. 오픈그래프 정보를 웹 페이지에 삽입할 때는 <head> … </head> 안에 메타 태그(<meta>)의 형태로 삽입합니다. 예를 들면, 다음과 같습니다. <meta … “소셜 미디어 연동을 위한 오픈그래프 태그” 더 읽기
이 포스트에서는 <div> 등의 태그로 그리는 박스 영역의 크기를 잡을 때 그 기준을 정하는 CSS에 대해서 서술합니다. 박스 크기의 기준을 정하는 CSS 프로퍼티의 이름은 box-sizing이며, 이 프로퍼티는 CSS3에서 새로 추가된 프로퍼티입니다. 이 프로퍼티가 가질 수 있는 값은 initial과 inherit를 제외하면 다음과 같이 두 가지가 있습니다. content-box 내용 영역을 기준으로 크기를 잡습니다. 즉, 바깥 여백(margin)과 외곽선(border)과 … “박스 크기의 기준을 정하는 CSS” 더 읽기