심심해서 만들어 본 코드인데, 이것보다 더 좋은 방법이 분명히 있을 거라는 걸 느끼면서도 머리가 안 굴러가서 일단 이대로 올려봅니다. 블로그가 너무 오랫동안 놀고 있다는 사실에 약간의 압박감(또는 자책감)을 느꼈다고나 할까...? 마우스로 브라우저 화면 중 어딘가를 클릭하면, 그 위치에 잠시동안 잔상이 생겼다가 사라지는 프론트엔드 코드입니다. 마우스 클릭 시마다 잔상을 남기는 div.pointer 요소가 새로 생기고, 기존의 div.pointer 요소는 제거되는 방식으로 동작합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45..
[CSS] position 속성 사용 시 left right 또는 top bottom 속성을 동시에 사용하면?
안녕하세요. 이번 포스팅에서는 postion 속성 사용 시 상하좌우 오프셋을 지정하는 데 사용하는 top, bottom, left, right 속성에 대한 이야기를 살짝 해보겠습니다. position 은 요소의 배치 방법을 정의하는 속성입니다. relative, absolute 등의 속성값을 이용해 배치 방법을 결정하면, top bottom left right 속성값들이 오프셋을 정의하여 요소의 위치를 결정합니다. 가령 다음과 같이 코드를 작성하면 요소는 원래 있어야 할 곳보다 윗면(top)에서 100px 만큼, 왼쪽면(left)에서 200px 만큼 떨어져 다음과 같이 자리를 잡게 됩니다. 이 경우 left 속성이 왼쪽면에서 얼마만큼 떨어져야 할지를 정의해주고 있는 것인데, 만약 right와 left 위..
[CSS] linear-gradient 사용법 그리고 예제
소개 CSS 의 linear-gradient() 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성합니다(출처 MDN). 함수의 결과 생성되는 이미지는 이미지 요소의 한 종류이므로 이미지가 적용되는 곳에 대해서만 이를 사용할 수 있습니다. 즉 background-color 또는 color 와 같은 속성에는 사용할 수 없습니다. 사용법 linear-gradient() 함수 사용법은 다음과 같습니다. 1 linear-gradient(방향_또는_각도, 색상_그리고_정지점1, 색상_그리고_정지점2, ... 색상_그리고_정지점n); 방향 또는 각도 미리 정의된 키워드로 표현한 그라디언트 진행 방향, 또는 진행 각도를 첫 번째 인자로 전달합니다. 이는 선택사항이나, 지정하지 않을 경우 'to ..
[CSS] 모달창 + 어두운 배경 반드는 기본적인 방법
안녕하세요! 오늘은 아래와 같은 모달창을 만들 때 필요한 기법(?)을 소개하도록 하겠습니다. 모달창이란 사용자와의 상호작용을 위해 제공되는 인터페이스의 한 종류이비다. 보통 모달창을 띄우게 되면 화면의 가운데에 모달창을 노출시키고 나머지 부분은 검고 투명한 배경으로 처리하는 경우가 많이 있는데, 이를 위한 코드를 소개해드리겠습니다. HTML 1 2 3 4 5 Hello, this is modal window 위 코드에서 class="model__background"에 해당하는 div 태그는 배경을 지정하기 위해 마련한 태그입니다. 그 안에 들어 있는 class="modal__box" 영역이 실제 모달창을 표현할 영역이 되고, 이 박스에 어떤 콘텐츠를 구성하냐에 따라 모달창의 모습이 달라집니다. 참고로 모..
[CSS] 007 효과 애니메이션 구현하기
안녕하세요! 오늘도 CSS 애니메이션 예제를 하나 만들어봤습니다. 이러한 효과를 어떻게 부르는지 정확히 알지 못해서 007효과라고 표현했는데, 구현한 효과는 다음과 같습니다. ...네! 펭귄군 캐릭터가 배경 이미지로 지정된 영역을 남색 영역이 덮고 있는 상태에서, 투명한 원이 왔다갔다 하면서 원에 해당되는 부분만 배경 이미지가 노출되게 만든 애니메이션 효과입니다. 영화 007 시리즈의 오프닝과 느낌이 비슷하여 '007 효과 애니메이션 구현하기'라 이름 붙여봤습니다(정확한 이름 아시는 분 알려주세요...). 여기에 필요한 프로그래밍 언어는 HTML과 CSS인데, 각 코드는 다음과 같이 구현하였습니다. 1 2 3 4 5 div 가 세 번 사용되었고, 각각의 class를 통해서 역할을 구분하였습니다. cont..
안녕하세요! 오늘은 심심풀이로 CSS 애니메이션을 활용해 타이핑 효과를 구현하는 코드를 작성해보았습니다. 표시하고자 하는 텍스트를 미리 정해 둔 상태에서 시작해야 하므로 가정 먼저 다음과 같은 HTML 코드를 작성해주어야 합니다. 1 00000 정말로 초간단한.. 숫자 0 다섯개입니다. 숫자 0 크기를 기준으로 한 글자의 크기를 정할 예정이므로 0 외에 다른 문자는 사용하지 않았습니다. 목표는 이 숫자들이 하나씩 타이핑되는 것처럼 보여지는 페이지를 만드는 것입니다. 그럼 다음, CSS 코드입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 @keyframes typing{ from{ width: 0; } } @keyframes cursor{ 50%{ border-color: t..