전체 글 썸네일형 리스트형 1학년 1학기 웹파이썬 프로그래밍 텀프로젝트 게임 개발기 - 1 파이썬, 파이게임을 이용한 게임을 개발하였습니다. 과제 제출을 완료하였지만 보완하면 좋을 점이 많기에 보완할 점들을 보완하여 완료 시까지 추가로 업데이트 할 예정이며, 현재 개발 완료된 기능과 코드를 보여드리겠습니다. 실제 게임 플레이 영상 위의 영상은 실제 게임 플레이 영상입니다. 인게임 화면을 통해 기능에 대해 소개하겠습니다. ① 왼쪽위에 플레이 시간을 표기합니다. ② 플레이어 x 좌표는 고정되어있으며, y좌표는 ↑↓ 방향키를 통해 컨트롤 가능합니다. ③ 하늘을 나는 적들로, y[0~600]사이에 랜덤으로 스폰됩니다. ④ 바닥을 걷는 적들로, y[700]에서만 움직입니다. 배경은 왼쪽에서 오른쪽으로 움직이며, 플레이어가 적과 충돌할 경우 화면 가운데에 GAMEOVER 멘트 출력 후 2초후 게임 창은 .. 더보기 HTML 프로그래밍 아홉번째(글자,단어 간격/대소문자 변경/목록 - 스타일 지정, 들여쓰기, 목록 마커) 오늘 해볼 것은 글자,단어 간격 대소문자 변경 목록 스타일 지정 목록 들여쓰기 목록 마커 를 해볼 것이다. 첫번째로 해볼 것은 글자와 단어의 간격을 넣는 것을 해볼 것이다. word-spacing : 숫자 단위; letter-spacing : 숫자 단위; 단어 사이의 간격 글자 사이의 간격 단어 사이의 간격은 word-spacing으로, 글자 사이의 간격은 letter-spacing으로 넣는다. 숫자의 간격이 커질수록 글자,단어 사이의 간격이 넓어진다. 음수를 넣는다면 간격이 좁아져 글자가 겹칠 수 있으므로 조심한다! 코드를 보고 이해해 보자. body 안에다 h3 태그를 이용해 동일한 내용을 넣고 인라인 스타일을 사용해 서로 다른 스타일을 줘 봤다. 실행화면을 확인해 보자. 보이는 것 처럼 letter.. 더보기 HTML 프로그래밍 여덟번째(폰트/글자 색/ 글자 정렬/줄 간격/text-decoration/그림자) 오늘 알아볼 것은 폰트 글자 색 글자 정렬 줄 간격 텍스트에 선 넣기 그림자 를 넣는 걸 배워볼 것이다. 첫번째로, 글자에 폰트를 넣는 방법을 알아볼 것이다. 구글 폰트 사이트를 검색해서 들어간다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 그다음, Language를 Krean으로 바꿔준다. 그 후에 원하는 폰트를 골라 클릭한다. 그후 오른쪽에 Select this style 를 눌러서 @import로 바꿔주고 글자 폰트를 바꾸고 싶은 html파일의 head안에다 을 넣어준다. 그 후에 클래스 선택자를 이용하여 font-f.. 더보기 HTML 프로그래밍 일곱번째(CSS기본형식/스타일적용) 오늘은 CSS의 기본 형태 스타일 적용 을 배울거다. 1. 기본형태 우선 css를 사용할때 기본 형태를 알아보자. 선택자 { 속성: 속성값; 속성2: 속성값; } *CSS에서 값을 넣어주는 대입 연산자에는 :(콜론)을 한 명령어/문장이 끝날때는 ;(세미콜론)을 넣어줘야 한다. ① 주석 /* 주석 내용 */ HTML의 주석처리 → Java 주석처리 → //주석내용 C언어 주석처리 Python 주석처리 → ##주석내용 ② 스타일 시트&상속 - 택스트등을 꾸미는 방법은 2가지가 있다. 첫번째는, 브라우저 기본 스타일로 → HTML만으로 웹문서 작성한 것을 웹 브라우저에 출력시킬 때의 스타일이다. 두번째는, 사용자 스타일로, CSS를 사용하고 파일에 적용하는 방법이 3가지가 있다. - 인라인 스타일(in-lin.. 더보기 HTML 프로그래밍 3/30 여섯번째(text/textarea태그,select, datalist, button태그) 오늘 배울것은 text태그와 textarea태그 select datalist button연습이다. 1. text태그와 textrea태그 - 두가지의 차이점을 알아볼 것이다. → 웹 페이지 상에 한줄만 보여진다. 내용 → 여러줄을 입력할 수 있다. textarea 속성 ① cols=" " → textarea 너비 지정(문자 단위로,가로 문자 수) ② rows=" " → 화면에 보여지는 줄 수(행,세로 줄 수) placeholder는 텍스트 입력이라는 글을 보여줌. 실행화면이다. 2. select - 드롭다운 목록을 만들어 준다. → 드롭다운 목록을 만들어준당 → 각 항목/옵션 표기 속성 ① size=" " : 화면에 표시할 드롭다운 항목 개수 지정 ② multiple : 옵셔을 2개 이상 선택 시 사용 속.. 더보기 HTML 프로그래밍 3/23 다섯번째(submit/reset과 button 차이) 오늘은 submit/reset과 button의 차이 button에 행동 넣기(간단예제) 파일 추가 태그 autofocus placeholder required 를 배웠다. 1.submit/reset과 button의 차이 input type =" submit/reset " → 이미 동작이 구현되어진 버튼이다. input type =" button " → submit과 reset과는 다르게 동작이 구현되어 있지 않는다. (Javascript를 이용해서 동작구현 가능) 버튼에서 html로도 간단하게 동작을 만들 수 있다. 2.button에 행동 넣기(간단한 예제) onclick → 버튼을 눌렀을때 발생하는 event를 말한다. window.open → window를 새로 여는 event이다. javascrip.. 더보기 HTML 프로그래밍 3/17 네번째(폼,인풋,체크박스) 오늘 배울것은 폼 인풋 체크박스/라디오박스 number&range 태그 날짜 선택 인풋태그 시간태그 버튼(제출,초기화) 이다. 1. 폼(form) : 입력 양식을 담는 틀 폼의 속성 값 method(방법) → post : 주소창에 입력한 것이 보이지 않음. → get : url주소창에 입력한 게 보인다. ex) 로그인 name - JavaScript에 넘겨줄 form 이름을 말한다. action - 에 내용을 처리해줄 프로그램과 연결 (자주 쓰임) target - 현재 창이 아닌 다른 위치에서 열리도록 한다. → form 안에 있는 것들을 묶어준다 → fieldset 제목 설정 tag 코드 사용 인풋 태그 실행화면 2. input태그 type = 입력할 것의 종류를 말한다. ex) text, email,.. 더보기 HTML 프로그래밍 3/16 세번째(표, 행/열합침, 하이퍼링크) 표(테이블) ★★★★★ : 표는 그리는 것을 명시 : table row, 행(줄) 추가 : table data, 열(칸) 추가 : table head, 제목 칸 추가 border = 내에 있는 모든 태그 값에 적용 ★★★★★ 에 테두리x 테두리, 테두리에 적용 → 이부분 잘 기억하기 th vs td 글씨크기, 글씨 굵기가 다름 ← 태그 ← 태그 table의 영역구분, 부분 나누기 → CSS에서 사용 행/열 합침 ★★★★ 행 합침(줄 합침) → 속성값 rowspan 줄 합침(칸 합침) → 속성값 colspan 실행화면 하이퍼링크 삽입 텍스트/이미지 코드 실행화면 이미지 삽입&이미지 tag 사용 시 자주 쓰는 속성 오디오/비디오 삽입(실습X) 더보기 이전 1 2 3 다음
