안녕하세요 오늘도 자스 연습을 해보도록 하겠습니다 5일차는 너무 CSS중점적이라서 건너뛰게 되었습니다. 자바스크립트30일 챌린지 바로 가기 JavaScript 30 Build 30 things with vanilla JS in 30 days with 30 tutorials javascript30.com 목차 바로가기 1. 오늘의 과제는? 2. 어떻게 완성되었는가 3. 배운 점 & 느낀 점 1. 오늘의 과제는? 사진에서 보시는 바와 같이 검색창에서 단어를 검색하면 그 와 관련된 도시와 주의 이름을 나타내고 오른쪽에서 유명도(?)를 나타냅니다. 시작파일은 이러합니다. HTML Filter for a city or a state CSS html { box-sizing: border-box; background..
안녕하세요 오늘도 자스 연습을 해보도록 하겠습니다 자바스크립트30일 챌린지 바로 가기 JavaScript 30 Build 30 things with vanilla JS in 30 days with 30 tutorials javascript30.com 목차 바로가기 1. 오늘의 과제는? 2. 내가 만든 파일 3. finished파일 리뷰 4. 배운 점 & 느낀 점 1. 오늘의 과제는? 오늘은 몇가지 배열 같은 데이터들을 이용해서 자바스크립트 배열과 관련된 함수를 써보는 과제입니다. start 파일의 주석을 읽어보시면 데이터를 가지고 뭘 해야하는지, 어떤 함수를 써야하는지까지 나와있습니다. 이를 보시고 finished 파일처럼 작동하게 만드시면 됩니다. start.html Psst: have a look a..
안녕하세요 오늘도 자스 연습을 해보도록 하겠습니다 1. 오늘의 과제는? 오늘은 js를 사용해서 실시간으로 CSS변화를 만드는 애플리케이션을 만들어야 합니다. 우선 start.html 파일은 이러합니다. Update CSS Variables with JS Spacing: Blur: Base Color 여기서 시작해서 finished 버전과 같게 동작하게 만들면 됩니다. 2. 내가 만든 파일 CSS 파일 body { text-align: center; background-color: #193549; color: white; font-weight: 100; font-size: 50px; } .controls { margin-bottom: 50px; } input { width: 100px; } img { fi..
밖에 비가 참 많이 내리네요 날씨가 정말 습합니다. 빨리 건조한 겨울이 왔으면 좋겠네요:) 하여튼 오늘도 마찬가지로 자바스크립트 챌린지를 진행해 보도록 하겠습니다. 1. 오늘의 과제는? 오늘은 이런식으로 시계를 만들 것입니다. finished 버전은 시계침이 회전할 때 마다 달칵거리는 애니메이션이 있고 제가 만든 것은 딱딱하게 회전합니다. 우선 start파일은 이렇게 되어있습니다. 이걸 통해서 finished 버전처럼 작동되도록 만들면 됩니다. 2. 내가 만든 파일 - HTML & JS 부분 먼저 HTML에서 시계 침의 역할을 하는 객체들을 querySelector를 통해서 부를 수 있었습니다. 그리고 Data를 활용해서 현재의 시간을 얻어내고 그걸로 css style의 transform에서 회전을 줍니..
이번에 웹서핑을 하면서 좋은 것을 보게 되었다 바로 javascript challenge 30 이라는 것이다. https://javascript30.com/ - 해당 사이트에 들어가면 무료로 콘텐츠를 사용할 수 있다. 제목에서도 알 수 있듯이, 30일 동안 매일 하나씩 JS 과제를 하는 것이다. 내가 하려는 것은 https://github.com/nicewook/JavaScript30 - 해당 깃헙을 fork해서 각 폴더에 있는 start파일을 써서 finished파일 처럼 작동할 수 있게 만드는 것이다. 막히는 것이 있으면 강의영상(무료다!!)을 참고하고 공부한 것들을 정리해서 여기 블로그에 쓸 것이다. 1. 오늘의 과제는? 오늘은 첫번째로 드럼 사이트를 만들게 된다. html css js로 키보드를 ..
안녕하세요 오늘은 유튜브보다가 괜찮은걸 봐서 한번 시도해봤습니다. 바로 https://dribbble.com/ 위 사이트에서 여러가지 웹디자인이 있는데 최대한 따라해보는 것입니다. 저같은 경우에는 이런 디자인을 대상으로 최대한 따라해보는걸 시도해봤습니다. 그래서 최종적으로는 이러한 디자인이 나왔습니다. 화면 좌상단의 아이콘은 https://fontawesome.com/start 이 폰트어썸이라는 사이트에서 구했습니다. 그리고 화면 우측의 그림은 https://pixabay.com/ko/vectors/%ea%b3%bc%ed%95%99-%ec%8b%a4%ed%97%98-%ec%97%b0%ea%b5%ac-%ec%97%b0%ea%b5%ac%ec%8b%a4-6063326/ 이 사이트에서 구했습니다. 이렇게 간단한..
안녕하세요 오늘은 간단하게 날씨를 알려주는 어플리케이션을 만들어 보았습니다. 날씨 API를 이용해서 현재 온도 현재 위치 날씨정보 날씨 아이콘 등을 통해서 사용자에게 날씨를 알려주는 간단한 어플을 만들려고 했습니다. 다음으로 코드작성을 해보겠습니다. 1. HTML 파일 지금 날씨는 2. CSS 파일 * { padding: 0; margin: 0; } body { background: linear-gradient(45deg, #4fc3f7, #0093c4 ); } .container { width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } .containe..
안녕하세요 오랜만입니다. 자바스크립트 기능을 활용할 수 있는 간단한 주제를 찾아보다가 할 일 목록을 만드는 것을 보았습니다. 목표 할 일 목록을 추가하거나 삭제할 수 있는 사이트 세부 목표 체크박스에 체크하면 중간줄로 그으기 list를 추가할 때는 text박스에 목표를 쓰고 ENTER를 누르거나 +버튼을 누른다 list를 제거할 때는 왼쪽의 체크박스를 클릭하거나 그 문장을 클릭해서 체크된 상태로 만들고 -버튼을 누른다 만들면서 몰랐던 점 & 해결법 자바스크립트로 DOM객체를 만들 때 class프로퍼티를 어떻게 설정하는가? 객체속성의 className을 사용하면 class프로퍼티를 설정할 수 있다. ex) item.className = 'thisItem' input태그 checkbox type일 때 체크된..
