본문 바로가기

전체 글53

[Javascript / Html / CSS] Typing Text (타이핑 텍스트 효과) 1. Html + CSS 꾸미기 타이핑 효과를 주기 전에 먼저 원하는 폰트와 원하는 text를 화면에 배치합니다. I'm Coding *{ box-sizing: border-box; margin: 0; padding: 0; font-family: 'Roboto', sans-serif; } .container{ height: 100%; height: 100vh; background: #32a89b; color: #fff; display: flex; justify-content: center; align-items: center; } .container h1{ font-size: 80px; } 이렇게 나오면 성공! 2. Typed JS를 설치 https://github.com/mattboldt/typed.j.. 2022. 10. 26.
CSS 공부할 수 있는 게임 2개 추천! css를 공부하고 난 뒤 어느정도 알고 있는지 확인할 수 있는 게임들을 추천해드리겠습니다~! 1. Flexbox Froggy 개구리가 연잎에 올라갈 수 있도록 코드를 짜주면 됩니다! 첨엔 간단하지만 레벨이 올라갈 수록 난이도가 올라갑니다 https://flexboxfroggy.com/ Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 2. CSS Dinner 움직이고 있는 아이템의 선택자를 알맞게 적어주면 됩니다. https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 두가지 게임을 수월하게 .. 2022. 9. 30.
[CSS] Animation 1. keyframes를 잡아준다 @keyframes loading-title{ from{ opacity: 100%; } to{ opacity: 0; } } 2. animation이 필요한 곳에 넣어준다. .loading-title{ font-size: 18px; line-height: 1.333; font-weight: 400; color: #151B26; margin-bottom: 20px; text-align: center; animation-name: loading-title; animation-duration: 1000ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-direction.. 2022. 9. 30.
[CSS] Centering trick / 아이템, 글자를 가운데 정렬하는 방법 아이템을 가운데 정렬하는 방법 margin : auto 기본값으로 항상 오른쪽에 마진이 들어가 있어서 auto로 바꾸게 되면 양 옆으로 자연스럽게 margin값이 들어간다! text-align : center 블럭요소 안에서 그안의 컨텐츠들(텍스트 뿐만 아니라 버튼과 같은 인라인요소)들을 정렬할때 쓸 수 있다 transform : translate(50%, 50%) 자기 자신의 %만큼 움직인다 글자를 가운데 정렬하는 방법 text-align : center; line-height : 박스 높이 // 한줄의 높이를 지정함 2022. 9. 30.
[CSS] Flexbox Flexbox란? 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형 된다. display : flex; flex-direction flex 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정 기본축이 X축 방향 //왼쪽 → 오른쪽 flex-direction : row; //오른쪽 → 왼쪽 flex-direction : row-reverse; 기본축이 Y축 방향 //왼쪽 → 오른쪽 flex-direction : row; //오른쪽 → 왼쪽 flex-direction : row-reverse; flex-wrap ‘flex-item’ 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역.. 2022. 9. 30.
[CSS] Selectors Universal (전부) * type Tag ID #id Class .class State : Attribute [] State : (의사 클래스) 선택자에서 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있다. button:hover { color: red; background : yellow } Attrivute[] 주어진 특성을 가진 모든 요소를 선택 (^, $) a[href = "naver"] // naver가 들어간 것을 찾음 a[href^ = "naver"] // naver로 시작하는 것을 찾음 a[href$ = ".com"] // .com으로 끝나는 것을 찾음 자세한 내용은 아래 링크로! https://developer.mozilla.org/ko/docs/Web/CSS/CSS.. 2022. 9. 30.
알고리즘 공부하기 (javascript) 7가지 문제 처음 스터디에서 알고리즘 문제를 받았을 때 너무 어렵고 당황스러웠는데 그 뒤, 프로그래머스 스쿨 코딩 테스트를 풀기 시작하고 알고리즘에 익숙해지면서 다시한번 문제를 풀어보았습니다! 모두 결괏값을 구하는 문제입니다 1번 문제 function func(){ for(i=1; i 2022. 9. 30.
[코딩 테스트 연습] 문자열을 정수로 바꾸기 (javascript) 문제 문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요. 풀이 function solution(s) { return Number(s); } Number https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number Number - JavaScript | MDN Number is a primitive wrapper object used to represent and manipulate numbers like 37 or -9.25. developer.mozilla.org Number("123"); // returns the number 123 Number("123") === 123; /.. 2022. 9. 29.
[코딩 테스트 연습] 제일 작은 수 제거하기 (javascript) 문제 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴 하고, [10]면 [-1]을 리턴 합니다. 풀이 function solution(arr) { if(arr.length > 1){ let min = Math.min(...arr); let answer = arr.filter(el => el !== min); return answer; }else{ return [-1]; } } Math.min을 이용하여 배열의 가장 작은 수를 구하고, filter를 이용하여 가장 작은 수를 제외한 나머지를 return한다.. 2022. 9. 29.