토람코

리액트로 개발한 웹 내에서 텍스트 클릭 시 클립보드에 복사되는 기능을 구현해보았다. 1. navigator.clipboard 사용 다음과 같이 navigator.clipboard 를 사용할 경우 웹에서 잘 작동한다. const handleCopyClipBoard = (text: string) => { try { navigator.clipboard.writeText(text); alert('클립보드에 복사되었습니다.'); } catch (error) { alert('클립보드 복사에 실패하였습니다.'); } }; return ( handleCopyClipBoard('토람은행 123-456-7890')}> 토람은행 123-456-7890 ); 위 내용을 실행시키면, button 태그에 의해 위와 같이 버튼이 ..

태그를 사용하여 특정 구역을 클릭했을 때 다른 페이지로 넘어가도록 onClick 이벤트를 구현했다. 웹에서는 아무 문제가 없어 보였는데 모바일에서 클릭(터치)하니 일시적으로 파란 하이라이트(그림자)가 생긴다. 위와 같이 원 모양을 클릭했을 때 파란 색으로 덮이는 현상. 이런 하이라이트 없이 클릭되도록 하기 위해서는 css에 다음 옵션을 추가해주면 된다. .Panel { -webkit-tap-highlight-color: transparent; } 참고로 hover 나 active 상태에 대한 css 가 적용된 경우 (.Panel:hover 또는 .Panel:active) hover/active 속성에 적용하는 것이 아닌, 해당되는 클래스 자체의 속성에 넣어주어야 함!

리액트 프로젝트 내부의 .js (javascript) 파일에 텍스트를 입력하면 기본적으로 (당연하게도) 좌측 정렬로 보여진다. 만약 정렬을 바꾸고 싶다면 .css 파일에서 해당 텍스트가 속한 클래스의 텍스트 속성을 설정해주어야 한다. TORAMKO 코딩하는 토람이 App.js 의 return 값에 위와 같이 'TextBox' 라는 클래스명으로 div 를 생성하여 그 안에 텍스트를 작성해두었다. .TextBox { text-align: center; font-size: 18px; line-height: 1.5; } 그리고 App.css 에서 위와 같이 TextBox 의 속성을 지정해주었다. text-align: center; 속성에 의해 텍스트가 가운데로 정렬된다. 텍스트 정렬은 요렇게 매우 간단하다. 그..

리액트 프로젝트를 새로 생성하여 웹사이트 개발을 시작하면 웹 화면 탭에 다음과 같이 나타난다. react 공식 아이콘과 'React App' 이라는 문구가 확인된다. 이 default 아이콘과 타이틀을 수정하고자 한다면 다음과 같이 진행하면 된다. 1. 아이콘 준비하기 1) 무료 아이콘 다운로드하기 https://icon-icons.com/ko/ 위 사이트에서 다양한 무료 아이콘을 다운받을 수 있다. 마음에 드는 아이콘을 찾고 다운로드를 받으면 되는데 이 때, 아래와 같이 'ICO' 를 선택하여 .ico 파일로 다운받는다. 2) 직접 아이콘 만들기 내가 가진 파일로(PNG, JPG, GIF) 아이콘을 생성할 수도 있다. https://www.favicon-generator.org/ 위 사이트에서 파일 선..