자질구레

8일간 기능 하나하나 배워가며 나만의 웹페이지를 만들었다 로그인, 랜덤배경이미지, 시계, 랜덤명언, 할것리스트, 날씨 쉬울것같다가도 저걸 어떻게하지 싶었던것들인데 따라하고 막힐때마다 찾고 고민하다보니 결과적으로 완성할 수 있었다! 하지만 문제가 생겼다.. CSS를 적용하지 않아서 하나도 이쁘지 않다는것! 강의 마지막에 CSS도 함께하지않을까 생각했는데 HTML/CSS는 이 전 과정이기 때문에 스스로 완성해보라는 과제를 주셨다. 생활코딩에서 CSS 기초에 대해 배우긴했지만 모르는 부분이 너무많았기때문에 당황했다 하지만 이것도 찾아보면서 배우고 학습하는 기회라고 생각했고 열심히 스스로 해보려다.... 아주 처음부터는 못하겠어서 다른분들의 결과를 바탕으로 카피하면서 공부했고 결과적으로 성공했다! 다른사람이 만..

할 일To Do을 입력하면 그걸 저장할 수 있고 또 삭제할 수 있는 것을 만들어보았다 대부분 기존에 배웠던것들의 활용이라 복습하듯 들었다가 새로운 것을 배웠다 JSON.stringify() 요거는 어떤것이건 코드이건 array건 string으로 만들어준다. function saveTodos(){ localStorage.setItem("To Dos", JSON.stringify(todos)); } 그리고 JSON.parse()는 다시 array로 만들어준다. JSON은 어디서 많이 본것같은데 이에대해 앞으로 공부하면 재밌을것같다. 아무튼 입력하는대로 저장하고 또 그걸 삭제할 수 있게 만들었다 하지만 새로고침을 할때마다 날아가버리는 문제가 발생했다 여기서 let을 처음으로 실전에 사용했다 const가 아닌 ..

function sayhello() { console.log("hello"); } setInterval(sayhello, 1000); setInterval은 특정 기능을 ms단위로 반복실행하게 해준다. 1000은 1초 setTimeout(sayhello, 5000); setTimeout은 해당 시간이 흐른 후 기능을 실행하게 한다. new Date()는 하루에 대한 정보를 가져다 준다 date.getHours(), date.getMinutes(), date.getSeconds() 로 시간을 가져와서 setInterval로 1초마다 새로고침하면 시계가 완성된다. const clock = document.querySelector("h2#clock"); function getClock() { const dat..

오늘은 본격적으로 페이지를 꾸미기 시작했다. 첫번째로 하는 것은 로그인만들기 먼저 html에서 input입력창과 button버튼을 만들었다 그리고 내가 이름을 입력하면 '반갑습니다 누구누구' 라고 뜨게 만들었다. 그리고 입력한 value값을 불러와 '반갑습니다 '와 함께 뜨게 했다. 이걸로 끝인가 싶었는데 생각해보니 로그인이라 함은 사용자를 기억해야 의미가 있다 어떻게 나를 기억하게 만들지? 어떤 코드를 사용해야하는걸까 라고 생각했는데 그것은 브라우저의 Local Storage를 이용하는 것이었다 거기에 사용자 정보를 저장하면 나를 기억하는 것이다. 그래서 입력을 하고 저장하도록 만들면 새로고침이되서 다 날아가버린다 왜냐하면 submit을 하면 브라우저는 새로고침되버리기 때문이다 따라서 이런 기본동작을 ..

전날에 자바를 이용해서 h1을 꾸미고 바꿨는데 꾸미는 기능은 CSS에 맡겨두는 것이 간단하다. CSS에서 h1 { color : cornflowerblue; transition: color 0.5s ease-in-out; - 색을 천천히 바뀌게하는 고급기술 } h1의 색상을 변경하고 .clicked { color : tomato; } - clicked라고 하면 색이 토마토색이 된다고 적는다. 이후 JS에서 function handleTitleClick(){ h1.className = "clicked"; } 라고 하면 className을 지정해서 토마토색으로 바뀜 그리고 “clicked”라고 적는 것 보다 이것을 변수로 지정하면 오류가 났을 때 찾기 쉬워서 변수로 지정하는 것이 유용하다. 하지만 이미 h1..

1 day JS는 대표적인 프론트엔드 언어로 웹사이트, 앱, 게임 등 심지어 백엔드까지 가능한 언어라고 한다 그래서 잘 쓰이고 잘 찾는 언어라 취업에 유리하고도 한다. 2 days js나 css파일은 그냥 불러올 수 없고 html이 해당 파일들을 불러오는 매개로 동작한다. consol.log=(); 라고 입력하면 브라우저 콘솔에 출력된다. const a = "Zazilgure“; 변하지 않는 변수를 정의하는 것이다. let a ="Zazilgure“; 변경 가능한 정의를 하는 것이다. 변경할때는 let을 붙이지 않아도된다. var a = “Zazilgure; const, let이 나오기 전에 변수를 정의하는 개념인데 의미가 명확한 const와 let가 좋다고한다. Booleans = true, false..

https://opentutorials.org/course/1 생활코딩 hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그 opentutorials.org 생활코딩 선생님 덕분에 기분좋은 출발을 마치고 교양을 넘어서 직업으로 삼기 위해 언어공부를 시작하기로 했다 처음배우는 언어의 선택은 개발자의 길을 시작하기로 결심한 사람들에게 가장 첫번째 난관이라고 들었다. 그에 반증하듯 어떤 언어를 배우는게 좋은지에 대한 글이나 영상들이 정말 많았다. 우선 언어를 선택하기 전에 한가지 먼저 선택해야 할게 있었다. 고객(클라이언트)에게 보여지는 영역을 만드는 '프론트엔드'와 보여..

개발에 있어서 어떤 언어를 배우던 HTML/CSS는 꼭 하고 다른것으로 넘어가야 한다고 들었다. 감사하게도 이러한 시작을 멋지게 이끌어주신 선생님을 발견해서 이틀간 따라해서 만들어봤다 https://opentutorials.org/course/1 생활코딩 hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그 opentutorials.org 학창시절 컴퓨터시간에 메모장을 사용해서 HTML 페이지를 만들어 본 기억이 있어서 그런지 엄청 생소하게 느껴지진 않아서 다행이었다. 짧은 지식이지만 복습 겸 말해보자면 HTML은 언어는 아니지만 언어라는 물감을 칠하기 위한 새하얀 ..