팬케잌굽는남자

프로그래밍/CSS & 자바스크립트 → (6)건

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

블로그를 작성하다보면 유튜브 동영상을 본문에 삽입하는 경우가 자주 있는데요. 이 유튜브 사이즈를 모바일에서도 알아서 맞춰주는 반응형 스타일로 자동으로 바꿔주는 스크립트 소스 코드를 작성해 보도록 하겠습니다. 유튜브 동영상을 반응형으로 바꿔주는 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
◀ 1 ▶

티스토리툴바