동해둘리의 IT Study

AI 파일을 웹상에서 본다? ai파일은 Adobe Illustrator 프로그램이나 PhotoShop 과 같은 그래픽 프로그램이 설치되어 있어야 볼 수 있는게 정석인데요, 그런 이유로 ai 파일을 웹상에서 보이게 하려고 아래와 같이 코딩을 하게되면 1 2 3 4 5 6 7 8 9 10 11 Colored by Color Scripter cs 화면에 보여지는 대신에 다운로드 하라? 위와 같이 코딩을 하게되면, 웹 브라우저가 ai 파일을 해석할 수 있는 기능을 탑재하고 있지 않기 때문에, 화면에 보여지지 않고, 대신 파일을 다운로드 하라고 탐색기 창이 뜨게 됩니다. AI파일 뷰어 서비스 웹상에서 ai 파일을 업로드 하면, 이를 볼 수 있게 제공해주는 사이트가 있기는 합니다. 하지만, 이런 사이트를 이용해서 ..

IT공부방/HTML5, CSS 2023. 6. 26. 05:10

기본적인 셀렉트 박스 기본적인 selectbox 태그를 사용하게 되면, 아래와 같은 모양의 selectbox 가 나타나게 됩니다. 그런데, 별로 이쁘지가 않고, 리스트의 내용이 아주 길 경우에는 검색을 할 수가 없기때문에 스크롤을 엄청 오래 해야하는 불편함이 있습니다. select2 라이브러리를 사용하자 select2 라이브러리를 사용하게되면, 아주 손쉽게 아래와 같이 모양도 이쁘고, 검색도 가능한 selectbox를 만들 수 있습니다. * select2 라이브러리를 사용하려면 먼저 아래와 같은 코드를 페이지에 삽입해야 합니다. 1 2 3 cs * 그런 후에 아래와 같이 document.ready 에서 해당 selectbox에 select2() 함수를 적용시켜주기만 하면 됩니다. 1 2 3 4 5 6 /..

IT공부방/HTML5, CSS 2023. 6. 21. 11:43

위와 같이 텍스트에 형광펜 효과를 주기위한 코드 입니다. linear-gradient() 함수는 배경에 선형 그라디언트(gradient) 효과를 생성하는 데 사용되는데요, 이 함수를 사용하여 두 개 이상의 색상을 부드럽게 변환하는 그라디언트 효과를 만들 수 있습니다. 예를 들면 아래와 같이 사용할 수 있습니다. 1 2 3 4 5 6 7 8 /* 세로로 그라디언트 */ background: linear-gradient(to top, blue, red); /* 가로로 그라디언트 */ background: linear-gradient(to right, yellow, green); /* 대각선 그라디언트 */ background: linear-gradient(to top right, purple, orange)..

IT공부방/HTML5, CSS 2023. 6. 16. 05:39

