joyful

마우스 이벤트 중 moustenter와 mouseover의 차이점을 알아보겠습니다.  moustenter와 mouseover는 어떤 요소 안으로 마우스가 들어오는 순간을 감지하는 이벤트이며, 이와 반대로 mouseleave와  mouseout은 마우스가 어떤 요소 밖으로 이동하는 순간을 감지하는 이벤트입니다.moustenter - mouseleavemouseover - mouseout  이 둘은 매우 유사하지만, 이벤트 버블링이 일어나느냐에 따라 차이가 납니다.  *이벤트 버블링: 특정 요소에 이벤트가 발생했을 때 해당 이벤트가 상위의 요소들로 전달되는 특성    mouseenter / mouseleave:-버블링이 일어나지 않습니다.-따라서 자기 자신만이 이벤트를 받아 한 번만 발생합니다.   mous..

img {transform:translateY(100%); animation:애니메이션명 2.2s infinite linear} 문제 이미지에 transform 속성과 aos를 모두 선언했더니, 애니메이션이 제대로 동작하지 않음.  해결transform 속성과 aos를 따로 넣어주면 해결. transform은 이미지에 선언, aos는 이미지를 담고 있는 부모 박스에 선언 img {transform:translateY(100%); animation:애니메이션명 2.2s infinite linear}  원인aos에서의 transfrom 값과 애니메이션 설정을 위한 transform 값이 서로 충돌함.

문제모바일에서 동영상 사이 경계선이 계속 보임 해결/* inline 이미지 -> block 으로 만들기 */img { dispaly : block;}/* img 담고 있는 부모 박스에 font-size: 0선언 */.img-box { font-size: 0;} 원인inline요소는 기본적으로 font-size 스타일을 가지고 있음따라서 이미지가 inline, inline-block인 경우 여백이 생기는 브라우저 이슈가 있음이 때 두 가지 방법 중 택하여 사용하면 해결!1. img를 block 처리2. img의 부모 박스에 font-size: 0 처리   문제위 방법을 써도 경계선이 보임 해결/*동영상의 크기를 부모박스보다 크게 넣어서 부모 박스의 ove..

줄바꿈 관련 속성 중 word-wrap과 word-break가 종종 헷갈리곤 했는데,둘의 차이를 정확하게 짚고 넘어가보겠습니다.   웹에서는 언어를 크게 2가지로 분류합니다. 아시아 언어(CJK = China, Japan, Korea) : 음절, 문자로 줄바꿈비아시아 언어(언어, 숫자, 영어, 베트남어 등) : 공백으로 줄바꿈 언어별로 문자가 다르게 랜더링 되기 때문에 해당 언어의 줄바꿈을 설정 할 때 word-wrap과 word-break 중 적절한 것으로 사용하면 됩니다.  word-wrap- 비아시아 언어의 줄바꿈을 제어- 속성값: normal: 기본값break-word: 글자가 길어지면 강제로 끊어서 줄 바꿈 처리 → 단어의 기준을 글자로 바꿈 word-..

문제출처: https://school.programmers.co.kr/learn/courses/30/lessons/120841 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 function solution(dot) { let answer = 0; if (dot[0] > 0 && dot[1] > 0) { return 1; } if (dot[0] 0) { return 2; } if (dot[0] 0 && dot[1] < 0) { retur..

문제출처: https://school.programmers.co.kr/learn/courses/30/lessons/120839 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 function solution(rsp) { let rspArray = rsp.split(""); let answer = []; for (let i = 0; i < rspArray.length; i++) { if (rspArray[i] == 2) { answer.push(0); } else if (rspArray[i] == 0) { answer.push(5); } else ..

문제출처: https://school.programmers.co.kr/learn/courses/30/lessons/120838 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 function solution(letter) { let result = letter.split(" "); let answer = ""; morse = { ".-": "a", "-...": "b", "-.-.": "c", "-..": "d", ".": "e", "..-.": "f", "--.": "g", "....": "h", "..": "i", ".---": "j", "-..

문제출처: https://school.programmers.co.kr/learn/courses/30/lessons/120837 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 function solution(hp) { const first = parseInt(hp / 5); //5를 먼저 나눠서 몫을 구함 const second = parseInt((hp % 5) / 3); //5를 나눈 나머지에서 3을 나누고 몫을 구함 const third = (hp % 5) % 3; //5를 나눈 나머지에서 1을 나눠 나머지를 구함 return first +..

문제출처: https://school.programmers.co.kr/learn/courses/30/lessons/120836 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 function solution(n) { let answer = []; for (let i = 1; i

문제출처: https://school.programmers.co.kr/learn/courses/30/lessons/120835 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 //기존 emergency = [3, 76, 24] function solution(emergency) { let sorted= [...emergency].sort((a,b)=>b-a) //[ 76, 24, 3 ] return emergency.map((num)=> num=sorted.indexOf(num)+1); //[ 3, 1, 2 ] } 1) emergency 배열의 ..