코로 넘어져도 헤딩만 하면 그만

💡영어가 싫어요function solution(numbers) { const dic = ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"]; let answer = ""; let currentWord = ""; for (let i = 0; i answer을 담는 변수와 현재 단어를 담는 변수를 만들어, dic의 index+1만큼 더하는 방식을 적용했다.객체로 담은 뒤 replace메서드를 콜백 함수와 함께 사용하는 방식이 있어 적어둔다. ✨ replace 1번째 인자는 정규표현식이 올수 있고 2번째 인자는 콜백이 올 수 있다. function solution(numbers) { co..

💡모음 제거하기function solution(my_string) { return my_string.split('').filter(char => !'aeiou'.includes(char)).join('');}!'aeiou'를 통해 char이 모음 리스트에 포함되지 않는 경우에만 filter한 뒤 join으로 문자열화 시켜 묶어준다. 아래와 같이 replace()와 정규 표현식으로 사용할 수도 있다.  tip: replace() 메서드는 pattern의 단일, 일부 혹은 모든 일치 항목이 replacement로 대치된 새 문자열을 반환한다.function solution(my_string) { return my_string.replace(/[aeiou]/g, '');}  💡숨어있는 숫자의 덧셈f..

💡오름차순, 내림차순 sort()로 정렬하기function solution(array) { const resortList = array.sort((a, b)=>a-b); const mid_num = Math.trunc(array.length / 2); const answer = resortList[mid_num]; return answer;}어제 푼 문제에서 나온 Math.trunc()로 소수점 이하의 수를 버리는 방식을 취했다. floor을 썼어도 괜찮았을 것 같다.sort()는 기본적으로 문자를 UTF-16 코드 유닛 값을 기준으로 정렬한다. 따라서 숫자 정렬을 제대로 하기 위해 커스터마이징이 필요하다. 이번에는 a-b를 사용해서 오름차순으로 정렬해주었다.또한, sort()의 경우 원..

💡Math.trunc()Math.floor()은 소수점을 내림하지만, Math.trunc()는 소수점 이하를 다 버린다. Math.floor(23.333) //23Math.floor(-23.333) //-24Math.trunc(23.333) //23Math.trunc(-23.333) //-23   💡 삼항 연산자를 사용하여 값 비교하기function solution(num1, num2) { var answer = num1 === num2 ? 1 : -1; return answer;}나는 if else문으로 풀었던 문제인데, 삼항 연산자로 깔끔하게 한 줄로 표시할 수 있다.  💡최대공약수 구하기function fnGCD(a, b){ return (a%b)? fnGCD(b, a%b) :..

java script 에서 비동기를 동기적으로 시행하기 위해선 Promise를 써주면 좋다. 회원 인증 같이 서버와 통신해서 인증을 받을 때에는 인증이 먼저, 그 다음 정보 내려주는 순차가 중요해서... 주로 서버랑 통신할 때에 프로미스를 쓴다고 보면 됨. 오류 방지용으로... 프로미스 함수식은 new Promise(function(resolve, reject){ }) 이런 식으로 이루어진다. Promise, 즉 '약속' 은 resolve받다 와 reject거절하다 로 나뉜다. 단, {}안에는 reject나 resolve 중의 하나 조건만 넣을 수 있음. const myPromise = new Promise(function (resolve, reject) { //resolve("약속 지켰다"); setT..

우선 이 효과를 위해서는 svg 파일로 준비된 라인아트가 있어야 한다. 무료 이미지 찾아보려고 노력을 많이 했는데 구하기가 쉽지 않다... AI를 배워서 만드는 게 가장... 이상적이지 않을까? 일단 샘플로 사용된 코드(비상업 무료). man 벡터 이미지는 라인의 좌표를 다 따는 거라서 생각보다 길다... 하여튼... 이제 창을 띄우고, 각 class 들이 어떤 구획을 담당하는지 지워보며 파악한다. 위 코드에서는 cls-5가 선을 담당하고 있고 나머지는 뒷부분의 채색인 것 같다. 구역을 파악했으니 이제 css로 이동해서 조금씩 만져주면 된다. svg { width: 600px; .cls-5 { stroke-width: 6px; stroke-dasharray: 1000; } } stroke로도 여러 설정이..

클론 코딩을 하던 중, 상단 메뉴를 클릭하면 아래쪽에 원하는 위치까지 자동으로 스크롤이 내려가게 하는 기술을 습득했다. 세로로 긴 페이지를 쓰게 되면 분명 필요할 것이다. 제작한 상단 메뉴는 다음과 같다. gsap을 쓰기 때문에 깔려 있어야 됨. 연혁 역대학장 역대 부학장 scroll-menu에는 위와 같이 세 가지 메뉴가 들어있다. 같은 디자인이기에 ul의 li 구조로 만들어졌으며, 각 li마다 class로 on이 달리면 배경이 파랗게 되고 글자가 하얀 색이 되도록 css 처리를 해둔 상태다. data-target에 대해서는 아래서 설명, 일단 각 파트를 담은 id로 적어뒀다. 우선 scrollMenu를 찾아주고, click 이벤트가 일어날 때 어떤 일이 발생할지 함수로 정해준다. 이 경우 먼저 $(t..

아직 제대로 써보지 못한 사이트들도 있다. 유료, 무료 여부는 나중에 기재. 아마 대부분은 무료일 것이다... 아이콘 모음 - FontAwesome : 여러모로 구글 폰트와 더불어 가장 유용하게 쓰고 있는 아이콘 사이트. 무료 아이콘들도 꽤 있고... 하여튼 예쁜 건 유료다. 가입해야 하는 듯. https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com - XEIcon : 한국 사이트, 여러 벡터 아이콘들을 받을 수 있다. 라이브러리에서 다운 가능. http://xpr..

풀다운 메뉴 pull down menu, 다른 말로 드롭다운 Drop-down 메뉴는 상단 헤더 영역에 주로 들어가는, 페이지를 바꿀 수 있게 돕는 메뉴다. 긴 설명보다 눈으로 직접 보는 게 깔끔할 것이다. 1. 기존에 만들어둔 헤더-메뉴 css 파일 중에서 헤더의 하위 항목에 아래처럼 full 클래스를 추가해준다. css가 아니라 scss로 작성한 코드니 참고. &.full { height: 400px; overflow: hidden; #gnb .list .depth01 { transition: none; } #gnb .list .depth02 { transition: none; border-radius: 0; li { transition: none; } } #gnb .list > li:hover .d..

웹 페이지의 맨 위에 있는 투명한 배경 헤더가, 스크롤을 내리는 행위에 맞춰 함께 따라 내려오며, 글씨가 더 잘 보이도록 배경이 생기는 레이아웃이 존재한다. 헤더가 계속 위에만 있는 구조라면 상관 없겠지만... 스크롤을 내릴 때 헤더가 따라 내려오며 바뀌는 효과는, 대체 어떻게 만드는 걸까? 이런 헤더는 js와 css를 사용해서 만들 수 있다. 일반적 헤더 구조까지는 다 만들어둔 걸 가정하고 시작한다. 1. 우선 html의 헤더는 id="header"을 갖고 있어야 한다. id가 있어야 script에서 헤더 제어가 가능하다. 또한 헤더의 배경색으로는 아무것도 넣지 않고, position:fixed; 를 처리해서 스크롤을 내려도 상단에 계속 고정되게 한다. 2. css 파일 header css부분 아래쪽에..

오늘은 자바 스크립트에 대한 아주, 아주아주 기초적인 부분을 먼저 맛보기 해봤다. 다른 언어들과 달리 Java Script는 HTML안에서만 작동한다고 한다. 따라서 쓸 때 html의 body 안에 넣어서 적용해줘야 한다. 이 언어는 주로 head에 를 써서 그 안에 넣는 방식으로 사용된다. JS는 웹브라우저 창에서 f12를 누르고 console에 들어가면 볼 수 있는 console.log로 주로 먼저 실행한다. 콘솔 창에서 잘 돌아가는지 검사하는 방식이다. 변수, 함수, 문(statement; 조건문, 반복문), 식(계산) JS에서 중요한 건 크게 다음 네 가지로 나눌 수 있다. 1. 변수는 값을 보관하는 주소를 의미한다. let iq = 130; console.log(iq); iq = iq - 10;..