CSS로 원뿔형 그라디언트 구현하기

이 포스트에서는 CSS로 원뿔형(원추형) 그라디언트를 구현하는 방법을 설명합니다. 우선 아래 그림을 봐 주시기 바랍니다. 지금 이 페이지를 보고 있는 브라우저에서 원뿔형 그라디언트 CSS를 지원한다면, 양쪽 칸의 그림이 같은 그림으로 보일 것입니다. 현재 크롬 69 이상(안드로이드 크롬은 70 이상), 사파리 TP에서 지원합니다. 만약 왼쪽 칸이 회색 네모로 보이거나 아무것도 보이지 않는다면 지금 이 페이지를 보고 있는 … 더 보기 “CSS로 원뿔형 그라디언트 구현하기”

이미지 픽셀화로 렌더링하는 CSS

이 포스트에서는 CSS를 이용해 이미지를 픽셀화로 렌더링하는 방법을 설명합니다. 컴퓨터에서 그래픽 이미지를 처리하는 방식은 비트맵 방식과 벡터 방식이 있습니다. 벡터 방식은 이미지를 선으로 이루어진 정보로 저장하기 때문에 확대해도 모양이 깨지지 않지만, 비트맵 방식은 점묘화(여러 개의 점을 빽빽이 찍어서 그림을 그리는 기법)처럼 색깔이 있는 점을 배열해서 그림을 표현하는 방식이기 때문에 확대하면 소위 ‘계단 현상’이 발생합니다. 웹 … 더 보기 “이미지 픽셀화로 렌더링하는 CSS”

jQuery로 코나미 커맨드 이스터에그 구현하기

이 포스트에서는 제이쿼리를 써서 코나미 커맨드(⬆⬆⬇⬇⬅➡⬅➡🅱🅰 상상하하좌우좌우BA)를 입력하면 이스터 에그가 발동되게 하는 코드를 설명합니다. 우선 아래와 같이 코딩해 봅시다. var kkeys = [], konami = “38,38,40,40,37,39,37,39,66,65”; $(document).keydown(function(e) { kkeys.push( e.keyCode ); if ( kkeys.toString().indexOf( konami ) >= 0 ){ kkeys = []; alert(‘Hello, world!’); } }); 1번 줄에서 키 입력을 저장할 배열 변수를 미리 선언해 … 더 보기 “jQuery로 코나미 커맨드 이스터에그 구현하기”

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> 태그”

CSS 그라디언트 기능을 응용하여 줄무늬 만들기

이 포스트에서는 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>

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

CSS로 텍스트에 그라데이션 입히기

이 포스트에서는 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로 선형 그라디언트 구현하기 포스트에서 CSS를 사용하여 선형 그라디언트(색이 끝에서 다른 끝으로 가면서 변하는 형식)를 구현한 바 있는데, 방사형 그라디언트(색이 한 중심점에서 둥글게 퍼져 나가면서 변하는 방식)도 같은 방식으로 가능합니다. 기본적으로 다음과 같은 형식의 코드를 사용합니다. selector { background: #55ffff; background: -webkit-radial-gradient(#55ff55, #55ffff, #5555ff); background: -moz-radial-gradient(#55ff55, #55ffff, … 더 보기 “CSS로 방사형 그라디언트 구현하기”

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로 선형 그라디언트 구현하기”