본문 바로가기
반응형

분류 전체보기203

[ESP8266.001] 사물인터넷이란? 사물인터넷(IoT, Internet of Things)은 각종 사물에 센서와 통신 기능을 내장하여 무선 통신을 통해 각종 사물을 연결하는 기술을 말합니다. 여기서 사물이란 가전제품, 모바일 장비, 웨어러블 디바이스 등 다양한 임베디드 시스템이 됩니다. 정보 기술 연구 및 자문회사 가트너에 따르면 2009년까지 사물인터넷 기술을 사용하는 사물의 개수는 9억여개였으나 2020년까지 이 수가 260억 개에 이를 것으로 예상됩니다. 이와 같이 많은 사물이 연결되면 인터넷을 통해 방대한 데이터가 모이게 되는데, 이렇게 모인 데이터는 기존 기술로 분석하기 힘들 정도로 방대해집니다. 이것을 빅 데이터(Big Data)라고 부릅니다. 따라서 빅 데이터를 분석하는 효율적인 알고리즘을 개발하는 기술의 필요성이 사물인터넷의.. 2022. 3. 12.
[CSS.019] Flex로 메뉴바 만들기 *[풀코드] See the Pen menuBar_by_Felx by wootekken (@wootekken) on CodePen. [1] HTML로 메뉴 글자를 작성합니다. 그리고 CSS로 아래와 같이 기본 여백을 0, 색깔을 입혀줍니다. [2] 메뉴의 글자를 꾸미고 정렬을 해줍니다. [3] 메뉴에 display: flex를 정교하여 가로로 놓이게 해주고 마우스를 메뉴에 얹였을 때 flex-grow로 크기 변화가 나타나게 해줍니다. 2022. 3. 12.
[스크래치아두이노.001] 버튼으로 LED 켜기 [1] 스위치 설정 [2] 회로도 [퀴즈] - 빨간 LED는 몇 번에 연결되어 있나요? - 노란 LED는 몇 번에 연결되어 있나요? - 초록 LED는 몇 번에 연결되어 있나요? - 버튼은 몇 번에 연결되어 있나요? [3] 센서확장 불러오기 [4] 코딩실습 (예제1) D2 버튼을 누르면 D9 초록색 LED가 켜져요. (유제1) 아래 그림과 같이 D2 버튼을 누르면 초록색(D9), 노란색(D10), 빨간색(D11) LED가 모두 켜지고, 버튼을 떼면 모두 꺼지게 코딩을 해보세요. 유제1 정답은 아래 "더보기" 클릭 더보기 유제1 정답 (예제2) D3 버튼을 누르면 D9 초록색 LED가 꺼져요. (유제3) 아래 그림과 같이 D3 버튼을 누르면 초록색(D9), 노란색(D10), 빨간색(D11) LED가 모두 꺼.. 2022. 3. 10.
[CSS.018] Flex로 정렬하기 dd [1] Flex 레이아웃의 구조 Flex 레리아웃의 기분 구조는 위 그림과 같습니다. 부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 하고, 자식 요소인 div.item을 Flex Item(플렉스 아이템)이라고 합니다. 컨테이너에서 1차적으로 Flex 레이아웃 설정을 하고, 2차적으로 아이템들을 배치하면 됩니다. [2] 플렉스 컨테이너 ㅇㅇ [코드 1] [코드1-실행결과] ㅇ [코드2] display: flex 아래그림의 빨간네모 친 부분처럼, 코드1에서 display:flex를 추가해 줍니다. [코드2-실행결과] display:flex를 적용하면 플렉스 아이템들은 가로방향으로 배치됩니다. 그리고 아이템 각자는 자신의 width(가로길이)만큼만 차지하게 됩니다.. 2022. 3. 8.
[깃허브.004] 웹 사이트 무료배포 HTML/CSS/JS 로 만든 Single 웹 페이지를 무료로 온라인에 업로드해서 다른사람들이 볼 수 있도록 배포하면 얼마나 좋을까요? 깃허브에서는 이것이 가능합니다. 웹 개발의 마지막 단계인 배포(deploy)를 깃허브에서 하는 방법은 다음과 같습니다. [1] Github Pages 설정을 이용해서 나의 서버연동 없이 무료로 웹 사이트를 배포할 수 있습니다. 준비과정은, 아래와 같이 최상단 경로에 index.html 파일이 존재하게끔 깃허브에 웹 파일을 업로드 합니다. [2] 파일 준비가 되었다면, 아래 그림의 1~4 순서대로 눌러 줍니다. [3] Save 버튼까지 눌렀으면, 조금만 기다려 주세요. 그러면 아래 그림과 같이 페이지를 새로고침 했을 때, Environments라는 메뉴가 생깁니다. 이거를.. 2022. 3. 3.
[CSS.016] FloxBox로 정렬해보기 [1] Flex 레이아웃의 구조 Flex 레이아웃의 기본 구조는 위 그림과 같습니다. 부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 하고, 자식 요소인 div.item을 Flex Item(플렉스 아이템)이라고 합니다. 컨테이너에서 1차적으로 Flex 레이아웃 설정을 하고, 2차적으로 아이템들을 배치하면 됩니다. [2] 플렉스 컨테이너 [코드 1] [코드1-실행결과] [코드2] display: flex 아래그림의 빨간네모 친 부분처럼, 코드1에서 display:flex를 추가해 줍니다. [코드2-실행결과] display:flex를 적용하면 플렉스 아이템들은 가로방향으로 배치됩니다. 그리고 아이템 각자는 자신의 width(가로길이)만큼만 차지하게 됩니다. height.. 2022. 3. 1.
[HTML.006] vscode 편리한 패키지 추천 VSCODE(Visual Studio Code)에 웹 프로그래밍을 할 때 편리한 패키지를 추천해 드립니다. [1] Auto Rename Tag HTML 태그 수정시 "시작태그"를 수정하면 "닫는태그"까지 자동으로 수정되는 패키지 입니다. 사용법 [설치방법] vscode 패키지 검색창에서 "Auto Rename Tag"를 검색하고 Install 버튼을 눌러 설치하면 됩니다. [2] CSS peek HTML의 태그를 Ctrl+클릭시 해당 CSS 부분으로 화면이 자동으로 옮겨가는 패키지 입니다. 사용법 [설치방법] vscode 패키지 검색창에서 "CSS peek"을 검색하고 Install 버튼을 눌러 설치하면 됩니다. [3] Live Server vscode에서 코딩 후 저장만 하면 웹 브라우저에서 자동으로 .. 2022. 3. 1.
[깃허브.003] 내 코드 깃허브에 올리기 * 먼저 알아야할 개념 이 실습을 하기전에 위 그림의 원격 저장소, 로컬 저장소의 개념을 먼저 알아야 합니다. -원격 저장소:: 깃허브 온라인 사이트의 파일 저장소-로컬 저장소: 내 컴퓨터 속의 오프라인 저장소 * 아래 실습은 "[깃허브.002] 깃허브 데스크탑용 프로그램설치/저장소 연결" 실습을 완료한 후 이어지는 실습입니다. [1] 깃허브의 원격 저장소와 깃허브 데스크탑 프로그램이 연결된 상태에서 아래 그림과 같이 데스크탑 프로그램의 화면에 보면, (1) 저장소의 이름(myfirstTest)을 확인할수 있고, (2) show in Explorer를 클릭하면 내 컴퓨터에 저장된 코드의 폴더(로컬 저장소)로 이동하게 됩니다. [2] Show in Explorer 버튼을 눌렀을 때 나타나는 폴더(로컬 저장.. 2022. 2. 28.
[깃허브.002]데스크탑 깃허브 설치/저장소 연결법 [1] github.com 에 접속하여 회원가입합니다. [2] 오른쪽 상단의 내 계정을 클릭하여 나타나는 메뉴 중, Your repositories를 클릭합니다. 여기에서 repository는 깃허브의 저장소를 말합니다. [3] 새로운 repository를 만들기 위해 나타나는 화면에서 New(초록색 버튼)를 클릭합니다. [4] Repository name에 아무 이름을 적습니다.(나의 코드가 저장될 장소의 주소로 사용되는 이름입니다.) 그리고 Public, Create repository 버튼을 누르면 repository가 생성됩니다. [5] 아래 화면의 빨간네모 부분처럼 주소가 생긴 화면이 나타나면 나만의 저장소인 repository가 잘 만들어 진 것입니다. 지금은 저장된 내용이 없어서 아래와 같이.. 2022. 2. 28.
728x90
반응형

티스토리툴바