전체 글
-
-
Day17. MovieAppUDEMY/50 Projects In 50 Days - HTML, CSS & JS 2024. 1. 12. 12:57
HTML CSS .movie { width: 300px; margin: 1rem; background-color: var(--secondary-color); box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2); position: relative; overflow: hidden; border-radius: 3px; } position:relative; relative: the element is positioned relative to its normal position.We can move relative element using top,bottom,left and right. .movie-info span.green{ color: lightgreen; } .movie-info sp..
-
Day16. DrinkWaterUDEMY/50 Projects In 50 Days - HTML, CSS & JS 2024. 1. 12. 11:34
HTML Drink Water Drink Water Goal : 2 Liters Goal: 2 Liters cup remained liters 1.5L remained Remained percentage text Select How many glasses of water that you have drank cup cups * 8 250ml CSS .cup border-radius: 0 0 40px; .cup.cup-small border-radius: 0 0 15px 15px; .cup.cup-small.full{ background-color: var(--fill-color); color: #fff; } js DOM을 이용해서 .full class를 붙일 경우 백그라운컬러와 폰트컬러를 변경. .perc..
-
머쓱이보다 키 큰 사람Programmers-CoadingTest 2024. 1. 11. 05:55
배열함수 Array.prototype.filter() The filter() method of Array instances creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function. const words = ['spray', 'elite', 'exuberant', 'destruction', 'present']; const result = words.filter((word) => word.length > 6); console.log(result); // Expected ..
-
배열 자르기Programmers-CoadingTest 2024. 1. 11. 02:50
배열 자르기 배열함수를 공부 했다면 아마도 slice 또는 splice 를 생각했을 것이다. 그러면 공부를 하긴 했으나 제대로 한 것이 아니다. 위에 정답과 다르게 그냥 slice만 집어 넣으면 오류가 난다. 배열.slice( start[,end ] ) 배열.slice( start[,end ] ) 반환 타입은 배열 start 을 지정하지 않으면 인덱스 0 부터 시작 end 는 종료할 인덱스로 end 전까지 복사함 end 를 지정하지 않으면 배열의 길이가 됨 (길이보다 큰 수가 와도 배열의 길이) 배열의 복사 1 여기 중에 키워드가 있다. 배열 자르기 +1 더 깊이 딮하게 이해 하는가를 묻는 문제.
-
Day01.Form ValidationUDEMY/20 Projects in 20 Days - Vanilla JS 2024. 1. 2. 20:52
HTML Register With Us Username Error message Email Error message Password Error message confirm Password Error message Submit div>form>h2>div>label>input>small>button CSS .form-control.success input{ border-color: var(--success-color); } .form-control.error input{ border-color: var(--error-color); } .form-control small{ color: var(--error-color); position: absolute; bottom: 0; left: 0; visibilit..