본문 바로가기
반응형

전체 글200

[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.
[스크래치아두이노.010] 키패드로 비밀상자 만들기 [스크래치아두이노.010] 키패드로 비밀상자 만들기 [1] 키패드란? 키패드(keypad)는 블록이나 패드 단위로 정렬된 버튼들의 모임으로, 숫자, 기호, 알파벳 문자들을 이룬다. 숫자를 포함하는 패드는 숫자 키패드로 부른다. 숫자 키패드는 컴퓨터 자판 외에도 계산기, 푸시 버튼 전화, 자판기, ATM, POS 장치, 번호 자물쇠(부호 자물쇠), 디지털 도어락과 같이 주로 숫자 입력을 요구하는 다른 장치들에서 볼 수 있다. [2] 회로도 [3] 확장센서 [4] 실습코드 (예제 1) 아래와 같이 숫자 키패드값을 변수에 저장하여, 숫자 0~3을 나타내세요. 더보기 (유제 1) 키패드 숫자 0 ~ 9까지 모두 화면에 나타날 수 있게 해보세요. (예제 2) 아래 그림과 같이 코딩하여, 숫자 키패드 값이 1/2 .. 2022. 5. 10.
[스크래치아두이노.009] LCD 화면에 글자 나타내기 [스크래치아두이노.009] LCD 화면에 글자 나타내기 [1] 이론 -LCD란? (출처: 삼성 디스플레이) https://news.samsungdisplay.com/11678 [2] 센서확장 [3] 회로도 [2] 실습코드 (예제1) Hello World 글자 출력 * LCD 좌표 설명 (유제1) 아래 그림과 같이 나의 영어 이름을 LCD에 출력해 보세요. 더보기 (예제2) LCD 모두 지우기를 이용하여 글자를 지웠다가 나타내보기 (유제2) 아래 그림과 같은 위치에 대문자 알파벳 A,B,C,D 가 나타났다가 3초후에 소문자 알파벳 a,b,c,d로 바뀌게 해보세요. * LCD 좌표 설명 더보기 (예제3) 아래 그림과 같이 온습도 센서로 측정한 온도값(C)과 습도값(%)을 LCD에 나타내 보자. (유제3) 아.. 2022. 5. 6.
[HTML.008] 줄바꾸기,강조하기 [HTML.008] 줄바꾸기, 강조하기 [1] 줄 바꾸기 태그 태그는 다음 줄로 넘어가게 하는 기능이 있습니다. 태그는 단독으로 사용하기 때문에 닫는태그()가 없습니다. (예시1) (퀴즈1) 다음 "포도"에 관한 문장을 태그를 사용하여 3줄로 나타내 보세요. (포도에 관한 문장) 포도(葡萄, grape)는 포도속(Vitis) 식물의 총칭, 또는 그 열매를 말한다. 포도의 품종에는 포도(V. vinifera)·미국포도(V. labrusca)·교배종이 있다. 포도(V. vinifera)는 전파 과정에 따라 남유럽계·중앙아시아계·동아시아계 등의 재배형으로 분화하였다. 3줄로 나타낸 결과 더보기 [2] 글자 굵게 표시하기 , ~ 태그를 이용하여 글자를 굵게 할 수 있습니다. ~ 태그를 이용하여 글자를 굵게 할 .. 2022. 5. 3.
[스크래치아두이노.008] 도트 매트릭스 LED 전광판 만들기 [스크래치아두이노.008] 도트 매트릭스 LED 전광판 만들기 [0] 매트릭스(Matrix) 란? [1] 도트 매트릭스 LED 란? 도트 매트릭스 LED란, 매트릭스(Matrix, 행렬)형태로 도트(Dot, 점)모양의 LED를 연결한 제품을 말합니다. 각 도트의 LED를 켜거나 끄면 멀리서 봤을 때 어떤 모양이나 글자를 나타낼 수 있습니다. 우리가 사용할 도트 매트릭스 LED는 "8x8 도트 매트릭스 LED"로서 가로 8개, 세로 8개의 행렬로 이루어진, 총 64개의 LED(8x8)의 격자형으로 구성해 놓은 LED 장치 입니다. [2] 회로도 [3] 도트 매트릭스 센서확장 [4] 실습코드 🚩 예제 1 도트 매트릭스 LED에 숫자 1 ~ 3을 나타내기 🏴 유제 1 ~번 반복하기와 변수를 사용하여 숫자 1 .. 2022. 4. 28.
728x90
반응형

티스토리툴바