바닐라 JS로 크롬 앱 만들기 - 완성
드디어 완성했다!
Category
vanilla-js
바닐라 JS로 크롬 앱 만들기 - (8) 지역과 날씨
1. 지역 좌표 가져오기 navigator.geolocation.getCurrentPosition(success, error); 위 함수는 사용자의 위치 정보를 가져올 수 있다. 두개의 콜백함수가 필요한데 첫번째는 지역정보를 가져오는데 성공했을 ...
바닐라 JS로 크롬 앱 만들기 - (7) 투두리스트
입력창에서 받아들인 값을 submit 하면 리스트로 표시하고 스토리지에 저장해서 기억하고 삭제버튼 누르면 없어지는 To-Do-List 만들기
바닐라 JS로 크롬 앱 만들기 - (6) 매번 바뀌는 명언과 배경
랜덤하게 바뀌는 명언 재료 명언 내용과 작가 이름이 담긴 객체 Math.randome() : 0~1 사이의 수를 랜덤하게 가져옴 Math.floor() : 소수점 위의 숫자만 남김
바닐라 JS로 크롬 앱 만들기 - (5) 시계
setInterval과 setTimeout의 개념과 Date() 객체를 이해하고 간단한 시계를 만들 수 있다.
바닐라 JS로 크롬 앱 만들기 - (3)
자바스크립트와 HTML의 상호작용
memo
홈화면 헤더 커스텀
index.html의 레이아웃 : home home.html의 레이아웃 : custom-home custom-home.html의 레이아웃 : custom-categories custom-categories.html의 레이아웃 : custom-archive custom-archive...
깃허브 카테고리 페이지 404 file not found 오류
로컬 jekyll serve로 페이지 들어가면 잘만 되는데 왜 깃허브 온라인 페이지로 들어가면 404 오류가 뜨는걸까 404 file not found 오류.. 열심히 또 구글링을 시작한다…ㅜㅜ
이틀째
이것저것 구글링하면서 만져본지 딱 24시간이 지났다 꽤 많은 것들을 알게 됐지만 여전히 아무것도 모르겠다 우선 다음날이 되기 전에 할 것들은 사이드 메뉴를 클릭했을 때 바로 글이 보이는게 아니라 글의 목록이 보이도록 하기 포스트를 클릭했을 때 다음, 이전 버튼이랑 참고 부...
마크다운 문법
줄바꿈 엔터 치기 전에 공백 두칸으로 줄바꿈 가능. 단을 나누기 위해 강제로 줄바꿈을 한번 더 하고 싶다면 <br/>넣기
첫 게시물
안녕 내 깃허브 블로그의 첫 게시물! 오늘부터 내 소소한 기록들을 쌓을 예정이야 잘 할 수 있을지 모르겠고 이게 지금 맞는건지도 잘 모르겠지만 아무튼 잘 부탁해
script
정규 표현식, Regular expressions
정규 표현식이란 문자열의 일정한 패턴을 표현하는 일종의 형식 언어를 뜻한다. 복잡한 문자열 처리 코드를 대신해서 사용한다.
findIndex(), 객체 배열에서 원하는 값 찾기
.findIndex( ) 배열에서 주어진 함수를 만족하는 첫번째 인덱스를 찾아 반환한다.
Promise 객체
비동기 처리란? : 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성
html
form 태그와 관련 태그들
<form> 태그 form 태그는 사용자의 입력을 받을 때 사용한다. <input>, <button>, <label>등 다양한 요소들이 포함될 수 있다.
input 태그의 중요한 속성과 속성값
input 태그 사용자의 입력을 받을 수 있다.
vanilla-js-paint
바닐라 JS로 그림판 만들기 - (1)
배울 내용 <canvas>태그 canvas의 context 마우스 포인터를 따라 그려지는 그림 브러쉬의 색상과 두께 설정 fill 버튼으로 캔버스 색 채우기 save 버튼으로 이미지 저장하기
css
flex와 grid
flex와 grid의 차이 flex는 1줄, grid는 여러줄의 레이아웃을 설정하는데 편리하다.
SVG 이해하기
싸이월드 프로젝트를 진행하면서 투두리스트 배경에 삼각도형을 css에서 border를 이용해 제작했다. 하지만 반응형으로 적합하지 않은 방식 떄문에 브라우저 창의 크기에 따라 다르게 보이는 문제가 있었다. 이 문제를 해결하기 위해 svg를 이용했다! 튜토리얼 사이트
design
맨 위로 이동 ↑about
About
안녕!