반응형 분류 전체보기203 [깃허브.001] 깃허브란?(What is github?) Git이란 소스코드를 효과적으로 관리하기 위해 개발된 '분산형 버전 관리 시스템'입니다. (원래는 Linux 소스코드를 관리할 목적으로 개발 되었습니다.) Git에서는 소스 코드가 변경된 이력을 쉽게 확인할 수 있고, 특정 시점에 저장된 버전과 비교하거나 특정 시점으로 되돌아갈 수도 있습니다. Git -로컬에서 관리되는 버전 관리 시스템 (VCS : Version Control System) -소스코드 수정에 따른 버전을 관리해주는 시스템 Github -클라우드 방식으로 관리되는 버전 관리 시스템(VCS) -자체 구축이 아닌 빌려쓰는 클라우드 개념 -오픈소스는 일정 부분 무료로 저장 가능, 아닐 경우 유료 사용 -다른 사람들과 협업할 경우, 오픈소스를 공유하고 다른 사람들의 의견을 듣고 싶은 경우 등은 .. 2022. 2. 28. [CSS-015] 레이아웃 배치(Float활용) [CSS-015] 레이아웃 배치(Float활용) HTML 화면 레이아웃을 배치할 때, CSS에서 Float 명령어를 이용하여 배치를 할 수 있습니다. 그 방법에 대해서 아래와 같이 소개합니다. [1] 레이아웃 1 See the Pen CSS-layout01 by wootekken (@wootekken) on CodePen. [2] 레이아웃 2 See the Pen CSS-layout02 by wootekken (@wootekken) on CodePen. [3] 레이아웃 3 See the Pen CSS-layout03 by wootekken (@wootekken) on CodePen. [퀴즈] 레이아웃 4 아래 그림과 같이 레이아웃을 만들어 보세요. (퀴즈 정답은 아래의 "더보기"에서 확인) 더보기 See.. 2022. 2. 25. [JS-018] 길이단위 변환기 JS 프로젝트 🚩 HTML/CSS/JS 로 길이단위 변환기 프로그램 만들기 [1] 미리보기 [2] 코드 See the Pen JS_Lotto by wootekken (@wootekken) on CodePen. *퀴즈 : 위의 코드에서 인치, 마일 등의 길이 단위를 더 추가해 보세요. 2022. 2. 24. [JS-017] Input 요소 입력값 연습문제 [1] 원 둘레와 넓이 계산 프로그램 원의 반지름 Input 창에 숫자값을 입력한 뒤, "계산" 버튼을 누르면 아래에 원둘레와 원넓이 값이 나타나는 프로그램입니다. HTML/CSS 부분을 따라 입력한 뒤, Javascript 부분은 스스로 코딩해 보세요. See the Pen JS_017_Input연습문제_1 by wootekken (@wootekken) on CodePen. [2] 피자 추가주문 자동 계산기 위 그림은 체크박스를 누르면 피자 가격에 추가 주문가격이 자동으로 더해지고 체크박스를 해제하면 합계에서 가격이 빠지는 프로그램입니다. 아래 코드에서 HTML/CSS를 따라 코딩한 뒤, Javascript 부분은 스스로 코딩해 보세요. See the Pen JS_017_Input연습문제_2 by wo.. 2022. 2. 18. [JS-016] Input 요소의 입력값 수정하기 [1] Input 요소의 값을 다른 Input 창에 복사하기 Input 요소의 값을 가져오거나 수정하기 위한 실습을 하기 위해 아래의 기본코드를 자신의 개발환경으로 복사하세요. See the Pen Untitled by wootekken (@wootekken) on CodePen. 위 코드는 기본적으로 HTML과 CSS로만 이루어진 주분/배송 정보 프로그램 입니다. 체크박스(◻)를 클릭하면 주문정보에 입력한 데이터를 복사해서 배송정보 입력칸으로 자동 복사되게끔 Javascript로 코딩해 보려고 합니다. 그러기 위해서는 다음과 같이 Input 요소의 id값을 이용하여 주문정보에 접근한 뒤 .value 를 이용하면 Input에 입력된 값을 가져올 수 있습니다. [2] 입력 글자의 개수 제한 설정하기 Inp.. 2022. 2. 18. [JS-015] 스톱워치 *이번 시간에는 HTML/CSS/JS를 이용하여 스톱워치를 만들어 보도록 하겠습니다. [1] HTML은 다음과 같이 코딩을 합니다. 코딩할 양이 적고 아주 쉽습니다. [2] 위의 HTML 코드를 실행한 결과는 다음과 같습니다. [3] 스톱워치를 작동시키기 위해서는 자바스크립트 코드를 작성해야 합니다. 다음과 같이 코딩해 주세요. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 let seconds = 0; // seconds let centiseconds = 0; // 1/100 seconds let spanSeconds =.. 2022. 2. 8. [JS-014] To Do List 프로젝트 [0] 부트스트랩에 접속합니다 -부트스트랩 링크: https://getbootstrap.com/docs/5.1/getting-started/introduction/ [1] 부트스트랩의 CSS 링크 복사하기 [2] HTML 파일의 안에 붙여넣기.(우리가 만든 CSS 링크 바로 위에) [3] 태그 안에 다음과 같이 코딩하기 [4] 부트스트랩의 왼쪽 메뉴중, Components > Input group > Button addons 중에 2번째 코드를 복사하기 [5] HTML의 태그 바로 아래에 붙여넣으세요. 그리고 아래 노란색 칠한 부분처럼 추가수정을 해주세요. [6] 실행해 보면 아래와 같이 나옵니다. [7] 다시 부트스트랩으로 가서 왼쪽 메뉴중에 Components > List group > Basic e.. 2022. 2. 4. [JS-013] 미니프로젝트(랜덤숫자 맞히기) See the Pen Untitled by wootekken (@wootekken) on CodePen. 2022. 1. 27. [책/아두이노통신.03] 책 실습 예제&정답 코드 [1] 아두이노 통신 프로젝트 책에서 각 챕터별로 다루는 모든 실습예제의 코드를 아래에서 다운 받으실 수 있습니다. [2] 확인문제 정답 코드는 아래에서 다운 받으실 수 있습니다. 2022. 1. 26. 이전 1 ··· 15 16 17 18 19 20 21 ··· 23 다음 728x90 반응형
