분류 전체보기61 공부 과정 기록07_노마드코더 시청 후 제작 페이지 코드 설명_todolist 작성(03_04) 이제 마지막으로 todo 리스트 작성 기능까지 구현하면 todo 리스트 페이지가 완성됩니다. const inputForm = document.getElementById("input-form"); const inputTodo = document.getElementById("inputTodo"); const todoContainer = document.getElementById("todoContainer"); //각각 user의 키값, 정보가 들어갈 변수이다. let userKey, userObj; //현재 로그인 되어 있는 객체(status 1)를 찾아 해당 객체의 키값을 반환한다. function returnUserKey() { let key, value, i; for(i = 0; i < localSto.. 2022. 8. 27. 공부 과정 기록07_노마드코더 시청 후 제작 페이지 코드 설명_메인페이지 인사 표현, 로그아웃, 날씨 정보 받아오기(03_03) 지난 글에 이어서 계속 만들어 보겠습니다. 이번 글에서는 메인 화면에 보이는 인사말(Hello asdf)과 우측 상단에 띄워져 있는 위치 정보 표현, 로그아웃 기능을 코드로 한 번 보도록 하겠습니다. const greetingText = document.getElementById("greetingText"); //localStorage의 길이값 가져옴 const localStorageLen = localStorage.length; //i => 반복문에 사용되는 변수, key => localStorage의 key값을 담을 변수 //value => key에 대응되는 내용을 담을 변수 let i, key, value; //localStorage에 저장된 값들 중 status 값이 1인 객체를 찾아 해당 객체를.. 2022. 8. 26. 공부 과정 기록07_노마드코더 시청 후 제작 페이지 코드 설명_메인페이지 시간, 명언 및 배경사진 구현(03_02) 전 글에서 로그인/회원가입 페이지의 코드를 보며 어떻게 동작하는지 살펴 봤습니다. 이번 글에서는 메인 페이지에 들어갔을 때의 기능 구현을 코드로 알아 보겠습니다. Logout 00:00 Hello /* 일반 태그 css */ * { box-sizing: border-box; } body { height: 98vh; width: 98vw; background-repeat : no-repeat; background-size : cover; background-position: center; } input[type=text] { background-color: inherit; border: 0 solid black; color: white; font-size: 1.5rem; margin-left: 5vw; t.. 2022. 8. 23. 공부 과정 기록07_노마드코더 시청 후 제작 페이지 코드 설명_로그인과 회원가입(03_01) 전 글에서는 페이지가 어떻게 구성되어 있는지, 어떻게 돌아가는지 소개하는 시간을 가졌다면 이번 글에서는 코드를 보면서 페이지 제작 과정을 보겠습니다. (참고로 파일 배치 속성(src, href 등....)에 관련된 것은 저와 파일 경로가 다르다면 오류가 날 것입니다.) id : pw : Sign in Sign up 먼저 index.html 페이지 코드입니다. index.html 페이지를 보면 처음 로그인을 하는 화면으로, 전체 로그인 영역을 div(loginContainer)로 감싸고 있고 그 안에 id, pw, 버튼들을 각각 div 태그로 감싸서 배치를 하였습니다. 그리고 loginStyle.css를 적용하고, body 태그 맨 아래에 script src로 loginJS.js 파일의 내용.. 2022. 8. 22. 공부 과정 기록07_노마드코더 시청 후 제작한 페이지 소개(02) 전 글에서 노마드코더 클론 코딩 강의를 시청했었다고 했습니다. 이번 글에서는 강의 시청에서 얻은 지식들을 활용하여 제가 구상한 페이지를 만들어 봤었는데, 그 페이지를 살펴 보는 시간을 갖도록 하겠습니다. 처음 페이지에 들어가면 이렇게 로그인 페이지가 나옵니다. 페이지 중앙의 로그인 폼이 들어 있는 영역을 제외하면 나머지 영역의 색을 회색으로 줬고, 로그인 버튼과 회원가입 버튼 2개가 있는 것이 보입니다. 만약 회원가입이 되어 있지 않은 id, pw를 입력하거나 둘 중 하나를 입력하지 않은 상태에서 로그인 버튼을 누르면 상황에 따라 위와 같이 경고창을 띄워 줍니다. 그럼 회원가입 페이지를 보겠습니다. 회원가입 페이지도 디자인은 로그인 페이지와 비슷합니다. 다만 다른 점은 id, pw, pw check까지 .. 2022. 8. 19. 공부 과정 기록07_노마드코더 클론코딩 강의 시청(01) 전 글까지 해서 JS를 활용하여 예제 페이지를 만들어 봤습니다. 여기까지 만들고 들었던 생각이 JS를 사용하여 HTML을 조작하는 것과 기본 문법들을 좀 알게 되었는데 더 발전하여 실제 서비스되는 페이지들에서는 JS가 어떻게 활용될까 하는 호기심이 생겼습니다. 생활코딩 강의를 봤을 때에도 들었던 얘기였는데 공부를 하다가 일정 부분에서 지루해지고 복잡해지면 공부를 멈춘 후 지금까지 배웠던 것들을 활용했다가, 다음 것에 호기심이 생기면 그 때 공부하는 것이 효율적이라는 말이 있었습니다. 저는 이 때가 더 공부할 시점이라고 판단하여 인터넷에서 볼 만한 강의를 찾고 있었습니다. 그 때 강의를 봐야겠다고 선택한 것이, https://nomadcoders.co/javascript-for-beginners 바닐라 J.. 2022. 8. 18. 이전 1 2 3 4 ··· 11 다음
