See the Pen form요소의 focus 제어와 마크업 by yyyhhh (@yyyhhh) on

무한으로 반복되는 텍스트 애니메이션은 가끔씩은 필요할 때가 있습니다. 라이브러리를 사용해도 되겠다고 생각은 하지만, 라이브러리를 잘 알지 못하기 때문에 이번 기회에 직접 제작해 보았습니다. 라이브러리를 사용하지 않고 Vanilla Javascript를 이용해 만듭니다.

이번 예제는 메뉴를 호버 및 초점 진입시 하위메뉴가 전부 나타나는 UI 디자인이다.호버했을때 호버한 부분의 하위메뉴의 배경색이 변경되어 시각적으로 구분이 되도록 설정하였다.jQuery에서는 마우스 호버에 대한 하위메뉴 배경변경만 설정되어 초접진입시 하위메뉴의 배경색이

이번에는 하위메뉴가 가로로 나타는 메뉴를 jQuery로 마우스 호버, 초점진입 코드를 Vanilla Javascript로 변경하는 작업을 하였다.jQuery로는 fadeIn()와 fadeOut()메서드를 이용해 display:none인 요소를 부드럽게 나타나지만, 같은

아직까지도 퍼블리싱에 관련되 JS들은 jQurey를 이용해 DOM요소들을 조작하는 경우가 많다. 이제는 jQurey는 레거시로 여겨지면서 Vanilla JS로 코드를 수정하는 작업이 필요함을 느꼈다. 또한, 나도 jQurey보다 Vanilla JS로 작업을 하기 때문에

hide 클래스는 텍스트를 화면에 표시하지 않을때 사용한다.'한국형 웹 콘텐츠 접근성 지침 2.1 : 대체텍스트'를 위한 으로IR기법이라고 한다.'의미 있는 배경 이미지'조항에서 배경이미지란 background-image속성으로 표현하는 방법인데 이때 삽입한 이미지가

이번에는 변화되는 숫자가 위에서 아래로, 아래에서 위로 움직여 변화하는 애니메이션 모션을 만들어보았습니다. 랜딩페이지에 숫자가 변화되는 애니메이션을 래퍼런스로하여 GSAP을 이용해 사용해보았습니다.(디테일적인 면은 완전히 다르지만, 일단은 숫자가 변경되는 모습을 구현

백준 1316. 그룹 단어 체커 https://www.acmicpc.net/problem/1316 제출한 풀이 문제 풀이 강의 https://www.youtube.com/watch?v=btH6nvpvO2k

https://www.acmicpc.net/problem/2941replace()메서드는 동일한 문자를 중에 일치하는 문자 중 첫번째만 치환시켜준다.replaceAll()메서드를 이용하여 입력받는 문자열의 일치하는 문자를 0으로 치환하는 방향으로 문제를 풀었다

https://www.acmicpc.net/problem/1152문자열을 공백을 기준으로 잘랐을때의 배열의 길이를 출력하면 되겠다 생각해서 제출했는데 오답이 나왔다.예외의 케이스를 생각해야 한다는 것을 알게 되었고, 공백이었을때의 예외처리를 해서 제출하였다.t

https://www.acmicpc.net/problem/1157문제 접근 아스키코드를 이용 (대문자 알파벳 : 65 - 90)알파벳 개수만큼을 가진 배열을 생성(0-25) -> 0 : A, 1: B .... 25 : z알파벳 배열에 숫자를 이용해 중복된 값이

https://www.acmicpc.net/problem/267523 ABC5 /HTP첫번째 for문은 입력된 첫번째 값을 이용해 for문을 두번 순회하도록 하였다.let arr = input\[i].split(" "); : 반복해야하는 숫자와 문자열을 공백을

https://www.acmicpc.net/problem/10809구상입력값인 input의 인덱스 값을 이용해서 알파벳 순서의 배열에 넣어준다.풀이중첩 for문을 이용해 stringArr(알파벳 문자가 들어있는 배열)에 input배열의 요소와 같은 것을 찾아

https://www.acmicpc.net/problem/11720for문을 이용해 답을 찾으려 했으나, for문이 중접되는 것 같아 map()메서드를 이용해 배열에 각 요소마다 접근해 num변수에 값을 축적하는 방식으로 접근했다.

https://www.acmicpc.net/problem/11654문제를 풀면서 아스키코드라는 개념 자체를 처음 접했다.이건 뭔가 싶었는데 절대로 내 머리로 구현할 수 없는 규칙?인 것 같았다. 그래서 왠지 자바스크립트 언어내에서 도출할 수 있는 메소드가 있을

https://www.acmicpc.net/problem/43441.반 평균을 구한다.2.반 평균을 넘은 학생 수를 구한다.3.학생수 / 전체 학생수의 비율을 구한다.출력된 값은 똑같이 나왔는데 오답으로 처리 되었다.틀린 코드에서 numArr\[0]으로 사용한

https://www.acmicpc.net/problem/89585OOXXOXXOOOOOXXOOXXOOOXOXOXOXOXOXOXOOOOOOOOOOOOOOXOOOOXOOOOXinput의 요소에 split()를 사용해 입력값에 'X'를 기준으로 'O'만 남긴다.

https://www.acmicpc.net/problem/1546최대값 구하는 것은 Math.max()메서드를 이용하여 구했다.Math.max()메서드의 인자로 배열을 그대로 넣을 수 없다.따라서 spread 문법을 이용해 배열의 요소를 넣어 최대값을 구할 수

https://www.acmicpc.net/problem/305224를 나눈 나머지를 구한다.서로 다른 값 비교해 배열을 만든다.그 배열의 길이를 구해 개수를 구한다.2번 과정result의 배열은 빈 배열을 시작으로 값의 나머지 값들을 하나씩 같게 되는데 업데

https://www.acmicpc.net/problem/2562입력 받는 값은 배열로 만든다.input의 배열을 복사한다.(깊은 복사를 해서 원본 배열이 바뀌지 않도록 한다.)sort()를 이용해서 배열을 오름차순으로 정렬한다.출력(원배열에서 최대값의 인덱스