1. 좀더 flexible 한 웹을 위한 property. 이번엔 minmax, grid-auto-flow 등과 같이 창의 크기에 따라 item의 크기가 바뀌거나 또는 새로 들어오는 item을 자동으로 배열해주는 property를 배워볼 것이다. 역시나 html 을 우선 만들어주자. <!DOCTYPE html> <html lang=...
GRID-TEMPLATE
1. GRID TEMPLATE 이번에는 훨씬더 직관적이고 더 쉽게 GRID를 만들어보도록 하자. 바로 GRID-TEMPLATE 라는 PROPERTY 를 사용해서 말이다. 그리고 GRID의 각 행과 열에 이름을 붙여 세부적으로 MODIFY 할 수 도 있다. 또한 특정 행과 열이 어디부터 어디까지 이어지는지도 정할 수 있다. 먼저 HTML 부터 만들자....
GRID를 배워보자
1. GRID flex 와는 다르게 높이와 넓이를 설정할 수 있다. 쉽게 말해 표라고 보면 된다. 우선 몸풀기로 간단한 표 하나 만들어 보자. 역시나 html 파일을 하나 만들자. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />...
flex 하게 소리질러!!
1. flexbox 이제부터 본격적으로 웹디자인을 담당하는 css에 대해서 배워볼려고 한다. flex는 contents 위주의 디자인이다. grid 처럼 위아래를 다루는 2d 방식의 form이 아니기 때문. 그리고 flex property는 웹창의 크기에 따라 유연하게 item이 변할 수 있게 해준다. 우선 flex.html을 만들어주자. <...
todo list - css 다듬기
목표물 거의 끝났지만 아직 완전히 끝난게 아니다. 가운데 정렬도 안되어있고 글자 크기도 뒤죽박죽이다. 나의 목표는 아래의 그림같이 나오게 하는거다 그러기 위해서 우선 가운데 정렬부터 하자. 그리고 검사에 들어가서 해당 태그를 클릭한후에 margin, padding 값을 더블클릭하면 임시로 변환할 수 있다. 변화를 줘가면서 균형을 맞추자. 그리...
to do list - 위도 경도 받기(api)
위도, 경도 받아오기. 우선 위도, 경도를 navigator 함수를 이용해 받아온다. 그리고 그 위치로 장소를 파악해 해당 장소의 날씨데이터를 전송해준다. weather.js 파일을 만들고 언제나 그렇듯 html 에 추가한다. const COORDS = "coords"; function getWeather(lat, lng) {} functio...
to do list - 배경화면
배경화면 배경화면을 3개 고르고 새로고침할때마다 3개중 1개가 랜덤으로 선택되어 나타나게 된다. 그래서 unplash 라는 웹사이트에서 마음에 드는 배경 3개를 다운받도록한다. 사이즈는 1920 x 1920 언저리로 하는게 가장 이상적일것이다. 안그럼 그림이 늘어나서 해상도가 떨어지는 경우가 생길 수 있다. 그리고 bg.js 를 만들고 index.h...
to do list - 데이터 저장, 삭제
데이터 저장 하는 법 데이터 저장은 array를 하나 만들어서 차곡차곡 저장한다. 아래는 todolist.js 에 추가되는 코드들이다. 그리고 데이터는 tuple 의 형태로(id:@@ ,text:@@) array 이에 저장되게 될 것이다. const loadedToDos = localStorage.getItem(TODOS_LS); if (toD...
to do list - list 추가
To do list 칸 만들기 Html 파일 수정 역시나 to do list가 들어갈 공간을 html 에 만들어준다. <head> <meta charset="utf-8" /> charset을 추가해줘서 이모지를 인식할 수 있게 해준다. </head> <form class="js-toDoForm">...
todo list - username
이름입력하기 Html 파일 수정(역시) <form class="js-form form"> <!--form 태그를 쓰는 이유: form 태그는 웹상에 구현되는 공간을 생성하는 거고 div는 단순히 구역을 구분할때 쓰는 태그이다. --> <input type="text" placeholder="What is your ...