분류 전체보기61 공부 과정 기록06_JS 활용 페이지 만들어보기(02) 저번 시간에는 JS까지 활용하여 계산기를 구현해 봤습니다. 이번 글에서는 문자 퍼즐이란 페이지를 만들어 보겠습니다. 페이지를 열면 이렇게 위의 페이지가 나옵니다. (참고로, 이번 코드는 JS를 중심으로 하기 때문에 CSS 디자인은 적용시키지 않았습니다.) 어떤 동작인지 대강 설명하자면, 저렇게 위에 원본 영단어가 표시되고(compare) 아래에는 그 영단어의 알파벳을 섞어 놓은 버튼들이 배치됩니다. (저 버튼들은 눌러도 이벤트가 발생하지 않습니다.) 그리고 아래에 뒤집기, 왼쪽/오른쪽 밀어내기 버튼이 있는데 뒤집기 버튼은 앞뒤 알파벳들이 바뀌는 것이고 왼쪽/오른쪽 밀어내기는 왼쪽이나 오른쪽으로 알파벳들이 한 칸씩 이동하는 것입니다. 뒤집기 버튼부터 차례대로 눌러 본 결과입니다. 그리고 밑에 "일치하지 않.. 2022. 8. 18. 공부 과정 기록06_JS 활용 페이지 만들어보기(01) 저번에 w3school에서 JavaScript 기본 문서 내용들까지 봤었습니다. 생활코딩, w3school로 어느 정도 문법을 알고 있다고 판단하여 JavaScript 공부용을 위한 예제 페이지를 2개 만들었습니다. 그 중에 첫 번째 페이지를 소개해 드리겠습니다. 처음 페이지를 열면 위와 같이 계산기 모양으로 배치되어 있는 버튼들이 나옵니다. (보다싶이 CSS 디자인도 추가한 상태입니다.) JavaScript로 어떻게 계산기가 동작하는지 알아보기 전, HTML과 CSS 코드를 보고 구성과 디자인을 어떻게 하였는지 보겠습니다. 7 8 9 + 4 5 6 - 1 2 3 * X 0 . / C % = HTML 코드입니다. 구성을 보면 div container 태그 안에 button 태그들이 쭉 배치되어 있는데, .. 2022. 8. 17. 공부 과정 기록05_w3school 문서 https://www.w3schools.com/js/default.asp JavaScript Tutorial W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 이번에는 javascript의 기초를 쭉 보기 위해 w3school의 javascript 문서를 봤습니다. 물론 이 문서를 본다고 다른 인터넷 강의와 같이 뭔가 결과물이 나오는 것은 아니지만, 전에 봤었던 생활코딩 J.. 2022. 8. 17. 공부 과정 기록04_생활코딩 JavaScript 강의 전 글에서 HTML, CSS를 활용하여 페이지를 하나 만들어 봤었는데, 그 과정에서 구글링을 통해 HTML의 script 태그로 javascript 파일을 불러오는 방법과 현재 시간을 표시해 주는 문법을 알게 되었습니다. 이 때 JavaScript 문법 공부의 필요성을 느꼈고 w3school의 JavaScript 문서를 먼저 볼지, 다른 인터넷 강의를 먼저 볼지 고민하다가 아무것도 모르는 상태에서 w3school의 문서를 보면 지루할 수 있겠다는 생각에 먼저 선택한 것이 생활코딩 강의로 한 번 쭉 경험한 다음 w3school 문서를 보자는 생각이 들었습니다. https://opentutorials.org/course/3085 WEB2 - JavaScript - 생활코딩 수업소개 이 수업은 https://.. 2022. 8. 16. 공부 과정 기록03_HTML, CSS 활용하여 페이지 제작 전에 생활코딩 강의까지 봤었다면, 이번에는 JavaScript는 아직 하지 않았으니 지금까지 공부한 것 복습 겸해서 HTML과 CSS를 활용하여 페이지를 하나 만들어 보자는 생각이 들었습니다. 일단 완성된 모습부터 보여 드리겠습니다. 메인 페이지의 모습입니다. 전 글에서 한 번 소개했었던 미디어 쿼리를 활용하여 화면의 가로 길이에 따라 디자인이 3가지로 변하도록 만들었습니다. 또한, 왼쪽의 목차를 클릭하면 각 페이지로 넘어가게 됩니다. 이 페이지를 만들면서 느낀 점은 확실히 문서를 읽거나, 강의를 보고 따라 하는 것보다 직접 어떤 페이지를 만들지 고민하고 디자인을 어떻게 할지 고민하면서 구현에 있어 모르는 부분이 있으면 찾아 보고 하며 더욱 공부가 잘 되었습니다. 특히 강의를 보거나 문서를 읽으며 머리로.. 2022. 8. 16. 공부 과정 기록02_생활코딩 HTML, CSS 강의 https://opentutorials.org/course/3084 WEB1 - HTML & Internet - 생활코딩 --- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여 opentutorials.org 저번 w3school 에서 레퍼런스 느낌의 문서를 보며 기초를 배웠다면 이번에는 생활코딩의 web1, web2 강의를 봤습니다. 이 강의는 아무것도 모르는 초심자에게 알려 준다는 느낌을 받았으나 전의 w3school 문서처럼 많은 내용들을 전달해 주는 방식이 아닌 기본 내용(태그 사용법, css 적용법 등...)을 알려 준 후 여기서 더 나아갈 사람들에게 다음 강의로.. 2022. 8. 15. 이전 1 2 3 4 5 ··· 11 다음
