분류 전체보기
-
CSS 움직이는 공 만들기 (상하좌우 움직이는 공)컴퓨터 알아가기/HTML CSS 2022. 5. 4. 19:30
이제는 재미로 공이 바닥에 튕겼다가 다시 중력에 의해 내려오는 모양을 만들어 보려고 합니다. 이를 응용하여 최종 로또추첨기에서 뽑혀지는 총 7개의 공이 움직이면서 1초의 간격을 두고 나타날 수 있게 해보는게 목적입니다. VS Code 편집기를 이용하여 연습해 보도록 하겠습니다. 기본적인 HTML과 CSS가 필요하겠죠. 1. 기본 HTML 포맷만들기 아래 그림과 같이 기본 포맷안에 CSS연결과 JS연결할 경로를 세팅해 줍니다. 이럴경우 태그내 태그의 id를 활용하도록 합니다. 태그는 다음과 같이 간단합니다. 물론 자바스크립트에서는 태그를 선택해야 겠지요. 2. CSS 꾸미기 여기서는 색을 직접 반영하여 진행하며 원의 크기도 지정합니다. 순서는 색, 원모양 만들기, 애니메이션 적용 스킴을 id내에 지정해 주..
-
축구 경기장 규격과 배경몰상식 (몰라도 되는 상식) 2022. 5. 3. 20:30
영국 프리미어 경기에서 연일 손흥민 선수가 좋은 결과를 내고 있습니다. 과거 차붐을 일으켰던 '차범근' 선수의 한시즌 최다 골을 갈아치우고 새로운 역사를 써 나가고 있습니다. 이번 카타르 월드컵에서도 좋은 성적을 내기를 응원하면서 축구 경기장 규격과 배경을 알아 보도록 하갰습니다. ▒ 축구 (Football) 1. 축구 경기장 규격 FIFA (Fédération Internationale de Football Association, 프랑스어) 규정에 따르면 축구 경기를 치를 수 있는 필드의 사이즈는 45m X 90m에서 최대 90m X 120m로 되어 있습니다. 하지만 FIFA가 주관하는 국제 경기는 반드시 64m X 100m와 75m X 110m 사이의 경기장에서 열려야 한다고 합니다. 골포스트의 넓이..
-
JavaScript 입문 : 로또추첨기 - 공 모양 만들기컴퓨터 알아가기/JavaScript 2022. 5. 3. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 로또추첨기에 대한 순서도를 임의로 작성을 해 보았습니다. 배워가면서 순서도 수정이 필요하거나 한 경우 반영하면서 진행하도록 하겠습니다. 먼저 CSS측면에서 공 모양을 만들어 보는 연습을 해 볼 필요성이 있습니다. ▒ 공 모양 만들기 직접 HTML과 CSS만으로 공을 만들 수 있으나 자바스크립트 분야이기 때문에 같이 연동해서 만들어 보는것도 같이 공부 하도록 하겠습니다. ① 기본적 HTML과 CSS 1번볼을 만들어 볼건데 HTML과 CSS를 이용한 볼 만들기 연습니다. 높이와 넓이를 40px로 같게하고 중간맞춤 글씨크기를 절반인 20px로 class를 이용해서 만들어 보도록 하겠습니다. 간단한 작업이기에 Codepen을 이용해서 기본 모양..
-
권투 경기장 규격과 배경몰상식 (몰라도 되는 상식) 2022. 5. 2. 20:30
TV를 보고 있는데 왕년의 전설의 핵주먹 박종팔 선수가 35년만에 명예 권투 경기를 치루고 있었습니다. 64세인가 65세로 총 4라운드를 경기하는데 대단한 정신력을 보여주었습니다. 문득, 각종 스포츠를 하는데 있어 규격이 있을 것이고 그 규격을 만든 이유도 있을 것 같은 생각이 들었습니다. TV에서 나온 박종팔 선수의 복싱 경기장이 가로 세로가 7m라고 하는데 과연 이 부분부터 확인하면서 가능한 많은 자료를 통해서 한번 정리를 해보고 싶네요. 먼저 이 글을 정리하게 된 원인을 제공한 '권투 경기'에 대해 정리를 해 볼 필요가 있습니다. ▒ 권투 1. 권투 경기장 규격 복싱 경기장을 '링'이라고 하며 링의 넓이는 로프 안 기준으로 한면이 4.9-6.1m로 되어 있습니다. 즉, 가로 세로 7m는 스탠다드 규..
-
JavaScript 입문 : 로또추첨기 - 순서도컴퓨터 알아가기/JavaScript 2022. 5. 2. 19:30
이 글은 제로초TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 강좌의 도움을 받아 로또추첨기를 만들어 볼 예정입니다. 가능한 CSS도 꾸며볼 생각이고요. 먼저 순서도를 만들어 놓아야 할 것입니다. 순서도를 기준으로 어떻게 자바스크립트를 이용할지 고민하는 과정이 필요합니다. ▒ 로또추첨기 순서도 기본적인 로또추첨기의 흐름을 정리해 보도록 하겠습니다. ① 45개 숫자가 필요 ② 45개 숫자가 무작위로 섞여야 함 ③ 추첨 시작 ④ 추첨은 6개볼과 보너스볼 1개 (공이 튕기면서 7개가 순서대로 나오는 방식 고민) ⑤ 공 색깔 구분 (십단위로 끊어서) 이정도가 필요할 것 같습니다. 한번 순서도를 그리도록 하겠습니다. 순서도에서 우선 고민하고 배워야할 부분은 다음과 같이 나눌수 있습니다. ① 공모양 만들어 보기..
-
꽃도 자신이 피는 순서를 지킨다 (2탄 : 3월에 피는 꽃)몰상식 (몰라도 되는 상식) 2022. 4. 29. 19:30
본격적으로 봄이 되니 꽃들이 사방에서 보이게 됩니다. 그 와중에서도 3월과 4월은 만물이 소생하는 시기로서 꽃들도 자신이 가장 아름답다고 뽐내는 계절인 것 같습니다. 여름이나 가을에는 웬지 농익은 꽃들이 피는 느낌이고요. 3월에 피는 꽃을 한번 더 봐야겠습니다. 늘 그렇듯이 본 내용은 완전히 자기 주관적 나열임을 밝힙니다. ▒ 3월에 피는 꽃 II (목련) 지난 시간 제 기준으로는 매화가 눈에 먼저 띄었습니다만 아마 개인별 지역별로 차이가 있으리라 봅니다. 매화꽃이 바람에 흩날리기 시작하면서 하얀 '목련'이 탐스럽게 개화합니다. 개인적인 느낌으로는 목련은 너무도 빨리 피고 너무도 빨리 가버립니다. 한층 만개할때의 그 느낌은 남녀 구분없이 이제는 정말 봄이 왔구나 하는 생각이 들 정도입니다. ▶ 목련(木蓮..
-
꽃도 자신이 피는 순서를 지킨다. (1탄 : 1월 ~ 3월에 피는 꽃)몰상식 (몰라도 되는 상식) 2022. 4. 28. 19:30
남자인데도 불구하고 이제는 길가에 핀 꽃들을 보면 마음이 힐링이 됩니다. 지금 이 글을 쓰고 있는 시점은 길거리 산 심지어는 아파트 단지에도 아름다운 색채의 '철쭉'이 만발하네요. 항상 느껴왔던 것인데 꽃도 자기 순서를 지켜 피더라구요. 마치 이 계절에 이 시기는 나만의 시간을 뽐내 듯 같은 장소에서 각자 순서를 지켜 피어납니다. 아마도 이러한 자연의 섭리는 서로 경쟁하지 않고 자신에게 알맞은 시기에 맘껏 개화하라는 이치인 것 같습니다. 물론 이름모를 많은 꽃들이 있지만 그래도 각 월별로 대표적인 꽃을 정리해 보고자 합니다. (완전히 개인적 주관입니다.) ▒ 1월에 피는 꽃 (동백꽃) 겨울꽃입니다. 눈과 매서운 바람을 이겨내고 피어나는 대표적 꽃으로 찐분홍색 '동뱍꽃'을 들 수 있습니다. 그래서 우리나라..
-
알뜰교통카드 발급받기몰상식 (몰라도 되는 상식) 2022. 4. 26. 19:30
요즘 교통카드를 많이 이용하는데 좀 더 저렴하게 이용할 수 있는 알뜰교통카드라는게 있더군요. 과연 알뜰교통카드는 무엇이고 어떻게 사용하는지 정리를 해 보도록 하겠습니다. 1. 알뜰교통카드란 알뜰교통카드는 대중교통 정기권과 마일리지가 결합된 형태로 최대 30% 대중교통 요금을 할인받는 제도입니다. 출퇴근이나 통학시 대중교통 이용을 장려하기 위해 대중교통, 보행, 자전거 이용을 통하여 이동한 거리만큼 마일리지로 혜택을 받을 수 있습니다. 국토교통부 자료에 의하면 주요성과로서 다음과 같이 정의하고 있습니다. ① 1인당 월 평균 12,862원 (대중 교통비의 20.2%) 절감 ② 대중교통 이용횟수 7.6% 증가 (이용 전 29.1회 -> 이용 후 31.3회) ③ 알뜰 교통카드 제도 전반에 대한 이용자 만족도 8..