css 를 이용하여 배경색을 변경하는 코드입니다. 10초의 간격을 두고 검은색에서 붉은색으로 천천히 변경되기를 반복하게 됩니다. @keyframes 으로 animateBackground 라는 변수에 애니메이션에 대한 설정을 하게 되는데요 0%는 시작, 50%는 중간, 100%는 애니메이션의 끝을 나타냅니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 .background-animation { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: -1; background-color: #000; animation..

IT공부방/HTML5, CSS 2023. 6. 15. 10:10

css를 이용해서 테이블을 꾸밀때, PC, 모바일, 테블릿 상관없이 폭이 조정되고, 홀수 라인과 짝수 라인을 구별하도록 배경색을 설정하고, 마우스 오버시에 해당 라인을 특정시켜주는 기본코드입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 table { width: 100%; border-collapse: collapse; border-spacing: 0; } th, td { padding: 8px; text-align: left; b..

IT공부방/HTML5, CSS 2023. 6. 14. 12:35

CSS 를 이용하여 버튼에 애니메이션 효과를 주는 소스를 찾아보다가 심플하면서도 괜찮은게 있어서 공유합니다 제가 만든건 아니구요^^ 아래와 같은 3가지 타입의 버튼이 있는데요, 애니메이션 효과를 주어 역동적인 느낌을 주는 버튼입니다 아래 링크에 접속하시면 소스코드를 확인하실 수 있습니다 https://codepen.io/sazzad/pen/yNNNJG Animated CSS3 Buttons Experimental css buttons by Designify.me... codepen.io 참고로 저 동해둘리가 직접 운영하는 '성공하는 중이다' 카페를 소개드립니다. 각자의 분야에서 성공을 향해 가는 과정에서 힘이되는 이야기, 힘이되는 사진, 성공스토리, 실패스토리 등을 나누고자 합니다. 많은 참여 부탁드려요..

IT공부방/HTML5, CSS 2022. 8. 5. 11:03

CSS 그라데이션 적용하기 CSS를 이용하여 그라데이션을 넣기 위해서는 linear-gradient 옵션을 이용하면 됩니다 linear-gradient 속성은 기본적으로 두개의 인자를 받는데요, white, green 등으로 두가지 색상을 설정하면 두개의 색상이 부드럽게 변해가면서 그라데이션을 만들게 됩니다 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 div { background-image: linear-gradient(white, green); } Colored by Color Scripter cs 아래와 같이 방향 옵션을 주게되면 오른쪽 제일 하단방향, 즉 좌측 상단에서 우측하단 방향으로 그라데이션이 적용됩니다 linear-gradient(to bottom right, wh..

IT공부방/HTML5, CSS 2020. 12. 2. 05:59

지난시간 Review 1. CSS 를 이용하여 기초적인 애니메이션이 가능합니다. 지난 시간에는 가장 기본적인 위치이동을 해봤습니다. 2. 두번째 포스팅 에서는 키프레임을 이용한 CSS 애니메이션을 만들어 봤습니다. CSS곡선 애니메이션 이번에 시도해 볼 CSS애니메이션은 곡선형태로 움직이는 CSS애니메이션 입니다. 아래 이미지와 같이 8자 형태로 움직이는 애니메이션 입니다. 직선으로 움직이지만 곡선처럼 만든다? 위와 같이 움지이기 위해서는 이미지의 X 포지션과 Y 포지션을 변경하면서 만들 수 있습니다. 그런데 아래 코드를 보면 X포지션과 Y포지션을 300픽셀 씩 이동하게 되는데, 실제 목적지는 우상단 300픽셀 지점이기 때문에, 사실 이대로 움직이게 되면 직선으로 우상단으로 움직이게 됩니다. 1 2 3 ..

IT공부방/HTML5, CSS 2020. 2. 22. 18:47

CSS 애니메이션 하늘을 나는 새 javascript나 jquery를 이용하지 않고 CSS 만으로 애니메이션을 만들 수 있습니다. 위에 있는 새는, 움직이는gif(gif animation)로 만들어 본 것인데요, 요즘 흔히 말하는 움짤이죠. 귀엽게 하늘을 나는 새를 CSS 만으로 만들어 보겠습니다. 먼저, CSS 기본적인 애니메이션은 지난번에 포스팅한 아래 글을 참고하시기 바랍니다. 새 이미지의 크기에 맞게 394x293px 크기의 DIV 를 만듭니다. 1 2 3 4 5 6 7 8 9 10 div { width:394px; height:293px; animation-name: bird; animation-duration: 0.5s; animation-timing-function: linear; anima..

IT공부방/HTML5, CSS 2020. 2. 18. 06:19

CSS 애니메이션 따라하기.... ^^ Javascript 나 플래시를 사용하지 않고도 CSS를 이용하여 애니메이션 효과를 만들어 낼 수 있습니다. 먼저, 어떻게 동작하는지 살펴보시지요. 아래 링크를 클릭하시면 데모를 보실 수 있습니다 http://meriqueen-woolmark.com/03_doolyit_image/animation.html http://meriqueen-woolmark.com/03_doolyit_image/animation.html meriqueen-woolmark.com 애니메이션에 사용된 고양이 이미지도 함께 첨부합니다. 1. 고양이 이미지 넣기 좌우로 왔다갔다 하는 고양이를 만들기 위해서, 먼저 DIV 태그 안에 고양이 이미지를 넣어놓습니다 1 2 3 Colored by Col..

IT공부방/HTML5, CSS 2020. 2. 17. 01:52

CSS 입력폼 크기/ 글씨크기 입력폼을 만들때 가장 기본적인 것은 입력폼의 크기와 입력되는 글씨의 크기입니다. 위와 같이 입력란을 만들려면 기본적으로 다음과 같이 코딩하게 됩니다. placeholder 에 값을 입력하면 텍스트 입력란에 표시되었다가 글씨를 입력하기 시작하면 사라집니다 1 cs 위 그림의 두번째 처럼 입력란의 크기를 키우려면 다음과 같이 CSS코드를 추가해주면 됩니다 1 cs 하지만, line-height 를 이용하여 입력란의 크기를 키우게 되면 문제가 있는데요, 크롬과 엣지에서는 제대로 보이지만 익스플로러 에서는 글씨위치가 이상하게 보입니다 브라우저의 특성과 상관없이 가운데로 보이게 하려면, line-height 를 사용하지 않고 padding 옵션을 주면 됩니다 1 cs padding ..

IT공부방/HTML5, CSS 2020. 2. 16. 14:40

웹사이트 개발시 배경화면을 넣거나 팝업을 띄우는 경우 현재 웹사이트가 표시되는 브라우저의 높이를 구해야 할 필요가 있을 때가 있습니다 clientHeight , browserHeight , innerHeight 등등 다양한 높이를 구하는 변수값은 혼동을 주기 쉽고, 게다가 브라우저 종류에 따라서도 표준화 되어 있지 않기때문에, 코딩하는 입장에서는 각 브라우저별로 각각 다른 방법을 사용해야 합니다 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 var userAgent = navigator.userAgent.toLowerCase()..

IT공부방/HTML5, CSS 2019. 11. 12. 10:38

PHP에서 특수문자처리를 위해 사용하기 좋은 함수가 하나 있습니다. 바로 get_html_translation_table() 함수인데요, / 나 & 와 같이 URL 에 사용시 문제가 될수있는 캐릭터들을 확인하고 검사/변환하는데 기본적인 사전역할을 해줄 수 있습니다. get_html_translation_table(function,flags,character-set) 위와 같이 정의가 되는데요, 인자로 전달되는 값은 다음과 같은 값이 가능합니다 1. function 첫번째 인자인 function 은 아래와 같이 두가지 옵션이 가능합니다. 사실 HTML_SPECIALCHARS 는 HTML_ENTITIES 안에 포함되어 있는 특수문자입니다. 다만, 주소표시등에 사용하면 문제가될 수있는 몇개의 특수문자만 따로 ..

IT공부방/HTML5, CSS 2019. 8. 6. 17:39

HTML 문서가 로딩된 후에 배경음악이 자동으로 재생되게 하는 경우가 있습니다만, 2018년 1월부터 구글이 크롬브라우저에서 음악이나 영상이 자동재생 되지 않게하는 정책을 시행하게되면서 문제가 발생했습니다 예전에는 audio 태그의 autoplay 옵션을 true로 하면 자동재생이 되었지만, 최신 크롬브라우저에서는 더 이상 자동재생되지 않습니다. 이렇게 된 이유는, 무분별한 광고때문이라고 합니다. 무작위 광고와 자동재생 미디어 때문에 사용자환경이 안좋아 지게 되기 때문이라고 하는데요, 저의 경우는 온라인 학습(LMS)관련 프로젝트를 진행하고 있는데, 자동재생이 되지 않아서 각 차시별로 매번 클릭을 해야만 재생이 되는 문제가 있었습니다. 자동재생이 되는 경우는 다음과 같은 경우로 제한되고 말았습니다. 1...

IT공부방/HTML5, CSS 2019. 7. 18. 13:40

HTML Canvas 에 있는 이미지, 자막, 애니메이션 등의 움직임이 있는 요소를 동영상으로 변환, 저장, 스트리밍 할 수 있는 방법을 찾던 중에, 괜찮은 솔루션이 있어서 참고용으로 기록을 남깁니다 저의 경우는 위와 같이 사용자가 원하는 패턴으로 침실을 꾸며보는 프로젝트를 진행하고 있는데요, 그 결과물이 canvas 상에서 이루어 집니다. 그 과정을 영상으로 변환, 저장 할 필요가 있어서 솔루션을 찾고 있었는데, 위 내용과 같이 Firefox 에서 캔버스 안의 내용을 영상 스트림으로 변환하는 기능을 제공한다는 걸 알게되었습니다. HTMLCanvasElement.captureStream() 위 함수가 그런 기능을 제공한다고 합니다. 아울러 유튜브에서도 API 를 통해 같은 기능을 구현할 수 있다고 합니다..

IT공부방/HTML5, CSS 2019. 7. 6. 08:14

블로그/ 웹사이트 등에 특정 웹사이트를 링크하는 경우, 아래와 같이 자동으로 사이트 정보가 노출되는 것을 볼 수 있습니다. 위와 같이 사이트정보가 표시되게 하기 위해서는 HTML 문서내에 몇가지 코드를 넣어주어야 하는데요, 웹표준에 따라 HTML 코드를 넣어주면 됩니다. 위 코드는 웹사이트 정보를 수집하는 각종 검색엔진의 로봇을 허용할지를 명시하는 코드입니다. index 는 검색엔진의 로봇검색을 허용할지를 정하는 키워드로 noindex 로 설정하게 되면 로봇 검색을 허용하지 않는다는 뜻힙니다 follow 는 웹사이트 내에 기록된 링크를 허용할 지를 지정하는 키워드 인데요, 마찬가지로 nofollow 로 설정하게 되면, 페이지내에 있는 url 을 로봇이 수집하지 못하게 합니다. 페이지 제목 위 코드는 페이..

IT공부방/HTML5, CSS 2019. 7. 5. 09:05