본문 바로가기
반응형

전체 글204

[아두이노중급.005] LCD/초음파센서/적외선센서/리모콘 테스트 [아두이노중급.005] LCD/초음파센서/적외선센서/리모콘 테스트 이번 시간에는 LCD, 초음파센서, 적외선 센서, 리모콘을 각각 사용해보고, 한꺼번에 합쳐서 응용 작품을 하나 만들어 보도록 하겠습니다. 먼저 각 부품(LCD, 센서 등)을 하나씩 테스트를 해보고 다음 번 글 [아두이노중금.006]에서 모든 부품을 합쳐서 작동시켜 보겠습니다. 다음 [1] LCD 실습부터 차근차근 시작해 보세요. [0] 회로도 아래 그림의 회로도와 같이 아두이노와 전자부품들을 연결해 주세요. [1] LCD 실습 🚩 LCD란? LCD는 Liquid Crystal Display(액정 디스플레이)의 앞글자를 따서 LCD라고 부릅니다. LCD는 컴퓨터, TV, 카메라, 태블릿, 휴대전화 등에서 많이 사용되는 화면 장치이다. 🚩 L.. 2022. 6. 6.
[CSS.023] 상위요소로 부터 상속받지 않는 태그와 속성들 [CSS.023] 상위요소로 부터 상속받지 않는 태그와 속성들 [1] button이나 input 태그는 상위 요소로부터 상속받지 않는다. 이런 태그들은 값을 상속 받게끔 inherit를 사용하면 된다. (예) button,input { color:inherit; font-family: inherit; } => color 는 상속받는 속성이지만, button, input 태그 자체가 상속을 안 받기 때문에 color도 상속이 안됨. [2] padding , border 등은 상속하지 않는 속성이므로 부모 요소에서 속성을 정의해서 자식 요소에 적용되지 않는다. 다음은 상속 안되는 속성들이다. width/height margin padding border box-sizing display background .. 2022. 6. 6.
[CSS.022] 마우스에 닿으면 글자 앞뒤에 나타나기 [CSS.022] 마우스에 닿으면 글자 앞뒤에 나타나기 [1] before, after 가상 선택자 before와 after는 요소(글, 이미지 등)의 바로 앞(before)과 뒤(after)에 글이나 이미지를 만들어 낼 수 있는 기능이 있습니다. 여기에서 중요한 점은 자식요소로서 생성되는 것이고, 실제 자식이라기 보다는 가상의 무언가를 만드는 것입니다. before, after 가상 선택자를 사용할 때는 반드시 content를 써야 합니다. [2] 실습 코드 See the Pen Untitled by wootekken (@wootekken) on CodePen. 2022. 6. 1.
[CSS.021] 레이아웃 배치 by Flex [CSS.021] 레이아웃 배치 by Flex [1] 레이아웃 배치 1 See the Pen Untitled by wootekken (@wootekken) on CodePen. [2] 레이아웃 배치 2 2022. 6. 1.
[HTML.009]시멘틱(Semantic)태그 [HTML.009]시멘틱(Semantic)태그 [1] 시멘틱(Semantic)태그란? Semantic: 의미의, 의미론적인 시멘틱 태그는 "의미 있는 태그"라는 뜻으로, 인터넷 검색엔진에 나의 웹 페이지가 잘 검색되고 해석될 수 있도록 HTML 코드를 작성할 때 사용하는 태그입니다. 즉, 시멘틱 태그로 HTML을 작성하게 되면 브라우저, 검색엔진, 개발자 모두에게 요소의 의미를 명확히 설명할 수 있게 됩니다. 인터넷에는 매일 엄청난 양의 정보가 업데이트 되기 때문에 이를 처리하는 아주 효율적인 방법으로 고안된 것이 시멘틱 태그 입니다. [2] 시멘틱 태그(Semantic tag) vs 비 시멘틱 태그(Non-semantic tag) 시멘틱 태그: h1, p, img, form, label 등 요소에 대해.. 2022. 6. 1.
[CSS.020] 글자,이미지 가운데 정렬하기 [CSS.020] 글자 가운데 정렬하기 위 그림처럼 div 태그 안에 있는 글자와 이미지를 정 가운데 정렬하는 방법에 대해 알아보겠습니다. [1] div 태그안에 글자, 이미지 만들기 먼저, 위 그림과 같이 div 태그 3개를 만들고, 그 div 태그 안에 숫자 1, 2, 그리고 사과 이미지를 넣겠습니다. [2] 가로 방향으로 가운데 정렬하는 방법 위 그림과 같이 div 태그 안에 글자와 그림을 "가로방향"에서 가운데로 정렬하려면 div태그에 다음의 명령어를 주면 됩니다. [3] 정 가운데에 정렬하는 방법 위 그림과 같이 div 태그 안에 글자와 그림을 "화면 정 가운데"로 정렬하려면 div태그에 다음의 명령어를 주면 됩니다. [4] 세로 방향으로 가운데 정렬하는 방법 위 그림과 같이 div 태그 안에 .. 2022. 6. 1.
[파이게임.003] pygame 키보드 입력처리 [파이게임.003] pygame 키보드 입력처리 [1] 이번시간에는 vscode 에디터에서 파일을 하나 만들어 코딩을 시작하겠습니다. 파이게임(pygame)라이브러리를 불러와 게임 프로그래밍에 필요한 키보드 입력을 처리하는 부분부터 알아보겠습니다. [2] vscode에서 폴더와 파일 생성하기 vscode의 상단 메뉴에서 "파일" > "폴더열기"를 눌러줍니다. 그리고 내가 원하는 곳에 빈 폴더를 하나 만들어 그 폴더를 선택해 줍니다. 아래 그림과 같이 파이썬 파일(xxx.py)을 하나 만들어 줍니다. xxx에는 내가 원하는 이름을 영어로 작성하시면 됩니다. [3] 기본코드 파이게임 라이브러리를 불러오며 게임 프로그래밍에 필요한 기본적인 코드를 아래에서 볼 수 있습니다. 1 2 3 4 5 6 7 8 9 10.. 2022. 5. 11.
[파이게임.002] vscode 에디터 설정하기 [파이게임.002] vscode 에디터 설정하기 이전 포스팅에서 설치한 vscode 에디터에서, 파이썬으로 게임을 만들기 위한 몇 가지 설정과 설치를 시작하겠습니다. [1] 구글 검색창에 python을 입력하여 www.python.org 사이트를 클릭해서 들어갑니다. [2] 아래와 같이 파이썬 사이트의 Downloads > Python x.xx.x를 클릭하여 파이썬을 다운 받습니다. (윈도우, 맥 , 리눅스 등의 운영체제 확인후 다운받기) [3] 다운받은 파이썬 설치프로그램을 클릭하고 아래 그림과 같이 PATH 경로 체크후 Install Now를 눌러 설치를 진행해 주세요. [4] 파이썬 설치가 완료되면, 이제 Visual Studio Code(vscode)를 실행해주세요. 아래 그림과 같이 뜹니다. [.. 2022. 5. 10.
[파이게임.001] vscode 에디터 설치하기 [파이게임.001] vscode 에디터 설치하기 [1] 파이썬으로 게임 개발 준비하기 - Visual Studio Code 설치하기 Visual Studio Code를 설치해 보도록 하겠습니다. 이미지를 보시면서 순서대로 따라하면 됩니다. (1) 구글(Google) 검색창에서 "visual studio code"를 검색하세요. 검색 결과 화면에서 제일 상단의 Visual Studio Code를 눌러 홈페이지로 들어갑니다. (2) 오른쪽과 같은 홈페이지에서 본인의 운영체제에 맞춰 "Download for Windows"를 눌러 다운받으면 됩니다. (3) 사용권 계약에 대해 "동의합니다"를 클릭하고 다음 버튼을 눌러 넘어갑니다. (4) 설치 위치를 정하는 부분입니다. 저는 첨부터 적혀있는데로 하겠습니다. 다.. 2022. 5. 10.
728x90
반응형

티스토리툴바