코드덤

파이썬 터틀 그래픽으로 만든 게임 하나를 소개해 드립니다. 파이썬에 기본으로 내장된 터틀 모듈로 만든 발사 게임입니다! 터틀 그래픽을 사용하면 입문과정에서도 이와 같은 그래픽 작품들을 간단하게 만들 수 있어요! 이러한 게임을 통해 클래스와 모듈이 어떻게 적용되고 활용되는지 보다 쉽게 이해할 수 있습니다! 아래 영상을 통해 버블 발사 게임을 만나 보세요 이번 프로젝트에서 우리 터틀의 임무는 해양 쓰레기를 소각해서 깨끗한 해양 생태계를 만드는 거예요. 터틀은 스페이스 키를 눌러 버블을 발사할 수 있습니다. 왼쪽 오른쪽으로 방향도 전환해 가며, 버블을 발사할 수 있어요. 실수로 물고기에게 버블을 발사하면, 점수가 감소됩니다! 그리고 쓰레기에 부딪힐 때마다 에너지가 하나씩 줄어들고, 모든 에너지를 잃게 되면 게..

안녕하세요. 코드덤입니다. 이번 시간에는 아두이노로 기초 과정에서도 간단하게 만들어 볼 수 있는 작품 4가지를 소개해 드리고자 합니다! 조도센서와 LED 그리고 피에조 부저를 활용하여 만든 작품이에요! 이 4가지 작품 모두 동일한 방식의 코드가 적용되었답니다! 이렇게 한가지 방식을 다양하게 활용해 볼 수 있어요! 아래 영상을 통해 어떻게 작동되는지 만나보세요! 완전히 동일하지는 않지만, 제 유튜브의 아두이노 무료 강좌를 통해서 조도센서를 어떻게 활용할 수 있는지 알아보세요! 17강부터 20강까지가 조도센서에 대한 강의가 무료로 오픈되어 있으니까요. 이 강의를 통해서 여러분도 다양한 작품으로 재탄생시켜 보세요! 아래 영상이 17강. 조도센서 회로구성 편입니다! 모두 새해 복 많이 받으시고, 보다 풍요로운 ..

안녕하세요. 코드덤입니다. 이번 시간에는 부트스트랩으로 간단한 폼을 하나 만들어 볼 거예요. 이번 폼에는 부트스트랩의 플로팅 레이블 스타일이 적용되어 있어요. 입력창을 클릭하면, 상단에 레이블이 작게 뜹니다. 바로 부트스트랩 플로팅 레이블을 적용한 스타일이랍니다. 부트스트랩에 제시된 예제 코드로 이러한 플로팅 레이블을 빠르게 적용시켜 줄 수 있습니다. 그리고 현재 폼 또한 반응형이에요. 그래서 큰 화면에서는 이름과 이메일 입력란이 가로로 배치됩니다. 하지만, 작은 화면에서는 세로로 배치되도록 만들어 볼 거예요. 부트스트랩의 플로팅 예제 코드를 활용하면, 이러한 폼을 상당히 빠르게 만들 수 있습니다. 부트스트랩 닥스, Form 카테고리에 floating label이 있는데요. 여기에서 플로팅 레이블의 다양..

안녕하세요. 코드덤입니다. 이번 시간에는 부트스트랩 5로 심플한 테이블을 만들어 볼 거예요. 총 2가지 테이블을 만들어 볼 건데요. 첫 번째 테이블이 부트스트랩의 기본 스타일을 적용한 예시입니다. 그리고 이전 시간에 배웠던 프로그래스 바도 넣어 보았습니다. 그리고 두 번째 테이블은 색상과 줄무늬 스타일이 적용된 예시입니다. 또한 마우스 포인터에 닿을 때마다 하이라이트 효과도 넣어 볼 거예요. 그리고 두 번째 예시에서는 부트스트랩의 뱃지 스타일을 넣는 방법에 대해서도 소개해 드립니다. 만들어 나가는 자세한 과정은 아래 영상에 담겨 있습니다. 아래 영상을 참고해서 여러분도 빠르게 테이블의 스타일을 잡아 보세요! 2가지 실천 프로젝트를 통해서 부트스트랩을 보다 체계적으로 배워나갈 수 있는 강좌를 오픈하였습니다..

부트스트랩 5 예제 9 이미지 다운로드 : 안녕하세요. 코드덤입니다. 이번 시간에는 레스토랑 대표 메뉴를 소개하는 페이지를 이미지 슬라이드 쇼 형식으로 만들어 볼 거예요. 부트스트랩의 캐러셀 예제 코드를 활용하면 빠르게 만들 수 있습니다. 여러 장의 이미지가 자동으로 슬라이드 되면서 보입니다. 그리고 이미지 좌우로 버튼이 보이죠. 좌우 버튼을 클릭해서 이미지를 이전과 다음으로 넘길 수도 있습니다. 이번 예제 코드는 부트스트랩에서 제공하는 예제 코드를 가져와서, 이미지만 넣어주고, 너비와 같이 간단한 스타일만 추가로 잡아 준 거랍니다. 부트스트랩의 carousel은 여러 장의 이미지를 슬라이드시켜 주는 요소인데요. 부트스트랩 Docs를 통해서 다양한 예시들을 제공하고 있어요. 만들어 나가는 자세한 과정은 ..

