기타 이야기/공부 이야기14 공부 과정 기록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. 공부 과정 기록01_w3school HTML, CSS 문서 예전에 제가 여기 블로그에 HTML, CSS 관련 글을 올렸을 때에는 HTML, CSS에 대한 기초 지식을 갖고 있지 않은 상태에서 인터넷의 HTML, CSS를 이용한 클론 코딩 강의를 보고 페이지를 만든 과정을 업로드했습니다. 주요 태그와 속성들 글도 클론 코딩 페이지에 관련된 궁금한 내용들을 정리해 놓은 것이기에, 이 상태에서 웹 공부를 이어가기에는 클론 코딩 페이지의 지식에만 국한되어 있는 것 같다는 느낌을 받았습니다. 그래서 기초 내용들을 쭉 공부하면서 이해하고, 그럼에도 나중에 모르는 내용들은 그때그때 찾아 공부하기로 하고 찾은 페이지가 w3school이라는 문서 페이지였습니다. https://www.w3schools.com/ W3Schools Free Online Web Tutorials W3.. 2022. 8. 15. 이전 1 2 3 다음
