안녕하세요! 오늘은 심심풀이로 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..
[제이쿼리] 미니프로젝트 - 타이핑 게임
안녕하세요 탐구소년입니다. 오늘은 HTML, CSS, JAVASCRIPT 공부를 갓 시작하신 분들이 도전해보시면 좋을 만한 프로젝트(?)를 하나 준비해봤습니다. 이름은 타이핑 게임으로 정해보았습니다. 프로젝트의 결과물은 다음과 같습니다. 페이지가 열리면 위와 같은 화면이 등장하고 여기에는 남은 시간, 영어 단어, 입력창 그리고 점수가 표시됩니다. 시간은 8초부터 시작을 하고, 남은 시간이 0초가 될 때까지 화면에 보이는 영어단어를 타이핑하는 게임입니다. 정확하게 타이핑을 마쳤을 때마다 스코어는 하나씩 올라가고, 영어단어는 새로운 것으로 교체되며 입력창은 리셋이 됩니다. 그리고 점수를 딸 때마다 시간은 소폭 증가하여 게임을 오래 지속할 수 있게 됩니다. 기본적으로 HTML과 CSS를 사용해서 형태를 구성했..
시길(sigil) 전자책 코딩하기 : 글상자 만들기
안녕하세요 탐구소년입니다. 오랜만에 시길 관련 글을 작성하네요. 여러가지 개인적인 일들로 바쁘기도 했고, 딱히 소재가 생각이 안 나서 글을 거의 안 올리고 지냈는데, 블로그의 성장을 위해 이제부터라도 다시 정신을 차려서 블로그 관리에 힘을 좀 쏟아볼까 생각하고 있는 중입니다. 본론으로 들어가서, 오늘은 시길로 전자책 코딩을 해서 아래와 같은 글상자를 만드는 방법에 대해 기록해보려고 합니다. 이 글상자는 제가 좋아하는 리처드 파인만의 명언 중 하나를 전자책 화면에 표시해 본 것인데요. 붉은 테두리와 밝은 색의 배경색을 통해 명언을 좀 더 빛나보이게(?) 하는 효과를 기대하고 만들어 보았습니다. 이런 식으로 강조하고 싶은 내용을 글상자 안에 넣어두면, 독자로 하여금 책을 읽을 때 해당 메시지가 좀 더 깊게 ..
CSS 속성 선택자 에 대해 알아보자
안녕하세요 탐구소년입니다. 일 때문에 CSS 속성을 정리할 일이 좀 있었는데, 그 김에 정리한 내용 중 일부를 블로그에 업로드하려고 합니다. 업로드할 내용은 CSS의 선택자 중에서도 '속성 선택자'를 사용하는 방법입니다. - [속성] 선택자 : 지정한 속성에 스타일 적용하기 특정 태그가 특정 속성을 가지고 있을 시 스타일을 적용합니다. 위의 예에서는 a 태그가 href 속성을 가지고 있을 경우에만 a 태그에 tomato 색을 지정한다는 내용의 스타일 코드가 작성되어 있습니다. - [속성=값] 선택자 : 특정 값을 갖는 속성에 스타일 적용하기 위의 예에서는 href 속성에 네이버 주소가 지정되어 있는 a 태그에 대해서만 스타일 코드가 적용되었습니다. - [속성*=값] 선택자 : 특정 값이 포함된 속성에 스..
CSS 미디어 쿼리에 대해서 알아보자
안녕하세요 탐구소년입니다. 우리는 PC, 태블릿, 스마트폰 등 여러 가지 기기로 웹 사이트에 접속하곤 하는데요. 어떤 기기로 사이트에 접속하냐에 따라 웹 사이트의 형태가 달라지는 것을 종종 확인할 수가 있습니다. 이는 저절로 이루어지는 것이 아니고, 제작 과정에서 웹사이트를 반응형으로 제작했기에 가능한 것입니다. 웹 사이트를 제작할 때에, 하나의 웹 사이트를 기기마다 다르게 표현할 수 있는 방법들은 여러가지가 존재하는데요. 오늘은 그 중에서도 많이 사용되는 방법인 미디어쿼리에 대해서 정리를 해보도록 하겠습니다. 미디어쿼리란? 미디어 쿼리(mediaqueri)는 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 도와주는 소프트웨어 모듈입니다. 미디어 쿼리를 이용한 사이트는 웹 사이트에 접속하..
CSS 단위 px, rem, em, %
안녕하세요 탐구소년입니다. 탐-하 ㅋㅋ CSS는 주로 HTML문서 스타일을 정의해줄 때 사용되는 언어입니다. CSS는 사이즈를 표현할 때 여러 가지 단위를 사용하기 때문에 각각의 단위의 쓸모를 잘 구별해서 사용해야 합니다. 특히나 반응형 웹을 만들 때 이들에 대한 이해가 정말 중요한데요. 여러가지 단위가 있지만, 이번 글에서는 사용 빈도가 높은 px, rem, em, % 에 대해서만 알아보겠습니다. 먼저, 각각의 특징! - px : 절대값으로 사용되는 단위. 고정된 값이므로 사용하기 편하지만 반응형 웹에는 적절하지 않습니다. - rem : 최상위 요소인 요소에 비례하여 사이즈를 갖게 되는 단위. 에 font-size가 16px로 되어 있다면 1rem은 자동적으로 16px과 같아집니다. - em : 부모 ..