예제 이미지 다운로드 : 안녕하세요. 코드덤입니다. 이번 시간에는 부트스트랩 5로 디지털 명함을 만들어 볼 거예요. 아래 이미지와 같이 전체적인 배경을 넣고, 그 위로 디지털 명함을 넣어 볼 거예요. 그리고 프로필 정보 가장 하단에 SNS로 연결되는 버튼들이 있는데요. 이 버튼에 사용된 아이콘은 부트스트랩에서 제공하는 아이콘을 사용했습니다. 이렇게 이번 시간에는 부트스트랩 아이콘을 가져오는 방법에 대해서도 함께 배워 보겠습니다! 큰 화면에서는 이렇게 프로필 사진과 세부 정보가 수평으로 배치되고요. 작은 화면에서는 프로필 사진 아래쪽으로 텍스트가 배치되도록 만들어 볼 거예요. 부트스트랩을 사용하면, 입문 과정에서도 이러한 웹 페이지는 크게 어렵지 않게 만드실 수 있습니다. 그럼 함께 디지털 명함을 만들어 ..

부트스트랩5 예제7 이미지 다운로드 : 안녕하세요. 코드덤입니다. 이번 시간에 부트스트랩으로 만들어 볼 예제를 먼저 소개해 드릴게요. 이전 시간에 그리드 시스템을 적용해서 여러 장의 카드를 배치시켜 보았습니다. 그때, 부트스트랩의 카드 스타일을 적용해서 이미지 아래쪽으로 텍스트를 배치시켰는데요. 이번 시간에도 부트스트랩의 카드 스타일을 적용해서 만들어 볼 거예요. 차이점은, 이번 예제에서는 카드 전체에 배경 이미지로 이미지를 깔아 준다는 거예요! 그리고 그 배경 이미지 위로 텍스트를 띄워 볼 거랍니다! 위의 사진처럼 말이에요! 이러한 카드 스타일 또한 부트스트랩에 예제 코드가 제시되어 있으니까요. 우리는 이 예시 코드를 활용해서 빠르게 만들어 줄 수 있어요! 자, 그럼 함께 만들어 볼게요! 만들어 나가는..

부트스트랩 예제 6용 이미지 다운로드 : 안녕하세요. 코드덤입니다. 이번 시간에는 카드 형식으로 반려견을 소개하는 페이지를 만들어 볼 거예요. 각 카드에는 이렇게 이미지와 간단한 소개들이 들어가 있습니다. 그리고 지난 시간에 배운 부트스트랩의 그리드 (grid) 시스템 또한 적용되어 있어요. 그래서 large 사이즈 이상에서는 이렇게 카드 4장이 일려로 펼쳐집니다. small 사이즈 이상에서는 한 줄에 카드 2장씩, 가장 작은 화면에서는 카드 한 장식 출력되도록 만들어 볼 거예요. 오늘의 예제에 필요한 이미지는 상단의 첨부 파일을 다운로드하여서 사용해 주시면 됩니다. 오늘 예제는 부트스트랩의 카드 (card) 스타일과 그리드 (grid) 시스템을 활용한 예제인데요. 부트스트랩에서 제공하는 예제 코드를 활..

예제 이미지 다운로드 : 안녕하세요. 코드덤입니다. 이번 시간에 부트스트랩으로 만들어 볼 예제는 프로필 소개 섹션이에요! 위의 그림과 같이 이미지와 텍스트를 배치시켜 볼 거랍니다. 왼쪽으로 사진이 배치되어 있죠. 그리고 오른쪽으로 프로필에 대한 세부 사항이 배치되어 있는데요. 이 예제는 부트스트랩의 그리드 시스템이 적용된 예제랍니다! 그래서 화면이 스몰 사이즈 이하로 작아지면, 사진 아래쪽으로 텍스트가 배치되도록 만들어 줄 거예요. 부트스트랩의 가장 큰 장점 중 하나가 바로 반응형 웹 디자인입니다. 반응형 웹 디자인은 브라우저의 너비에 따라 레이아웃을 변경해 주는 것을 말하는데요. 이제는 스마트폰이나, 태블릿, 노트북뿐만 아니라, 자동차나 가전제품을 통해서도 웹 브라우저 접속이 가능해졌습니다. 이처럼 우..

안녕하세요. 코드덤입니다. 이번 시간에는 영화 평점을 이렇게 프로그래스 바를 사용해서 표현해 볼 거예요. 부트스트랩에서 제공하는 기본 예제 코드를 활용해서 바로 이러한 프로그래스 바를 만들 수 있답니다! 위의 이미지에서처럼 줄무늬 모양도 넣어보고, 색상이나, 값도 아주 간단하게 바꿔줄 수 있어요! 그리고 이미지로는 보이지 않지만, 애니메이션 효과도 들어가 있답니다. 이 부분은 아래 영상을 통해서 확인하실 수 있어요. 프로그래스 바의 스타일부터 애니메이션까지 부트스트랩으로 간단하게 만들어 줄 수 있답니다! 자, 그러면 프로그래스 바를 활용한 영화 평점 웹 페이지를 함께 만들어 볼게요! 만들어 나가는 자세한 과정과 상세한 설명까지!! 아래 영상에 모두 담아 두었습니다! 그러니, 아래 영상을 참고해 주세요~ ..