'프로그래밍' 카테고리의 글 목록

티스토리에 유튜브 동영상을 반응형으로 자동으로 바꿔주는 소스 코드

블로그를 작성하다보면 유튜브 동영상을 본문에 삽입하는 경우가 자주 있는데요. 이 유튜브 사이즈를 모바일에서도 알아서 맞춰주는 반응형 스타일로 자동으로 바꿔주는 스크립트 소스 코드를 작성해 보도록 하겠습니다. 유튜브 동영상을 반응형으로 바꿔주는 CSS 소스 코드 우선 유튜브 embeded iframe html 코드는 아래와 같이 생겼을 겁니다. 그리고 유튜브 동영상을 반응형으로 바꿔주는 CSS 코드는 아래와 같습니다. .video_wrapper { position: relative; padding-bottom: 56.25%; //비디오의 폭이 100%일 경우의 높이 비율 height: 0; } .video_wrapper iframe { position: absolute; top: 0; left: 0; wi..

프로그래밍/CSS & 자바스크립트 2020. 7. 29. 11:58

다양한 CSS 마우스 오버 효과 소스코드

남들과 다른 블로그 스타일! 마우스 오버 효과(hover/transition)만으로도 내 블로그의 느낌을 남들과 다르게 만들수 있습니다. 그래서 이번에는 마우스를 오버했을 때 다양한 효과를 보여주는 CSS의 소스 코드를 작성 해보도록 하겠습니다. 마우스 오버 효과는 쇼핑몰의 상품정보 또는 이미지 갤러리 등에서 많이 사용되는 효과인데요, 마우스를 이미지에 올리면 제목, 상세내용 또는 버튼 등을 보여주는 기능입니다. 그냥 보여주면 심심하니 남들과 조금 다른 독특한 효과를 넣어보세요. 1. CSS 마우스 오버 효과 1 - Demo CSS 마우스 오버 효과1 상세 내용은 여기에... 상세 내용은 여기에... 상세 내용은 여기에... 더 보기 - 소스 코드 See the Pen CSS Hover Effect Fo..

프로그래밍/CSS & 자바스크립트 2020. 7. 20. 14:19

다양한 CSS 밑줄 효과 소스코드

블로그의 글을 쓰다보면 강조하고 싶은 글들이 있을 경우에 밑줄을 많이 사용하는데요, 형광펜 스타일 또는 에니메이션이 들어가면 조금 더 읽는 사람들에게 재미와 관심을 쓸 수 있지 않을까 생각됩니다. 그래서 이번 글에서는 블로그에서 사용하면 좋은 밑줄 효과를 주는 CSS 소스코드를 모아봤습니다. 1. 형광펜 밑줄 효과 요즘 많이들 사용하는 밑줄 효과인데요, 형광펜으로 밑줄을 그은듯한 느낌의 CSS 스타일입니다. 세가지 종류을 예로 보여드리겠습니다. 태그만 사용한 경우 CSS의 배경색(background-image)를 사용한 경우 형광펜으로 밑의 반만 줄을 그은듯한 효과 See the Pen Highlighters by hagisuda (@hagisuda) on CodePen. 2. 마우스를 올려 놓으면 밑줄..

프로그래밍/CSS & 자바스크립트 2020. 7. 18. 13:20

자동으로 블로그 목차 만들어주는 소스코드(JQuery)

긴 블로그에 목차가 있으면, 독자들에게는 여러모로 좋은 점이 많이 있는데요. 전체의 글의 요약 원하는 내용으로 이동이 용이 그런데 이런 목차를 수동으로 본문에 집어 넣을 경우 나중에 본문의 내용이 변경되거나 순서가 바뀌게 되면 목차도 같이 바꿔줘야 번거러움이 있습니다. 그래서 목차를 자동으로 만들어 주는 기능은 블로그 웹사이트 운영자에게는 있으면 큰 도움이 되는 기능 중에 하나일 것입니다. 자 그럼 블로그의 목차를 자동으로 생성해 주는 코드를 만들어 보도록 할까요? 1. HTML에 목차 자동 생성 HTML 소스코드 넣기 우선 여러분의 블로그의 구조를 먼저 파악해야합니다. 밑은 우리가 목차를 만들어 볼 블로그의 HTML 구조입니다. 블로그 제목 블로그 문단 제목1 블로그 내용..... 블로그 문단 제목2 ..

프로그래밍/CSS & 자바스크립트 2020. 7. 15. 16:19

화면 상단으로 이동하는 버튼 소스코드(JQuery)

모바일로 글을 읽다보면 위로 이동하기위해서 스크롤을 계속해야하는 사이트들이 있지요. 이런 경우에 오른쪽 밑에 바로 페이지 상단으로 이동을 해주는 버튼이 있으면 아주 편합니다. 오늘은 이 화면 상단으로 스크롤 해주는 버튼을 JQuery로 만들어 보겠습니다. 1. HTML에 화면 상단으로 이동하는 버튼 소스코드 넣기 우선은 JQuery는 여러분의 웹사이트에서 사용하고 있다고 가정하겠습니다. HTML에 밑에 코드와 비슷한 코드가 있으면 JQuery를 사용하고 계신겁니다. 버젼은 틀려도 괜찮습니다. 1.1 아이콘은 font-awesome을 사용 버튼에 있는 화살표 모양의 아이콘은 이미지를 사용해도 되지만 여기서는 font-awesome 아이콘을 사용하겠습니다. 아래 font-awesome 웹사이트에서 최신 버젼..

프로그래밍/CSS & 자바스크립트 2020. 7. 14. 05:09

스크롤 페이지 프로그레스바 소스코드(자바스크립트)

이 블로그에도 사용되고 있지만, 요즘 많은 블로그에서 사용하고 있는 기능이 마우스를 스크롤하면 화면 상단에 페이지를 어느 정도 보고 있는지 알려주는 프로그레스바(Progressbar, Indicator) 입니다. 특히 모바일을 사용할 경우에는 글이 길어서 현재 어느정도 보고 있는지 알 수 있으면 도움이 많이 되죠. 이번 소스에서는 JQuery를 사용하지 않고, vanila 자바스크립트만 사용해 구성해 보도록 하겠습니다. 1. HTML에 프로그레스바 소스코드 넣기 우선 먼저 HTML에 프로그레스바 소스코드를 넣어 보겠습니다. 기본적으로 페이지 제목을 화면 상단에 고정시키고 그 밑에 프로그레스바를 보여주는 방식으로 하겠습니다. 페이지 제목 위의 코드가 헤더 부분의 코드가 되고요, 내 홈페이지의 제목 밑에 '..

프로그래밍/CSS & 자바스크립트 2020. 7. 12. 02:30

파이썬 게임 개발 (초급) - 핑퐁(Pong)

핑퐁(Pong) 게임 기억나시나요? 오늘은 핑퐁 게임을 파이썬을 이용해서 간단히 개발을 해보도록 하겠습니다. 파이썬 게임 프로그램이든 어떤 프로그램이든 개발에 들어가기 앞서서 전체적인 프로그램을 설계하는 습관이 아주 중요한데요, 설계를 구체적으로 하게되면, 머리속으로 먼저 한번 프로그램을 해보게 되는 것이죠. 그러면 프로그램의 큰 그림을 볼 수가 있게 되고, 또한 막연히 생각만 하던 기능들을 구체화 시키면서 어떤 기능들이 필요한지도 정리가됩니다. 1. 파이썬 핑퐁 게임 개발 - 기능을 정의하기 아래의 그림이 최종적으로 우리가 만들어볼 핑퐁 게임의 모습입니다. 그러면 이 핑퐁 게임을 제작하기 위해서 어떤 기능들이 필요할까요? 핑퐁 게임에 필요한 기능들 게임 화면창 그리기 핑퐁 바 그리기 핑퐁 볼 그리기 핑..

프로그래밍/파이썬 2020. 7. 2. 00:57

파이썬(Python) 프로그래밍 기초 명령어 강좌

프로그래밍 언어 중 최근 파이썬이 인기인데요, 이번 강좌에서는 간단하게 파이썬 기초 명령어를 모아봤습니다. 이 파이썬 기초 명령어와 문법만 아셔도 일반 응용 프로그램이나 간단한 게임 프로그램은 파이썬으로 만드실수 있을 겁니다. 1. 들여쓰기 와 명령문 블럭 우선 명령문을 배우기 전에 파이썬이 다른 언어와 틀린 프로그램 작성법을 알아보겠습니다. 많은 프로그램 언어에서 명령문 블럭을 지정할 때는 중괄호({}) 를 사용하여 블럭을 감싸게 됩니다. Java의 경우 아래와 같죠. [Java] int a = 0; int b = 1; if (b > a) { int temp = a; a = b; b = temp; } println(a); 파이썬에서는 중괄호 사용하지 않고, 대신 콜론(:)을 사용한 다음, 그 다음줄부터..

프로그래밍/파이썬 2020. 6. 28. 07:41

웹호스팅이란 부터 업체,비용 비교 까지

웹사이트를 제작하기 위해서 필수적으로 고민해야하는 웹호스팅. 웹호스팅이란 무엇이고, 어떤 업체들이 있으며, 비용은 얼마인지 국내 웹호스팅 주요 업체들의 서비스를 비교해가면서 한번 알아보도록 하겠습니다. 1. 웹호스팅이란 무엇인가? 웹사이트를 만들려고 문의를 하면, 듣는말이 '웹호스팅 비용은 xxxx 구요. 도메인 비용은 따로 내셔야합니다' 입니다. 우선 웹호스팅을 설명하기 전에 웹사이트가 어떻게 구성되어 있는지 부터 살펴보죠. 1.1 도메인과 웹호스팅 웹사이트는 naver.com, daum.net 같은 도메인 이름과 소스 파일이나 이미지들이 저장되는 서버 컴퓨터로 구성됩니다. 그리고 이 서버 컴퓨터를 직접 관리하기가 어렵기 때문에 본인 컴퓨터로 하지 않고, 다른 전문업체에게서 빌려서 사용하는 것을 웹호스..

프로그래밍/웹사이트 만들기 2020. 6. 28. 02:24

윅스(Wix) 무료 쇼핑몰 홈페이지 만들기

윅스(Wix)는 무료 홈페이지 제작으로 유명한 사이트입니다만, 지난번 무료 홈페이지 제작 사이트 비교 포스트에서 윅스를 사용해 봤는데, 쇼핑몰의 기능들도 잘되어 있어서, 좀더 자세히 윅스 무료 쇼핑몰 제작에 대해서 알아보도록 하겠습니다. 먼저 말씀을 드리지만 아쉽게도 윅스 무료 쇼핑몰를 만들어서 이용할 경우에는 온라인으로 주문을 받을 수는 없습니다. 그러므로 제품을 올려서 소개는 하는 정도까지는 가능하지만, 온라인으로 결재와 주문을 받기 위해서는 유료회원에 가입하셔야 합니다. 1. 홈페이지 카테고리 정하기 윅스를 가입하면 먼저 아래와 같은 카테고리를 선택하는 화면이 나옵니다. 여기에서 어떤 카테고리를 선택하느냐에 따라서 웹사이트에 추가되는 기능이 틀린데요. 쇼핑몰을 만들기 위해서 우리는 'Online S..

프로그래밍/웹사이트 만들기 2020. 6. 22. 07:35

무료 홈페이지 비교

무료 홈페이지 하면 Wix 를 가장 많이 떠올리실텐데요. 오늘은 무료 홈페이지 서비스를 제공하는 Webnode, Weebly, Ucraft를 Wix와 비교해서 무료 홈페이지를 만드는데 어떤 장점이 있는지 또는 단점은 무엇이 있는지 비교 분석을 해볼까 합니다. 무료 홈페이지를 만들려고 하면 검색엔진에서 제일 많이 눈에 띄는 것은 역시 워드프레스 일텐데요. 하지만 막상 워드프레스를 사용해보면 결코 초보자가 사용하기에 쉬운 플랫폼은 아닌 것이 사실입니다. 그래서 그 다음으로 눈을 돌리는 곳이 Wix인데요. 하지만 Wix를 사용하신 분들의 평을 들어보면 속도가 느리다는 이야기들을 많이 하십니다. "아! 그러면 뭘 사용해야 되나?" 생각하시는 분들이 많으실텐데요. 살짝만 눈을 해외로 돌리면 홈페이지를 무료로 제공..

프로그래밍/웹사이트 만들기 2020. 6. 20. 10:16

페이스북 쇼핑몰(페이스북 샵) 만들기

페이스북에서 쇼핑몰을 만들기 위한 페이지 등록, 샵 기능 추가, 제품 및 카테고리 등록 등의 기능을 알아보겠습니다. 제가 여러개에 쇼핑몰을 개발해 보았습니다만, 가장 많이 느끼는 것은 고객분들은 쇼핑몰 웹사이트를 만들면 모든 게 끝나고, 수익이 바로 늘어날 것이라고 생각한다는 것이죠. 하지만 실제로는 쇼핑몰 웹사이트를 완성하는 것은 시작에 불과합니다. 어떻게 제품을 선전, 광고 하고, 또한 결제와 배송은 어떤 방식으로 할 것인가도 무척 중요한 문제인데요. 그래서 이런 문제를 제대로 해결하지 못하시는 분들은 결국 비싼 비용을 들여 쇼핑몰 웹사이트를 만들어서 판매도 못하고 일반 웹사이트처럼 사용하거나 아예 웹사이트가 사장되어 버리는 안타까운 경우도 많이 있습니다. 페이스북은 설명이 필요없을 정도로 사용자들이..

프로그래밍/웹사이트 만들기 2020. 6. 14. 11:52

팬케잌굽는남자

프로그래밍 → (12)건