⚠ _이 블로거는 퇴근 후 극심한 피로감 + 강렬한 휴식 욕구로 인해 일주일 이상 포스팅이 없을 수 있습니다. 하지만 항상 좋은 내용을 담고자 합니다_🙇🏼


1. <a>태그에 margin 주는 법

  • 아래표는 태그별 display를 보여준다.

|display|태그 종류|특징|
|---|---|---|
|block|div, p, h, li 등| - 가로 영역을 모두 채움
- block 요소 다음에는 줄바꿈이 됨.
- width, height 속성을 지정 가능|
|inline|span, b, i, a 등| - 줄 바꿈이 되지 않음
- width와 height를 지정 못함. |

  • a 태그는 display: inline이므로 기본적으로 여백을 줄 수 없다.
  • 하지만, a태그에 display: inline-block를 하면 여백(margin)을 줄 수 있다!

2. 페이지 나가기 전 이벤트 처리는?

  • html의 생명주기에는 아래와 깉이 3가지 이벤트가 발생한다.

|이벤트명|설명|
|:---|---|
|DOMContentLoaded| - DOM이 준비된 후
- DOM 노드를 찾아 핸들러를 등록
- 인터페이스를 초기화할 때 발생|
|load|- 외부 자원이 로드된 후
- 스타일이 적용된 상태 |
|beforeunload| - 사용자가 사이트를 떠나기 전|
|unload|- 사용자가 떠나기 전에 발생
-사용자 분석 정보를 담은 통계자료를 전송할 때 이 시점을 사용 |


만약 여러분이, 페이지를 떠나기전 (페이지 끄기, 다른 페이지로 이동), 어떤 행동을 하고 싶다면 beforeunload를 사용하면 적합하다!


3. 내 css가 항상 먼저여야 해, !important

  • css에서는 동일한 속성을 여러번 설정하면 그 중 나중에 설정한 값이 적용된다.

하지만, 예외적으로 나중에 설정한 값이 적용되지 않아야 한다면? 아래 예시 코드를 보자

  • 코드를 보면, 제일 마지막에 설정한 컬러가 적용되는 걸 볼 수 있다.

!codepen[kumjungmin/embed/gOgwbxx?height=265&theme-id=dark&default-tab=css,result]


하지만 속성값에 !important를 추가하면, 먼저 작성한 속성이 적용된다!

!codepen[kumjungmin/embed/oNBzgoL?height=265&theme-id=dark&default-tab=css,result]


4. keyCode 사용하지 마세요

  • 어느날 키코드를 사용한 이벤트 처리를 하고 있었다.
  • 항상 그랬듯이 event.keyCode값을 불러와 사용하고자 했다.
  • 그런데....! 아래와 같은 문구가 뜨는 게 아닌가?


그렇다면 우리는 keyCode 대신 무엇을 써서 키값을 가져올 수 있을까?

  • event.key사용하거나,event.code 사용하는 방법이 있다.

||event.key|event.code|
|---|---|---|
|특성|- 논리적 의미를 반환
- 한글로 이라고 치면 이 출력|-물리적 키를 반환
- 이라고 치면 그 키의 본래 이름인 keyA이 출력 |
|OS|- Chrome 48+, Opera 35+, Firefox 44+|- Firefox 44+, Chrome 51+, Opera 38+|

  • 만약 사용자가 지우기, 1, 을 입력하면, 이벤트 별로 아래와 같이 출력된다.

  • 키 이벤트를 더 알고 싶다면, 아래 데모의 입력칸에 키를 눌러서 확인할 수 있다 :)

!codepen[kumjungmin/embed/WNRGbWL?height=459&theme-id=dark&default-tab=html,result]



출처
아래 사이트에 가면 더 자세히 알 수 있어요!

profile
⚠ 이 블로거는 퇴근 후 극심한 피로감 + 강렬한 휴식 욕구로 인해 일주일 이상 포스팅이 없을 수 있습니다. 하지만 항상 좋은 내용을 담고자 합니다🙇🏼

0개의 댓글