[TIL] Day 3 : this vs event.target

1.    this    와     event.target   의   차이

예를 들어, 아래와 같은 경우 (참고로 target element의 class에 링크를 저장해놨다.)

$(document).on("click", "#member-github-icon", (event) => {
  window.location.href = event.target.className;
});

this 를 사용해봤는데 오류가 생겼다.

$(document).on("click", "#member-github-icon", () => {
  window.location.href = this.className;
});

jquery를 사용해서 아래처럼 해봤는데 그것도 오류가 생긴다.

$(document).on("click", "#member-github-icon", () => {
  window.location.href = $(this).attr("class");
});

이유는 모르겠다.

2.    hover

특정 element에 마우스 오버를 하면 생기는 효과를 넣는 css 방법이다.
예를들어, class="mytitle" 인 element가 있다고 해보자.
그러면 그 element한테 마우스 오버가 되기 전 효과는

.mytitle {

	마우스 오버 전 css 효과
    
 }

마우스 오버가 되었을 때 효과는

.mytitle:hover {

	마우스 오버 후 css 효과
    
 }

이런 식으로 사용한다.

이걸 사용하면 재미난 연출을 할 수도 있는데,

.col-card {
  transition: all 0.2s linear;
}

.col-card:hover {
  transform: scale(1.2);
}

이런 식으로 하면 마우스 오버 된 col-card 가 1.2배 커진다.
그 transition이 되는 빠르기는 0.2초로 linear하게(일정한 속도로) 커지는 걸로 설정되었다.

3.   input의 placeholder 글씨 색상 설정

예를 들어, class="form-floating" 하위에 있는 input 즉,

<div class"form-floating">
	<input placeholder="여기에 입력하세요" />
</div>

의 placeholder 글씨 색상은 아래와 같이 설정한다.

.form-floating input::placeholder {
  	color: 색상;
}

4.   modal

class="modal" 을 사용하면 재밌는 걸 할 수 있다.
팝업창을 열지 않고 현재 페이지에서 modal을 class로 가진 element를 보여줄 수 있다.

이런 식으로 팝업창 비슷하게 생겼지만 팝업창은 아니다.
포토샵의 layer 같은 느낌으로 가장 위쪽에 그려지고 주변 background 색상을 어둡게 설정하는 것 뿐이다.

따라서 어떤 버튼을 클릭했을 때 팝업창 대신 modal을 사용하면 유용한 경우가 있다.

방식은 class="modal" 인 element를 .show() 와 .hide() 로 켜지고 꺼지게 하면 된다.

5.   textarea 에 입력된 내용이 페이지에 보여질 때 줄바꿈이 안되는 문제

textarea 입력창에 줄바꿈을 하면서 글을 썼다고 해보자.
그리고 그 내용이 longtext 라는 변수에 저장됐다고 해보자.
이때, longtext 안에는 줄바꿈이 포함되어 있다.
다만, 그게 \n 로 구분되어 있다.
때문에, html 에서 표시될 때 줄바꿈이 적용되기 위해서는 <br> 로 바꿔주어야 한다.

  let longtext_br = longtext.replace(/\n/g, "<br>");