분류 전체보기
-
[리팩토링] 로컬 스토리지프론트엔드 2022. 7. 29. 23:14
🎈 로컬 스토리지(Local Storage) 로컬 스토리지는 HTML5에서 추가된 저장소 키-밸류 스토리지의 형태, 쉽게 말해 브라우저 상의 데이터베이스 사용자가 직접 지우지 않는이상 절대 지워지지 않음 URL을 기준으로 저장되기 때문에 웹페이지 주소가 다른 곳에서는 정보가 저장되어 있지 않음 📝과제 : https://bighuni.github.io/JavaScript-Study/Assignment/1회차 [회고] 1회차 과제인 로컬 스토리지를 활용하여 간단한 메모장을 만들었었는데, 한 가지 메모 내용만 저장하고, 화면 전환 없이 바로 해당 메모를 삭제할 수 있는 기능 등을 보완하기 위해 html, css & js 전반적인 코드를 다시 뜯어내고 getItem과 setItem, JSON의 stringif..
-
자바스크립트 클래스 정리프론트엔드 2022. 7. 29. 23:12
🎈 자바스크립트 클래스 정리 생성자 함수 프로토타입 클래스 문법 클래스 정의 방식 비교(생성자 함수 vs 클래스) 클래스 호이스팅 [정리] 1. 클래스 정의 1-1. 생성자 함수 함수를 통해서 new 연산자와 함께 호출해서 빈 객체를 생성하여 반환한다. 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성시킬 수 있다. 새로운 객체(인스턴스)를 만들고 사용자가 요구하는 함수들을 구현할 수 있게 해주는데, 생성자 함수에 의해 생성된 객체를 인스턴스(Instance)라 한다. const player = new Object(); player.name = 'Choi'; player.sayWinner = function () { console.log('Ladies and gentlemen, ..
-
JS를 사용한 간단한 캐러셀 슬라이더프론트엔드 2022. 7. 29. 23:11
🎈 캐러셀 슬라이더(Carousel slider) 과제 여러 개의 이미지(그림, 사진, 영상 등)을 슬라이드 형태로 순환하며 보여주는 방식 보여지는 이미지 혹은 그림 유무 슬라이드를 이동할 수 있는 버튼 유무 마지막 슬라이드(5번째) 이후 다음 버튼 클릭 시 첫 번째 슬라이드(1번째)로 돌아오기 📝과제 : https://bighuni.github.io/JavaScript-Study/Assignment/2회차 [정리] div.slide_content는 float: left로 붙여 놓는다. 이를 감싸는 div.slide_list는 슬라이드를 모두 합한 넓이를 가져야 슬라이드가 가로 일렬로 늘어서게 된다. div.slide_box를 overflow-x: hidden으로 주어 슬라이드 한 개만 보여지게 만든다..
-
로컬 스토리지를 활용한 매우 간단한 메모장(JS)프론트엔드 2022. 7. 29. 23:08
🎈 로컬 스토리지(Local Storage) 로컬 스토리지는 HTML5에서 추가된 저장소 키-밸류 스토리지의 형태, 쉽게 말해 브라우저 상의 데이터베이스 사용자가 직접 지우지 않는이상 절대 지워지지 않음 URL을 기준으로 저장되기 때문에 웹페이지 주소가 다른 곳에서는 정보가 저장되어 있지 않음 📝과제(리팩토링 후) : https://bighuni.github.io/JavaScript-Study/Assignment/1회차 [정리] const LOCAL_DATA = "Contents"; => 저장할 데이터의 key 값 function hiddenAndGreeting(name) {···} => input 태그에 이름 입력 후 input 태그를 감추고, 텍스트가 나타나게 해주는 함수 function onCli..
-
크리스마스 with happy Coding프론트엔드 2022. 7. 29. 23:07
크리스마스 🎈 링크 : https://bighuni.github.io/Merry-Christmas-with-snow/Merry-Christmas-with-snow/ [목적] 파이썬은 1989년 12월 크리스마스를 심심하지 않게 보내려고 네덜란드 귀도 반 로섬(Guido van Rossum)이 혼자 만들었다고 한다.. 나 또한 이 정신을 본 받아 대훈 허(Daehun Heo)도 HTML, CSS, JavaScript 친구들과 함께 이번 2021년 12월 크리스마스를 심심하지 않게 보내려고 만들었다..! [회고] ❤ 스타일 body의 height 값으로 100vh 설정함으로써 웹 브라우저의 높이와 일치 단색의 배경의 단조로움을 피하기 위해 원형 그라이데이션(redial-gradient) 함수 사용 원형 그라..
-
CSS(Grid), 스프린트 회고프론트엔드 2022. 7. 29. 23:05
Grid 다양한 레이아웃을 구현 📝실습 : https://bighuni.github.io/front-end-school/Training/211108_Grid/ Flex에 이어 Grid를 학습하게 되었다. 둘의 내용이 겹치는 부분이 있지만, 궁극적인 차이가 존재한다. Flex = 한 방향의 레이아웃(1차원) Grid = 두 방향의 레이아웃(2차원) 파이어폭스 개발자 도구에서 그리드를 명확하게 보여주는 기능때문에 그리드를 처음 학습할 때는 파이어폭스가 유용했지만, 이제 크롬 개발자 도구에도 이 기능이 생겼다..! Flex와 마찬가지로 부모는 Grid Container, 자식은 Grid item grid-template-columns : 열의 넓이 grid-template-rows : 행의 높이 repeat ..
-
CSS(Flex)프론트엔드 2022. 7. 29. 23:04
Flex 콘텐츠를 정렬하거나 공간을 나눌 수 있는 CSS 속성의 집합 처음 뵙게 된 한재현 강사님의 강의를 들었다. 이호준 강사님과 같이 정말 잘 가르쳐주셨고, 수강생분들이 하신 질의응답을 너무 잘 받아주셨다. 무엇보다 수업이 유쾌하고, 리액션이 활발하셔서 졸음이 오지 않는다는...! 👦🏻 [Position 보충] Absolute는 본래 위치에 계속 있음 sticky는 나온지 얼마 안되 '-webkit-'과 같은 브라우저 지원을 위한 벤더 프리픽스가 필요함 [Flex] display : flex;로 선언 부모는 container, 자식은 item 자신의 직계자식까지만 영향 축 방향 : [가로] *row, row-reverse * [세로] *column, column-reverse * jus..
-
나만의 캐릭터 만들기 과제프론트엔드 2022. 7. 29. 23:02
제 1회 자신만의 캐릭터 그리기 경진대회 강사님께서 '나만의 캐릭터 만들기 경진대회'를 개최하셨다. 수업에서 배웠던 CSS 이론 지식을 총동원해서 어쨋든 결과물을 만들어내야 하는건데 난 학습 진도가 느려서 이제와서 완성해보았다... 디자인쪽에 소질이 없는 난.. 곰을 그리고 싶었는데, 그냥 라이언이 되버린 느낌이랄까...? 😥 캐릭터명은 '샤이베어🐻' 인데, 막상 결과물을 보니까 정말 이름대로 부끄러워진다... 앞으로 더 디자인 감각과 실력을 올려야지.. 🎈미션 : 기존에 없는 나만의 캐릭터를 CSS로 구현해서 만들기 📝과제 : https://bighuni.github.io/front-end-school/Assignment/211104_Character/ [회고] 먼저, html 구성에서 전체를 포괄하는..