javascript3 [React] 리액트에 Font Awesome 적용하기 프로젝트에 fontawesome 이 필요해서 하던 대로 html에 를 넣고 태그를 썼는데 전혀 놀랍도록 아무 일도 일어나지 않아 폰트 어썸 페이지로 가서 문서를 읽어보았다. React에는 i태그가 아니고 npm이나 yarn으로 따로 다운을 받아야 사용할 수 있었다. npm i --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-svg-icons npm install --save @fortawesome/react-fontawesome yarn add @fortawesome/fontawesome-svg-core yarn add @fortawesome/free-solid-svg-icons yarn add @for.. 2022. 1. 24. [JavaScript] 요소의 좌표 구하기 | offset, client, page, screen 프로젝트를 진행하다 보니 element의 좌표를 구해야 하는 경우가 있다. 경우에 따라 모니터기준, 페이지 기준, 보이는 화면 기준 등이 있다. 내가 이해한대로 대충 그림을 그린 것인데 그림에는 Y좌표 기준으로 써놨지만 왼쪽 세로선을 기준으로 X좌표도 구할 수 있다. 이 중에서 나는 offset을 제일 많이 필요로 하는데 밑그림처럼 정리해보았다. 나는 네비게이션에 offset자료가 필요해 처음에 오른쪽을 기준으로 offsetRight라는 코드를 입력했는데 알고 보니 offsetRight과 offsetBottom은 없다고 한다. 오른쪽을 구하고 싶으면 offsetLeft + offsetWidth 를 더해 사용하면 되고 아래를 구하고 싶다면 offsetTop + offsetHeight를 더해 사용하면 된다. 2022. 1. 22. 211011 필기내용 position fixed : fixed는 자신의 부모가 아닌 브라우저 기준 위치를 지정해주지 않으면 브라우저의 왼쪽 상단이 아니라서 일단 부모 쪽에 붙어있음 sticky : top: 0;를 같이 사용하면 처음엔 제자리에 있다가 top 0 자리에 오면 fixed처럼 변함 구형 브라우저는 실행 안됨 투명 상자와 민트색 상자 모두 같은 sticky 적용 relative : 기준만 잡아주거나 z-index를 위해 사용 absolute : relative가 기준이 됨 padding 적용 안됨 border는 적용됨 부모나 그 위에 부모에게도 relative가 없으면 브라우저 기준 글씨 옆 바 만들기 /* 가상요소: after 사용 */ .nav_list li:after, .nav_list li::after { c.. 2021. 10. 18. 이전 1 다음 반응형
