효니 TIL

태그는 해당 문서에 대한 정보를 검색 엔진에 제공하는 요소입니다. 요소는 언제나 요소 내부에 위치해야 합니다. 만약 name 속성이나 http-equiv 속성이 명시되었다면 반드시 content 속성도 함께 명시되어야 하며, 반대로 두 속성이 명시되지 않았다면 content 속성 또한 명시될 수 없습니다. HTML5에서는 요소를 통해 웹 페이지에서 사용자가 볼 수 있는 영역인 뷰포트(viewport)를 제어할 수 있도록 name 속성에 viewport 속성값을 제공하고 있습니다. http-equiv="항목명"웹 브라우저가 서버에 명령을 내리는 속성으로name 속성을 대신해 사용할 수 있으며HTML 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때에만 의미를 가집니다. content=..

마우스 클릭 좌표 (clientX, offsetX, pageX, screenX의 차이점 알아보기)1. screenX, screenY2. pageX, pageY3. clientX, clientY4. offsetX, offsetY 1. screenX, screenY사용자 모니터 화면을 기준으로 좌표를 표시합니다.screenX: 사용자 모니터 화면의 왼쪽 상단 모서리 지점을 0으로 측정하여 x좌표 위치를 반환합니다.screenY: 사용자 모니터 화면의 왼쪽 상단 모서리 지점을 0으로 측정하여Y좌표 위치를 반환합니다. 2. pageX, pageY전체 문서를 기준으로 좌표를 표시합니다.스크롤바가 움직이게 되면 특정 지점의 pageY 좌표값도 변경 됩니다. 3. clientX,clientY사용자에게 보여지는 브..

해당 포스팅은 유튜브에 업로드된 '맛있는 코딩'님의 강좌를 들으며 공부한 내용들입니다. 👉 맛있는 코딩 강좌 바로가기 Lerp는 Linear interpolation의 약자로서 선형 보간법을 뜻합니다. Lerp는 많은 곳에서 사용되고 있습니다. 가장 대표적으로는 애니메이션 효과를 만들때 주로 사용이 되는데요 예를 들어 웹에서 부드러운 스크롤 효과를 구현하거나 마우스를 따라다니는 커서를 부드럽게 따라오도록 할 때, 2d나 3d에서 캐릭터의 방향전환을 부드럽게 만들고 싶을 때 등등 부드럽게, 자연스럽게 애니메이션 효과를 구현하기 위해 이 Lerp를 많이 사용하고 있습니다. Lerp의 원리 알아보기 만약 마우스를 따라다니는 공을 만든다고 가정했을 때 다음처럼 마우스를 왼쪽에서 오른쪽으로 움직이면 일반적인 방식..

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 ..