Front-end/HTML3 <img/> 이미지의 사이즈 구하기 && 이미지 원본 사이즈 구하기 { const img = e.target; console.log("img 넓이" , img.width); console.log("img 높이" , img.height); console.log("img 원본 넓이" , img.naturalWidth); console.log("img 원본 높이" , img.naturalHeight); }} /> onLoad는 이미지가 로드된후 실행하는 함수이다. img.width를 찍어보면 이미지가 출력된 후의 조정된 사이즈(상의 div등에 의해) 가 출력된다 Intrinsic size (원본사이즈)가 알고싶다면, img.naturalWidth 로 알수있다. Rendered size => img.width Intrinsic size => img.naturalWidth 2022. 9. 6. 티스토리 코드 블럭 하이라이트, 라인 넘버, 폰트 설정하기 (2) - 라인 넘버, 폰트 설정 코드 블럭 하이라이트에 이어서 라인 넘버 설정 방법 이 코드를 하이라이트 설정했던 것 처럼 블로그 관리 > 스킨 편집 > HTML 탭에 들어가서 사이에 추가해주면 된다. 그리고 css 탭으로 이동해서 맨 아래에 이 코드를 붙여넣는다. /* Line Number CSS */ /* for block of numbers */ .hljs-ln-numbers { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: center; color: #B5B5B5; border-right: 1.. 2021. 11. 13. 티스토리 코드 블럭 하이라이트, 라인 넘버, 폰트 설정하기 (1) - 하이라이트 티스토리에 코드를 올리면서 코드가 좀 더 가독성이 좋게 보였으면해서 여러가지 방법을 찾아봤다. 가장 간단한 방법으로 티스토리 플러그인을 이용하는 방법이 있다. 블로그 관리에서 플러그인을 누르면 플러그인 목록이 뜬다. 그 중 코드 문법 강조 플러그인을 누르고 테마를 선택한뒤 적용을 누르면 끝이다. 하지만 플러그인의 강조가 밋밋한 감이 있기 때문에 조금 더 가독성을 높이려면 highlight.js를 사용하는 것을 추천한다. 사용 방법은 highlightjs.org/에 들어가서 Get Version을 누른다. highlight.js Version 10.3.2 Tiny tiny release, just to fix the website incorrectly not listing Javascript in the .. 2021. 11. 12. 이전 1 다음 728x90 반응형
