효니 TIL

position 속성의 기본값은 static이며 요소는 문서의 일반적인 흐름에 따라 배치됩니다. position: fixedfixed는 뷰포트 기준 즉 페이지 전체 영역 기준으로 배치되며 일반 문서 흐름에서 요소가 제거되고 페이지 레이아웃의 요소에 대한 공간이 생성되지 않습니다. 모든 페이지에서 동일한 위치에 배치됩니다. 페이지가 스크롤되더라도 배치해 놓은 위치에 유지됩니다. position: stickysticky는 사용자의 스크롤 위치를 기준으로 배치됩니다. sticky는 fixed와 달리 화면에서 공간을 차지하며,sticky를 선언한 요소의 부모 영역 안에서만 고정되어 스크롤에 따라 움직이게 됩니다. sticky를 선언한 부모 영역이 스크롤 영역을 벗어나면 sticky를 선언한 요소는 다시 일반적인..

해당 포스팅은 유튜브에 업로드된 '맛있는 코딩'님의 강좌를 들으며 공부한 내용들입니다. 👉 맛있는 코딩 강좌 바로가기 텍스트 스크롤 애니메이션 구현하기 1. 텍스트가 끊김 없이 무한으로 흐른다. 2. 스크롤하면 더 빨리 흐른다. 이 두 가지 문제 각각의 경우 모두 흐른다는 공통점이 있습니다. 이를 같이 해결하기 위해서 흐르게 만들어주는 let count = 0이라는 변수를 만들어 해결해 보겠습니다. 1. 텍스트가 끊김 없이 무한으로 흐른다. 다음과 같이 화면의 너비를 초과하는 element에 텍스트가 있습니다. 먼저 똑같은 텍스트를 뒤에 이어 붙여 길이를 2배로 만들어줍니다. 그리고 텍스트를 왼쪽으로 흐르게 하는 속성은 css의 transform: translateX라는 속성으로 변경시켜 줄 건데 이때 ..

[JavaScript] svg path 스크롤 애니메이션(1) - stroke-dasharray, stroke-dashoffset 해당 포스팅은 유튜브에 업로드된 '맛있는 코딩'님의 강좌를 들으며 공부한 내용들입니다. 👉 맛있는 코딩 강좌 바로가기 path 그리는 방법 구글 사진 검색에서 다음과 같이 ex) one path drawing 검색하면 다양한 이미지가 나온다. 그중 마음에 드는 이미지를 일러스트로 불러온다. 이미지 배경에 opacity를 넣어준 다음 새 레이어를 만들어서 path툴로 끊기지 않게 하나의 라인으로 똑같이 그려주고 svg파일로 저장한다. 기본적인 레이아웃 .header { padding-top: 110px; background-color: #000; box-sizing: borde..

해당 포스팅은 유튜브에 업로드된 '맛있는 코딩'님의 강좌를 들으며 공부한 내용들입니다. 👉 맛있는 코딩 강좌 바로가기 stroke-dasharray 모양의 윤곽을 칠하는 데 사용되는 대시 및 간격의 패턴을 정의하는 표시 속성. stroke-dasharray CSS 속성으로 사용할 수 있습니다. stroke-dasharray는 엘리먼트를 dash형태로 바꿔주는 역할을 합니다. 홀수번째 인자는 대쉬의 길이, 짝수번째 인자는 공백의 길이를 나타내는데 위 그림과 같이 길이가 1000인 엘리먼트가 있을 때 stroke-dasharray가 100 100이면 첫 번째 100은 dash의 길이, 두 번째 100은 공백의 길이가 되어 1000이 될 때까지 이 두 인자가 반복되며 채워집니다. 그리고 하나의 인자 1000만..

빈 배열 만들기 // 원하는 배열의 길이 입력. 어떤값으로 채울지 입력 Array(9); // (9) [empty × 9] Array(9).fill(); // (9) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined] Array(9).fill(0); // (9) [0, 0, 0, 0, 0, 0, 0, 0, 0] Array(9) .fill(0) .map((el, idx) => { return idx + 1; }); // (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

1. if문 다음에 나오는 공통된 절차를 각 분기점 내부에 넣는다. 2. 분기점에서 짧은 절차부터 실행하게 if문을 작성한다. 3. 짧은 절차가 끝나면 return(함수 내부의 경우)이나 break(for문 내부의 경우)로 중단한다. 4. else를 제거한다(이때 중첩 하나가 제거된다). 5. 다음 중첩된 분기점이 나올 때 1~4의 과정을 반복한다. // 예시) function test() { let result = ""; if (a) { if (!b) { result = "c"; } } else { result = "a"; } result += "b"; return result; } if문 다음에 나오는 중복된 절차 찾아서 각각 if문 안쪽에 넣어준다. function test() { let resul..

버튼 클릭 시 페이지 이동하기 html내에 a태그의 링크를 사용하지 않고 페이지를 이동하는 방법을 알아보자. See the Pen 버튼 클릭시 페이지 이동하기 by hy0ni (@hy0ni) on CodePen. 위 예제에서 window.location.href = 'https://hyonilog.tistory.com/'; 버튼에 onclick 이벤트가 발생하면, myPage() 함수가 호출되고, 이 함수는 window.location.href 값을 새로운 페이지로 변경한다. window.location.href는 현재 페이지의 href(URL)를 반환한다. window.location.href 값을 설정하면 제공된 URL로 이동한다. 새창에서 열기 See the Pen 버튼 클릭시 새창에서 열기 by ..

마우스 오른쪽 버튼을 클릭하면 Context 메뉴가 나온다. 마우스 오른쪽 버튼 클릭 시, Context 메뉴가 뜨지 않도록 하는 방법을 알아보자. return false 하기 See the Pen 마우스 오른쪽 클릭 막기 by hy0ni (@hy0ni) on CodePen. - oncontextmenu 이벤트는 마우스 오른쪽을 클릭했을 때 발생한다. - oncontextmenu가 호출되었을 때 return false 하면, 마우스 오른쪽을 클릭해도 context 메뉴가 열리지 않는다. - oncontextmenu 속성은 모든 브라우저에서 지원되지만, contextmenu 속성은 현재 Firefox에서만 지원된다. preventDefault() 사용하기 See the Pen 마우스 오른쪽 클릭 막기 pr..

url 리다이렉트(Redirect), location.href 와 location.replace 차이점 라디오 버튼 클릭 시 페이지 이동하기 html파일 두개를 만들어 두고 라디오 버튼 클릭 시 이동하는 방법을 구현해 보았다. onClick = "window.location.href='링크'"; page1 page2 라디오 버튼 두 개를 만들어 두고 처음 선택되어 보일 부분은 checked 속성을 넣어준다. 페이지 이동 시 활성화되어 있는 페이지도 동일하게 적용해 주면 된다.

시계 구현해 보기 See the Pen Untitled by hy0ni (@hy0ni) on CodePen. 위 예제를 보면 Date 객체를 사용하여 호출했을 때의 시간이 0~9까지는 홀수로 보인다. 이 경우 1~9 앞에 0을 입력하여 두 자리 숫자로 표기 될 수 있도록 만들어 보았다. String.prototype.padStart() 메서드 사용하여 두자리 숫자 표시하기 padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워 주어진 길이에 만족하는 새로운 문자열을 반환한다. 채워 넣기는 대상 문자열의(좌측)부터 적용된다. padStart(string이 가져야 하는 길이, string의 앞쪽에 채울 string) "hello".padStart(20, "x"); // 'xxxxxxxxxxxx..