이 포스트에서는 CSS의 그라디언트 기능을 이용하여 줄무늬를 만드는 방법에 대해 설명합니다. 일단 다음 코드를 봅시다. selector { background: #55aaff; background: -webkit-linear-gradient(left, #55ffff 0, #55ffff 50%, #5555ff 50%, #5555ff 100%); background: -moz-linear-gradient(right, #55ffff 0, #55ffff 50%, #5555ff 50%, #5555ff 100%); background: -o-linear-gradient(right, #55ffff 0, #55ffff 50%, #5555ff 50%, #5555ff 100%); background: linear-gradient(to right, #55ffff 0, #55ffff … “CSS 그라디언트 기능을 응용하여 줄무늬 만들기” 더 읽기
이 포스트는 HTML5에서 추가된 <details> … </details> 태그에 관한 내용입니다. 이 태그는 기존에 자바스크립트를 이용해서 구현하였던 내용 접기/펼치기 기능을 자바스크립트 없이 구현하기 위한 태그입니다. 블로그 등을 보면 ‘더 보기’ 단추가 있고 누르면 숨겨져 있던 내용들이 나오며 ‘접기’ 버튼을 누르면 내용이 다시 숨겨지는 기능이 있었는데 바로 이 기능을 자바스크립트 없이 구현하기 위해 이 태그가 추가된 것입니다. … “HTML5에서 추가된 유용한 태그 <details>” 더 읽기
이 포스트에서는 CSS로 그라데이션 텍스트를 구현하는 방법을 설명합니다. 예전에는 텍스트에 그라데이션을 입히려면 이미지 파일을 사용하거나 텍스트 한 글자씩 색을 입히는 방식을 사용해야만 했으나, CSS를 이용하면 이런 방식을 쓰지 않고도 간단하게 그라데이션 텍스트를 구현할 수 있습니다. 다음 CSS 코드를 봅시다. .gradtext { background: #55ffaa; background: -webkit-linear-gradient(left, #55ff55, #55ffff); background: -moz-linear-gradient(right, #55ff55, #55ffff); background: -o-linear-gradient(right, #55ff55, #55ffff); … “CSS로 텍스트에 그라데이션 입히기” 더 읽기
이 포스트에서는 CSS로 방사형 그라디언트를 구현하는 방법을 설명합니다. CSS로 선형 그라디언트 구현하기 포스트에서 CSS를 사용하여 선형 그라디언트(색이 끝에서 다른 끝으로 가면서 변하는 형식)를 구현한 바 있는데, 방사형 그라디언트(색이 한 중심점에서 둥글게 퍼져 나가면서 변하는 방식)도 같은 방식으로 가능합니다. 기본적으로 다음과 같은 형식의 코드를 사용합니다. selector { background: #55ffff; background: -webkit-radial-gradient(#55ff55, #55ffff, #5555ff); background: -moz-radial-gradient(#55ff55, #55ffff, … “CSS로 방사형 그라디언트 구현하기” 더 읽기
이 포스트에서는 CSS로 선형 그라디언트를 구현하는 방법을 설명합니다. 예전에는 배경색을 단색으로밖에 지정할 수 없어서 그라디언트를 구현하려면 이미지를 이용해야만 했습니다. 하지만 CSS3에서 그라디언트 기능이 추가되면서 그라디언트는 이미지 없이 구현할 수도 있게 되었습니다. 우선, 그라디언트를 구현하려면 다음과 같은 CSS를 사용합니다. selector { background: #55aaff; background: -webkit-linear-gradient(#55ffff, #5555ff); background: -moz-linear-gradient(#55ffff, #5555ff); background: -o-linear-gradient(#55ffff, #5555ff); background: linear-gradient(#55ffff, #5555ff); } … “CSS로 선형 그라디언트 구현하기” 더 읽기
이 포스트에서는 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> 태그” 더 읽기