VanillaJS
Vanilla JS Toy 프로젝트 - 2. Movie Seat Booking (javascript편)
여기에 올라온 모든 프로젝트와 소스코드는 here 여기서 확인할 수 있다. vanilla javascript Toy project 2. Movie Seat Booking 이번 프로젝트에서는 ES6에서 새로 지원하는 문법을 다수 사용했다. 생각보다 함수는 적은데, 함수의 내용이 알차서 그런지 공부가 엄청 되었다. 이번 글에서 소개할 내용은 다음과 같다. javascript의 localstorage 프로젝트에서 사용되는 모든 함수 설명 자바스크립트 파일의 로직 설명 0. DOM Element 가져오기 이 프로그램에서 자바스크립트로 해야하는 기능을 요약하자면 총 4가지이다. 영화를 선택할때 값 localstorage에 저장하기 선택한 좌석의 개수를 좌석의 변화에 따라 계속 갱신하기 선택한 좌석의 개수와 선택한..
VanillaJS
Vanilla JS Toy 프로젝트 - 2. Movie Seat Booking - CSS편(2)
여기에 올라온 모든 프로젝트와 소스코드는 here 여기서 확인할 수 있다. vanilla javascript Toy project 2. Movie Seat Booking 웹 페이지 만들때 생각보다 js보다 css부분이 내용이 엄청 많다. 순전히 디자인적 요소만 들어가있어서 그런지 특히 속성 부분을 설명하는데 모든 시간을 쏟는거 같다. 그래서 이번 포스트는 css 2번째 부분이다. 4. showcase class 설정 showcase부분은 3가지 좌석 유형을 설명하는 부분이다. 이 부분을 우리는 li태그를 사용했는데, 이 못생긴 li태그를 어떻게 깔끔하게 만들 수 있는지 확인해보자. 일단 이 부분의 배경색과 글자 색이 각각 검은색, 회색이기 때문에 이것을 기본적으로 설정하고, padding을 적절히 설정해..
VanillaJS
Vanilla JS Toy 프로젝트 - 2. Movie Seat Booking - CSS편(1)
여기에 올라온 모든 프로젝트와 소스코드는 here 여기서 확인할 수 있다. vanilla javascript Toy project 2. Movie Seat Booking 저번 글까지 해서 웹 페이지의 기본틀을 만들었으니 이번에는 CSS를 다뤄볼 차례이다. 이번에도 CSS부분은 포스트 1개로 끝나지 않을 것 같다. 생각보다 알아야 할 내용도 많고, 새로운 개념도 마구마구 등장한다. 게다가 모르면 당할 수 밖에 없는 의사 클래스까지. 이번에도 내가 처음 배워서 잘 모르겠거나 알아두면 좋을 것들을 일일이 설명하면서 천천히 나아갈 예정이다. 1. 기본적으로 수행해야할 스타일 적용 box-sizing: border-box box-sizing 속성에는 content-box와 border-box 두가지 값이 있고, ..
VanillaJS
Vanilla JS Toy 프로젝트 - 2. Movie Seat Booking (html편)
순수 자바스크립트로만 웹 프로젝트를 몇개 할 것 같다. 아래에 있는 내용은 그 두번째 프로젝트이다. 여기에 올라온 모든 프로젝트와 소스코드는 here 여기서 확인할 수 있다. vanilla javascript Toy project 2. Movie Seat Booking readme에 나온 요구 사항은 다음과 같다. 영화 선택, 스크린, 좌석, 좌석 정보가 포함된 UI를 구성하라 사용자는 영화/가격을 선택할 수 있다. 사용자는 좌석을 선택/비선택 할수 있다. 사용자는 이미 선택된 좌석을 선택할수 없다. 좌석의 수와 전체 가격이 업데이트 되어야 한다. UI가 새로고침 되어도 상황이 유지되게 좌석과 영화, 전체 가격을 웹 로컬 저장소에 저장하라. 완성된 최종 결과물은 다음 링크에서 확인할 수 있다. 링크 ht..
VanillaJS
Vanilla JS Toy 프로젝트 - 1. Form Validator (javascript편)
여기에 올라온 모든 프로젝트와 소스코드는 here 여기서 확인할 수 있다. vanilla javascript Toy project 1. Form Validator 대망의 자바스크립트 부분까지 왔다. 간단한 웹사이트를 만드는데 필요한 설명이 이렇게 길어질줄 몰랐다. 진짜 일주일에 한번이 아니라 한달에 한번씩 업로드를 해야하는 상황도 올 수 있을 것 같다. 상대적으로 자바스크립트는 이번 웹 사이트에서 설명할 것이 좀 적기 때문에 이번 글로 다 마무리 할 것 같다. 이번 글에서 소개할 내용은 다음과 같다. 이번 프로젝트에서 사용할 DOM 구성요소 간단 설명 프로젝트에서 사용되는 모든 함수 설명 ShowError, ShowSuccess 로직 설명 이벤트 등록하기 0. INTRO vanilla javascript..
VanillaJS
Vanilla JS Toy 프로젝트 1. Form Validator - CSS편(2)
여기에 올라온 모든 프로젝트와 소스코드는 here 여기서 확인할 수 있다. vanilla javascript Toy project 1. Form Validator css는 정리할 내용이 많아서 부득이하게 나눠서 글을 올릴것 같다. 이번 글로 css는 끝내고 다음 글에서는 javascript를 어떻게 구성할지 알아보자. 이번 글에서 소개할 내용은 다음과 같다. flex container 내부 설정 css의 box layout에 있는 margin과 padding 조절 각 요소의 위치 설정 1. flex container 내부 설정 flex container에서는 주 축이 지나가는 크기를 설정할 필요가 없다. 왜냐하면 container에 들어있는 element들의 padding, margin과 같은 box l..
