JavaScript88 JavaScript - 페이지이동 location.href / location.replace() / location.assign() 주말의 끝을 맞아 오늘은, 페이지 이동할 때 숨쉬듯 사용하였던 내장 메소드들의 속성을 심층 비교하며 공부해보았다. 어느 날 열심히 일하다가 페이지 이동 관련하여 히스토리 이슈가 생겼었는데 replace() 를 사용하니 히스토리가 남지않아 [뒤로가기] 기능이 의미를 잃어버리는 일이 생기게 된 일이었던 것이다. 그 땐 옆에서 🙄어🙄리🙄둥🙄절🙄 줏어듣기만 했었는데 우연한 기회로 정리해보게 되었다. 그럼 공식문서를 참고하며 차이를 알아보도록 하즈아 JavaScript - 페이지이동 location.href / location.replace()/ location.assign() location.href href는 태그를 사용하면서 가장 익숙하게 보았던 속성이다. 현재 접속 중인 페이지 정보를 가지고 있다. 또한 .. 2022. 2. 27. JavaScript - Array.from() 으로 배열만들기 Updated 08/22/22 Array.from 은 배열이나 객체를 복사해 새로운 Array 를 만든다. 함수나 컴포넌트 내에서 한번 쓰이고 말 간단한 배열이나 객체를 후딱 만들어 써야 할 때, 자주 사용되는 것 같다. 이터러블 객체(for of)과 유사배열은 배열같은 객체이다. 객체이기 때문에 push 나 pop 등의 메소드를 사용할 수 없다. 하지만 이러한 객체들을 배열처럼 사용해야 할 때, → Array.from() 을 사용한다. 그럼 공식문서에 있는 예제 코드를 살펴보면서 Array.from 을 익혀보자. 이터러블 객체와 유사배열 이터러블(iterable) 은 메서드 Symbol.iterator가 구현된 객체이다. 유사 배열(array-like) 은 인덱스와 length 프로퍼티가 있어서 배열처.. 2022. 2. 8. CSS - 헤더와 푸터 영역 고정하기 헤더와 푸터를 고정한 채로 가운데 body 부분만 overflow 속성으로 스크롤을 사용하여 올렸다 내렸다 하고 싶다. 이럴 때는 position 의 sticky 라는 속성을 사용하면 된다. HTML 헤더영역 // 스크롤바가 나오는 긴 내용 푸터영역 CSS header { position: sticky; // 포지션을 스티키로 주면 자연스레 고정된다. top: 0; // 탑에 붙여야 하므로 0을 준다. } footer { position: sticky; bottom: 0; // 여기는 바텀에 붙여야 하므로 0을 준다. } 2022. 1. 26. CSS - 가운데서 좌우로 펼쳐지는 라인 애니메이션 버튼 위에 마우스를 올려놓으면(hover) 밑줄이 가운데서 좌우가 양옆으로 펼쳐지는 라인 애니메이션을 구현하고자 한다. 결과화면 미리보기 프로필 버튼 위에 마우스 호버를 하면 밑줄이 좌우가 양옆으로 펼쳐지는 애니메이션이 생긴다. CSS - 가운데서 좌우로 펼쳐지는 라인 애니메이션 HTML 프로필 CSS .spread-underline { color: #2e3248; display: inline-block; padding: 15px 0; position: relative; text-decoration: none; } .spread-underline::after { background: none repeat scroll 0 0 transparent; background: #2e3248; bottom: 0; .. 2021. 11. 5. JavaScript - Break문 vs Continue문 break문 - 이제 더 이상 반복없이, for문이나 while문 바로 나간다. - 반복문을 쿨하게 나가버린다. let sum = 0; for(const num=1; num 2021. 10. 14. CSS - 테두리가 있는 툴팁(말풍선) 만들기 요즘 새발자는 CSS 를 열심히 연마하고 있다. 오늘은 테두리가 있는 툴팁을 만들어 볼 것이다. 테두리가 없는 툴팁은 비교적 만들기 쉬운 편인데, 테두리가 있는 툴팁은 조금 까다로웠다. 그래서 잊지 않도록 기록을 남겨본다. CSS - 테두리가 있는 툴팁(말풍선) 만들기 결과화면 미리보기 하늘색 바탕에 파란색 테두리가 있는 툴팁이 완성되었다. HTML 새발자는 오늘도 뚠뚠.. 모두들 화이팅입니다. CSS before 로 삼각형을 after 로 삼각형의 테두리를 만들어주었다. .task-tooltip { background-color: #eef3fd; border: #7689fd solid 1px; border-radius: 5px; color: #505bf0; font-size: 12px; font-wei.. 2021. 10. 1. CSS - 툴팁 삼각형 화살표 만들기 CSS 로 툴팁을 만들어보자. 여태까지 툴팁을 두어번정도 만들어봤다. 텍스트가 들어가는 말풍선 부분을 만들기는 쉬운데, 삼각형 화살표를 만들기가 조금 까다롭다. 그래서 기록해본다. (미래의 나는 여전히 해멜 것을 알기에... ) 결과화면 미리보기 아래처럼 배경색이 들어간 툴팁을 만들어 보자. JavaScript - CSS 툴팁 삼각형 화살표 만들기 HTML ! 툴팁입니다 ! CSS 가상요소인 after 속성을 이용해 삼각형 부분을 표현하였다 .tooltip {// 몸통 부분 background-color: #7689fd; border-radius: 6px; color: #fff; font-size: 12px; font-weight: 500; height: 31px; letter-spacing: -0.25.. 2021. 9. 30. CSS - input 체크박스 테두리 스타일 변경하기 요즘 새발자는 UI 를 열심히 하고 있다. (쑥쑥 무럭무럭자라라) input 의 기본 체크박스 안의 테두리 스타일을 변경하는 미션을 맡아 그 기록을 남겨보았다. (미래의 나는 여전히 해멜 것을 알기에... ) 자 그럼 시작해보자 ! 결과화면 미리보기 일단 구현된 결과물이다. 기본 체크박스는 테두리가 회색으로 되어있다. 하지만 나는 테두리가 없는 깔끔한 디자인을 구현하였다. JavaScript - CSS input 체크박스 테두리 스타일 변경하기 현실은 css 에서 바로 변경이 안된다. 😭 after 속성을 사용하여 현실에서는 적용이 안되는 가상의 스타일을 지정해주자. HTML CSS ** 참고로 IE 는 appearance 속성이 안먹었던 기억이 가물가물하게 나니, 혹시 IE 구버전 대응을 해야한다면 참.. 2021. 9. 29. JavaScript - split()으로 문자열 자르기 (파일명에서 확장자만 따로 분리하기) 파일 전송시, 썸네일(미리보기)와 파일명을 함께 보여주는 기능을 구현 중이다. 이미지 파일이 아닐 때, 썸네일에 파일확장자만 보여주려고 한다. 결과화면 미리보기 이렇게 파일확장자가 썸네일(미리보기)부분에 나온다. 그럼 시작해보자! JavaScript - split으로 문자열 자르기 (파일명에서 확장자만 따로 분리하기) 기본 아이디어는 이렇다 ! - split() 함수로 파일 이름을 ' . '(쩜) 을 기준으로 양옆으로 분리한다. ex) 새발.jpg 라고 하면 ' 새발 ' 과 ' jpg ' 로 분리된다. - ' . ' (쩜) 뒤의 확장자만 문자 배열로 따로 빼내버리는 것이다! ex) saebal[1] 을 호출하면 ' jpg ' 가 호출된다. split() 간단 원리 설명 아래 문자열을 잘라보자. 문자열에 .. 2021. 9. 28. 이전 1 ··· 5 6 7 8 9 10 다음 반응형
