분류 전체보기
-
JavaScript 입문 : className과 classList 사용법 - 응용컴퓨터 알아가기/JavaScript 2022. 7. 24. 19:30
자바스크립트에서 className과 classList에 대한 간단한 문법을 익혀 보았는데요. 간단한 예제를 통해서 응용을 해 보도록 히겠습니다. 브라우저상에 문장을 클릭하면 글씨색이 변하는 내용을 자바스크립트를 통해서 만들고자 합니다. HTML상 클래스명을 지정하지 않고 색이 변할때마다 클래스명을 추가하면서 자바스크립트 명령어를 사용하고자 합니다. 이럴경우 classList에 add명령어를 사용하여 진행해야 하는데 단순하게 className을 사용하여 진행하는 실수를 법하게 되는데 다음 예를 통하여 확인할 수 있습니다. 1. className을 잘 못 사용하는 예 기본 HTML / CSS 및 JS를 다음과 같이 만들어서 브라우저 변화를 보도록 하겠습니다. JS에서는 className을 사용하여 태그상 클..
-
JavaScript 입문 : className과 classList 사용법 - 기본문법컴퓨터 알아가기/JavaScript 2022. 7. 23. 19:30
저같이 초보인 경우 자바스크립트를 배우는 과정에서 어렴풋하게나마 이해하고 있는 clasName과 classList에 대하여 좀 더 명확하게 정의하고 갈 필요를 느끼게 되어 이 기회에 정리를 하고자 합니다. 사실 저는 HTML / CSS에서 class를 자바스크립트에서는 className으로 불리운다는 사실만 알았고 그 쓰임새를 별로 신경쓰지 않았는데 기초 과정에서 조차 여러가지 쓰임새가 발견이 되어 예제를 가지고 이해를 해보도록 하겠습니다. 아울러, 각종 예에서 사용되는 경우가 있으면 Case by Case로 그때 그때 정리하고자 합니다. ▒ className 1. 기본형 자바스크립트에서는 className은 HTML/CSS에서 class와 같은 개념입니다. 가장 기본적인 사용법은 HTML상 class ..
-
JavaScript 입문 : 클릭 반응 속도 체크 - 기본 HTML / CSS 및 JS 구조컴퓨터 알아가기/JavaScript 2022. 7. 22. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 지난시간 만들어 보았던 순서도 기반으로 기본 HTML, CSS 및 JS를 세팅헤 보도록 하겠습니다. ▒ 기본 HTML CSS JS 역시 VS Code를 통하여 3종세트를 만들어 봅니다. 1. HTML 기본 상기 HTML에서 태그를 2개 만든 이유는 첫번째는 카드의 색을 변환시키고 두번째 태그에서는 결과값을 출력하게 설계한 겁니다. id와 class각각 만들어 주었고 향후 CSS에서 빨간색과 노란색을 className을 다르게 지정하여 만들어 주고 JS를 통하여 프로그램이 작동할 수 있도록 하고자 합니다. 2. CSS 기본 CSS에서는 기본적인 카드에 적용될 색상을 지정해 줍니다. 첫번째 나오는 명령어는 브라우저 자체에 내재되어 있는 기본..
-
JavaScript 입문 : 클릭 반응속도 체크 - 개요 및 순서도컴퓨터 알아가기/JavaScript 2022. 7. 21. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 지금까지 다양한 자바스크립트 예제를 공부하고 있는데요... 과연 머리속에 얼마나 남아있는지 모르겠습니다. 이럴경우 모든 학문의 진리이지만 지속적으로 접하고 연습해보는 것외에는 방법이 없는 것 같습니다. 지금부터 고민할 부분은 화면에서 어떤 객체가 색이 변했을 경우 바로 클릭하여 얼마나 빨리 반응했는지 볼 수 있는 프로그램을 만들어 보고자 합니다. 언제나 그렇듯 내용을 정리하고 관련 순서도를 만들어 보는게 첫번째 순서입니다. 1. 클릭 반응속도 체크를 위한 프로그램 개요 전체적인 개요를 정의해 보면 "파란화면이 띄어져 있고 한번 클릭하면 빨간회면으로 바뀌고 랜덤 시간뒤 노란화면으로 바뀌면 클릭을하고 얼마나 빨리 클릭하였는지 또는 몇번의 클..
-
VS Code Emmet 설정컴퓨터 알아가기/알아두면 편한 팁 2022. 7. 20. 19:30
VS Code를 사용하면서 Tab키로 HTML이나 CSS등 코드 공부를 할때 단축명령 기능을 자주 사용했는데 어느순간 VS Code에서 작동이 되지 않는 경우가 생기더라구요. 이런 경우를 대비해서 VS Code Emmet 설정을 하도록 해 보겠습니다. 1. File > Preference > Settings 보통 VS Code의 기능을 확인하거나 설정할 걍우 Preference에서 Settings으로 들어가 필요한 기능을 찾으면 됩니다. 여기서 설정 단축키를 보면 Ctrl + ,입니다. 많이 사용하다보면 자연스럽게 외워지겠죠. 2. 검색창 Emmet 입력 검색창에 emmet을 입력하면 자연스럽게 해당 항목으로 넘어가는데 여기서 Emmet을 클릭합니다. 3. Emmet: Trigger Expansion O..
-
JavaScript 입문 : 가위바위보 게임 - 3판2승제 만들기컴퓨터 알아가기/JavaScript 2022. 7. 19. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 강좌에서는 숙제로 5판3선승제를 만들어보는 내용이 있습니다만, 같은 개념으로 가위바위보 게임 3판 2선승제를 만들어 보도록 하겠습니다. 현재까지 코드는 무한정 가위바위보 게임이 잔행되는 게임으로 어떤 결론에 도달하게 되면 게임이 멈추게 하는 목적이 있습니다. 1. 3판 2선승제란 코드를 고민하기 위해서 3판 2선승제에 대해 정의하면 다음과 같습니다. ▶ 사람이든 컴퓨터든 먼저 2승을 한 쪽이 승리한다. ▶ 무승부는 점수를 계산하지 않는다. 2. 코드에 필요한 요소 상기 정의에 따라 코드에 필요한 요소를 고민하면 나 또는 컴퓨터가 이기면 해당 변수에 1점씩 추가가 되고 2점이 되면 승리를 표시하도록 합니다. if문으로 표시할 수 있습니다...
-
메타버스 플랫폼 종류 : SNS 및 Game 플랫폼 - 로블록스, 제페도, 마인크래프트Metaverse 2022. 7. 18. 19:30
메타버스(MetaVerse) 플랫폼을 살펴보면 현재까지 움직임과 향후 방향에 대해 예측이 가능하리라 보여집니다. 현재까지의 메타버스 플랫폼들의 운영목적은 크게 SNS 및 Game, Market, Tech-Assist라고 나뉘어져 있는 것으로 보고 종류들을 살펴보아야 할 듯 합니다. ▒ SNS 및 Game 플랫폼 이러한 플랫폼의 주목적은 아는 사람이거나 모르는 사람이거나 공통된 공간에서 사회관계형성과 플랫폼을 이용하면서 자신에게 생기는 즐거움을 기본으로 하고 있습니다. 과거 웹 1.0이나 2.0시대에는 천리안 같은 text기반의 채팅에서 오늘날 페이스북 같은 사진(동영상)과 글을 주로 하는 커뮤니케이션이 주된 소통의 SNS였다면 좀 더 발전한 SNS는 로블록스(ROBLOX), 제페토(ZEPETO), 마인크..
-
JavaScript 입문 : 가위바위보 게임 - 코드 줄이기컴퓨터 알아가기/JavaScript 2022. 7. 14. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 지난시간 if문을 사용하여 가위바위보 게임을 만들어 보았습니다. 다음과 같은 코딩을 사용하였는데 이 상태로도 물론 프로그램이 돌아가기 때문에 더 이상 정리할 필요성은 없어 보이는데 강좌에 따르면 중복되는 부분을 찾아서 코드를 줄이는 연습을 합니다. 우선 어떤 형태가 있는지 확인하고 최종적으로는 어떤 코드가 더 편한지 스스로 판단해 봐야 겠습니다. 무작정 코드를 줄인다고 해서 능사는 아닌 듯 합니다. 최소한 나중에 봤을때 읽을 수 있고 이해할 수 있는 코드가 훨씬 더 좋지 않을까 생각해 봅니다만.. 1. 가위바위보 JS코드 기본 2. 중복코드 줄이기 상기 기본 JS코드에서 if문 자체가 너무길고 뭔가 중복된 느낌이 있지만 그렇다고 꼭 중복..