코딩 공부 코딩 공부

mouseout과 mouseleave 차이 공통점: 해당 영역에 마우스가 올라가 있는 상태에서 벗어난 것을 감지한다. mouseleave:사용자가 마우스를 해당 element 안에서 바깥으로 옮겼을 때 발생합니다. 버블링이 발생하지 않습니다. mouseout:사용자가 마우스를 해당 element 안에서 바깥으로 옮겼을 때 발생합니다. mouseout / mouseleave : 현재 element 영역만 발생 (자식 요소 포함X) 마우스가 이벤트로 on 메서드를 통해 사용할 수도 있다. 요소에 내부로 들어왔을 때 실행된다. 차이점: mouseleave 자식영역에 들어가도 요소를 빠져나갔다고 감지하지 않는다. mouseout 자식영역에 들어가면 요소를 빠져나갔다고 감지한다.

마우스오버 이벤트와 마우스엔터 이벤트의 차이점에 대해 알아봅니다. mouseover / mouseenter : element에 마우스를 올려둘 때 -> 현재 element 영역 및 element에 속한 자식 요소 포함 mouseover 와 mouseenter의 차이점은 이벤트 버블링에 있습니다. 다음의 소스뷰를 살펴보도록 합니다. css는 쓰다가.. 귀찮음을 이기지 못해 아래가 정리가 안 된 상태라 코드를 남기겠습니다. body { width: 500px; margin: 30px auto; } .outer { width: 200px; height: 200px; background: Orange; padding: 50px; margin: 10px; } .inner { width: 100%; height: ..

sort() 함수 Javascript에서 배열을 정렬하기 위해서는 sort() 함수를 사용합니다. arr.sort([compareFunction]) 파라미터 compareFunction 정렬 순서를 정의하는 함수. 이 값이 생략되면, 배열의 element들은 문자열로 취급되어, 유니코드 값 순서대로 정렬됩니다. 이 함수는 두 개의 배열 element를 파라미터로 입력 받습니다. 이 함수가 a, b 두개의 element를 파라미터로 입력받을 경우, 이 함수가 리턴하는 값이 0보다 작을 경우, a가 b보다 앞에 오도록 정렬하고, 이 함수가 리턴하는 값이 0보다 클 경우, b가 a보다 앞에 오도록 정렬합니다. 만약 0을 리턴하면, a와 b의 순서를 변경하지 않습니다. 리턴값 compareFunction 규칙에..

splice() 자바스크립트의 배열(Array) 객체에서 함수인 splice를 이용하면 원하는 위치에 요소를 추가하거나 삭제할 수 있습니다. 먼저 splice 함수를 사용해 원하는 위치에 요소를 추가하는 것을 정리해보겠습니다. 예를 들어, 먼저 a라는 배열 객체가 다음과 같은 상태라고 하겠습니다. 이 상태에서 다음 코드를 실행하면 다음의 상태가 됩니다. a.splice(2, 0, "7"); 그럼 다시 a의 처음 상태로 돌아가 다음 코드를 실행하면 다음의 상태가 됩니다. a.splice(0, 0, "7"); 이제 다시 a의 처음 상태로 돌아가 다음 코드를 실행하면 다음의 상태가 됩니다. a.splice(5, 0, "7"); 참고로 위의 코드에서 인덱스 5 대신 5이상의 값을 사용해도 결과는 동일합니다. 이..

css를 작성하면서 내가 원하는 컨텐츠가 다른 컨텐츠 뒤에 가려져서 난감한 경우가 종종 있다. 그런 경우를 해결하기 위해 사용하는 속성이 바로 z-index라는 속성이다. z-index의 기본값은 auto 이고 보통 1, 9, 100, -1, -100등의 숫자로 그 속성의 값을 지정한다. 1. z-index 특징 (position값과의 연관성) z-index의 가장 중요한 특징 중 하나는 아무 요소나 다 z-index를 넣는다고 해서 우선순위를 넣을 수 는 없다는 점이다. z-index 속성이 적용되기 위해서는 z-index를 적용한 영역이 position:static 값이 아니어야 한다. BOX1 BOX2 분명 .box1 영역이 z-index:10 으로 설정해놓았기 때문에 더 위쪽에 위치해야할 것 같지..

쉬운 중앙 정렬 1. position, transform 사용 position: absolute;는 부모 엘리먼트의 위치를 기준으로 절대적인 위치 값을 설정할 수 있습니다.left와 top을 50%로 설정해 중앙에 정렬하게 합니다. 만약 이렇게만 설정하게 되면 대상 엘리먼트의 좌측 상단이 중앙에 오게 됩니다. 정중앙에 오는 게 목적이기 때문에 transform: translate(-50%, -50%);를 해서 맞춰주게 됩니다. transform은 대상의 형태를 변형하는 명령이며, translate는 위치를 조정하는 데 사용됩니다. tranlate의 첫 번째 값과 두 번째 값은 각각 x축, y 축입니다. 여기서 -50%라는 값은 대상 엘리먼트(h1)의 크기의 절반만큼을 빼서(-) 이동하라는 의미입니다. 2..

css에서 이미지를 중앙에 맞출때 방법들을 정리해보려고 한다! display / margin 속성으로 CSS에서 이미지 중앙에 배치 display 및 margin CSS 속성을 함께 사용하여 이미지를 중앙에 배치할 수 있습니다. 이미지의 display 속성은 처음에 inline입니다. 따라서 한 줄에 여러 이미지를 추가할 수 있습니다. 예를 들어, 다음 코드를 작성하면 두 개의 이미지를 연속으로 볼 수 있습니다. 따라서 한 줄에 하나의 이미지만 배치되도록 이미지의 display 속성을 block으로 변경해야 합니다. 그런 다음 0px auto의 margin 이미지를 중앙에 배치할 수 있습니다. 이미지는 상단과 하단에서 0px 여백을 갖습니다. 첫 번째 값은 임의의 숫자일 수 있지만 두 번째 값은 auto..

가상 요소와 가상 클래스 CSS 가상 요소는 선택자로 선택한 요소의 뒤에 붙여 표기하는 미리 약속된 키워드를 말합니다. 요소의 특정한 부분에 정해진 기능을 하도록 가상 요소 키워드 별로 미리 기능이 정의되어 있으며, 요소에 CSS 속성을 적용하는 것과 같은 방법으로 다양한 CSS 속성을 적용할 수 있기 때문에 마치 하나의 하위 요소처럼 사용할 수 있어서 가상 요소(Pseudo-Element)라고 합니다. 가상 요소 키워드 중에는 HTML 태그로 표현하기 어려운 콘텐츠의 특정 부분만 동적으로 선택하거나, HTML 콘텐츠 내용을 변경하지 않고도 선택한 요소의 앞 뒤에 새 콘텐츠를 추가하는 기능을 하는 키워드도 있습니다. 요소를 꾸미는 다양한 기능들을 제공하기 때문에 잘 사용하면 CSS만으로도 미려하고 고급스..