CSS 웹 폰트 적용 / 버블링과 캡처링

✨ Routinery 프로젝트를 하다가 폰트 바꾸려다가 text-animation에 대해서 알게 되었다.

 

react 에서 폰트 적용 방법

우선, css 파일을 하나 생성 해준다. 

나는 폰트를 다운 받지 않고 웹폰트를 사용하였다.

 

https://fonts.google.com/specimen/Nanum+Myeongjo?preview.text=Make%20your%20routine&preview.text_type=custom 

Google Fonts

이곳에 들어가보면

이렇게 링크를 사용하는 방법과 @import를 사용하는 방법이 있는데

나는 @import를 사용해보았다.

 

@import 코드를 복사해서 내가 만든 css 폴더에 붙여넣어주었다. 

 

그리고 그 아래에 

.name {

} 

이런식으로 지정해주고 name 객체 안에 요소들을 넣어주면 된다.

 

 

 

 

.line {
  padding: 1em; 
  font-family: 'Nanum Myeongjo', serif;
  margin: 0 auto; 
  font-size: 2em;
  text-align: center; 
  overflow: hidden;
  border-right: .05em solid black; 
  white-space: nowrap;
  animation: 
    typewriter 3.5s steps(40, end), 
    blinkTextCursor .75s step-end;
}

나는 이런식으로 해주었는데 font-family도 복붙해주면된다.

 

폰트를 좀 더 예쁘게하고 싶어서 크기라던가 정렬 등등 바꾸어보았다.

• padding : 텍스트 상자와 그 안에 텍스트 사이, 안쪽 여백을 설정할 수 있다.
  https://developer.mozilla.org/ko/docs/Web/CSS/padding

padding - CSS: Cascading Style Sheets | MDN

• margin : 바깥 여백 설정
  https://developer.mozilla.org/ko/docs/Web/CSS/margin

margin - CSS: Cascading Style Sheets | MDN

• text-align: center;  => 텍스트 가운데 정렬
• overflow: hidden; => 텍스트 블록에 맞게 텍스트 자름
  https://developer.mozilla.org/ko/docs/Web/CSS/overflow

overflow - CSS: Cascading Style Sheets | MDN

• white-space: nowrap; => 공백 문자 처리
  https://developer.mozilla.org/ko/docs/Web/CSS/white-space

white-space - CSS: Cascading Style Sheets | MDN

이제 이 css 파일을 폰트 변경을 원하는 컴포넌트에 import 해준다.

내가 작성한 코드에서 폰트 변경을 원하는 부분이 

<div>

  Make your routine

</div>

이 부분이었는데, .line이라고 이름을 지정해둔것을 className에 넣어서 (?) 사용하면 된다.

<div className='line'>

    Make your routine

</div>

이렇게하면 폰트 변경~~

 

 

버블링 & 캡처링

🫧 버블링(bubbling)이란?

 : 한 요소에 이벤트가 발생하면 이 요소에 할당된 이벤트가 동작하고 부모 요소의 핸들러가 동작하고 점점 타고 올라가서 최상단의 조상 요소를 만날때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다.

 

🫧 이런 흐름을 이벤트 버블링이라고 한다. 이벤트가 제일 깊은 곳에 있는 요소에서부터 시작해서 부모 요소를 거슬러 올라가는 현상이 거품같아서~

 

🫧 버블링 중단 방법 : 이벤트 객체 메서드인 event.stopPropagation()을 사용해주면 된다. 근데 핸들러가 여러개 사용중인 경우 위로 올라가는 핸들러는 중단되는데 다른 핸들러들이 동작하는건 멈출 수 없다. 

다른 핸들러들의 동작도 막으려면 event.stopImmediatePropagation()을 사용.

 

🫧 꼭 필요한 경우가 아니라면 버블링 중단을 안하는게 좋다. 버블링을 막아놓은 부분은 죽은 영역이라고 불리기 때문에 분석 코드를 사용했을때 제대로 분석이 안되는 경우가 생길 수 있기 때문이다.

 

📸 캡처링(capturing)이란?

 : 이벤트가 하위 요소로 전달되는 단계이다. 

 

📸 캡처링 단계는 흔히 사용되지 않는다. 

 

📸 on<event> 프로퍼티나 HTML 속성, addEventListener(event, handler)를 이용해 할당된 핸들러는 캡처링에 대해서 전혀 알수 없다. 그래서 캡처링 단계에서 이벤트를 잡아내려면 addEventListener의 capture옵션을 true로 설정해야한다.

capture 옵션은 두가지 값을 가진다. false인 경우 핸들러는 버블링 단계에서 동작. true인 경우 핸들러는 캡처링 단계에서 동작