반응형 Web8 2. 리액트(React) favicon, Navbar 추가하기(boot-strap 설치, 적용) 1. 코드 정리하기 2022.01.21 - [Web/React] - 1. 리액트(React) 프론트엔드 시작하기 이전 글에 이어서 리액트에 Navbar를 적용하는 방법을 정리 초반에 자동으로 만들어진 react프로젝트는 불필요 없는 부분이 많기 때문에 필요한 부분만 남기고 다 지운다 src폴더에서 App.js, index.js만 남기고 다 지운다 - index.js 메인 프로그램인 index.js ReactDOM.render를 통해 App컴포넌트를 랜더링 한다 - App.js App.js에 와서 출력하고 싶은 JSX코드를 작성한다 결과 h태그로 작성한 Hello React!가 잘 출력된다 - index.html 이번에는 public 폴더에 들어가 있는 index.html 코드를 수정하여 브라우저 파비콘이.. 2022. 3. 21. React에 Bulma CSS 적용하기 1. Terminal 창에서 bulma CSS설치 npm install bulma 2. CSS 적용 index.js에서 import한다 import 'bulma/css/bulma.css'; Footer을 추가해본다 Web by 도톨이표코딩. The source code is licensed MIT. The website content is licensed CC BY NC SA 4.0. [결과] 2022. 3. 11. 1. 리액트(React) 프론트엔드 시작하기 - 준비물: Visual Studio Code, node.js Visual Studio Code 설치하기 2022.01.19 - [기타 프로그램] - Visual Studio Code 설치하기 node.js 설치하기 2021.07.05 - [기타 프로그램] - 윈도우10에서 Node.js&npm설치하기 1. Visual Studio Code를 실행한다. [File] - [Open Folder...] - 새폴더를 만들고 폴더 선택해서 연다 2. View - Terminal npm init react-app . 터미널 창을 열어서 프로젝트를 생성한다: npm init react-app . app뒤에있는 .은 현재 디렉토리에서 프로젝트를 만드는 것이고 경로로 사용하려면 npm init react-app 사용 .. 2022. 1. 21. [jQuery] 브라우저 창 크기 조절에 따른 이벤트 반응형 웹을 개발하다 보면 브라우저 창 크기에 따라 이벤트를 발생해야 할 때가 있다 제이쿼리를 이용하여 이벤트 발생하는 코딩을 작성한다 예) 브라우저 크기가 768px을 넘어갈 때 브라우저에 있는 버튼을 숨김 처리한다 [Html] 버튼 html을 실행하면 아래와 같은 버튼이 보인다 HTML 삽입 미리보기할 수 없는 소스 ↑↑↑ 창 조절을 해보면 큰 창에서만 버튼이 보인다↑↑↑ [jQurey 코드] $(document).ready(function() { $(window).on('resize',function (){ // 브라우저 width값을 가져오기 var width_size = window.outerWidth; // 브라우저 width 크기가 768px 이하이면 버튼 숨기기 if (width_size 2022. 1. 18. JavaScript, jQuery 버튼 비활성화 하기 disable속성을 이용하여 버튼을 비활성화 할 수 있다 버튼 id가 click_funtion인 버튼을 비활성화하려면 jQuery는. attr() 메서드를 사용하여 disabled를 true로 $("#click_function").attr("disabled",true); 활성화하려면 false $("#click_function").attr("disabled",false); JavaScrpt var button_click = document.getElementById('click_function'); button_click.disabled = true; - 버튼을 클릭하면 비활성화하는 코드(jQuery) $(document).ready(function() { $("#click_function").on("c.. 2021. 12. 27. 카카오(다음) 주소 검색 API 사용하기 다음 주소 찾기 API💒 https://postcode.map.daum.net/guide Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.net 다음에서 지원하는 우편번호 서비스를 사용하여 웹페이지에서 주소 찾기를 구현 위의 코드를 변형해서 검색 버튼을클릭했을 때 우편번호, 지번주소, 도로명 주소를 찾는 방법 검색 자바스크립트에 들어갈 함수 2021. 12. 17. [JavaScript+jQurey] form 태그 action, submit하기 1. 함수로 넘기는 방법 제출 위와 같은 폼이 있고 제출이라는 버튼을 누르면 goform()함수를 호출 submit()을 실행하면 컨트롤러에서 실행할 주소를 찾아서 값을 처리하거나 보여줄 수 있다 2. form태그에서 submit으로 실행하는 방법 제출 두 가지 방법 말고 더 다양한 방법이 있으니 응용해서 코드를 짜면 될것 같다 2021.12.02 - [기타 프로그램] - [JavaScript] 동적으로 테이블 열 합치기(rowspan) 예전에 짠 동적 테이블 합치는페이지 url을 넣으니 잘 이동하였다 2021. 12. 11. [JavaScript] 동적으로 테이블 열 합치기(rowspan) 정적 테이블은 태그에 rowspan = "합칠 열 개수"를 추가하면 된다 ex) 정적 테이블 1열 2행 합치는 코드 2021. 12. 2. 이전 1 다음 반응형
