본문 바로가기

HTML39

HTML - required 필수 항목 값을 확인해주는 속성 html5 입력 유효성 확인 안녕하세요. 고코더 입니다. ● 1. HTML5에 새로운 기능들은 개발자에 피로를 많이 덜어줍니다. 그 중에 하나가 바로 required 속성입니다. input이 비어있으면 자동으로 필수값으로 값을 넣으라고 해주는 유효성 체크 항목 입니다. ● 2. 가끔 브라우저에서 이런 메세지 창을 보신적이 있죠? required 속성을 입력한 input은 자동으로 이렇게 메세지 창을 띄워서 입력을 받도록 강제해줍니다. ● 3. 사용법은 간단합니다. 그저 input 태그안에 required만 붙혀주면 됩니다. 그리고 해당 속성은 해당 input은 필수 값이라는걸 알려주는 태그임을 강조하는 역할도 합니다. 마무리 물런 최신 브라우저를 써야 작동하는 기능이라 결국은 일부 유저를 위해 스크립트 .. 2019. 8. 1.
알PDF - PDF 파일 무료 변환 / HWP, WORD, EXCEL, PPT, JPG, EPUB, HTML, RTF PDF 파일, 워드, 한글, 엑셀, 파워포인트, 이미지, 전자책파일, HTML, RTF로 변환하는 프로그램 안녕하세요. 고코더 입니다. ● 1.이전 시간에 알PDF뷰어를 다운로드 하여 설치 하였습니다.->알PDF 뷰어 - 설치방법 및 다운로드 / 첨부파일 이 프로그램에 장점은 많은 기능을 제공하고 있습니다. 특히 PDF 파일을 다양한 형식으로 변환이 가능합니다. ● 2. PDF를 실행시키면 상단 부분에 파일을 변환 가능한 형식들이 보입니다. ● 3. 엄청 많은 방식으로 변환이 가능 합니다. 필요한 모든 변환이 다 있습니다. ● 4. 샘플 PDF를 모든 방식으로 변환해보았습니다. ● 5. 첨부파일에 내용입니다. 결과물은 생각보다. 훌륭합니다. 확인해보세요. 마무리 PDF를 다른 파일로 변환이 필요할때는 무.. 2019. 7. 19.
HTML - style 태그를 두번 선언하면 어떻게 될까? style 태그 중복 선언 안녕하세요. 고코더 입니다. ● 1. 많은 분들은 이미 알고 계시겠지만 최근에 코딩하다 알게 된 사실인데요. HTML에 요소에 style 태그를 선언해서 CSS 속성을 입력할 수 있습니다. Q. 그런데 이 style태그를 두 번 입력한다면 브라우저는 어떻게 해석할까? A. 정답은 처음 style 태그만 입력 받는다 ● 2. 한번 실험을 해보겠습니다. 아래처럼 태그를 입력했습니다. ● 3. 그리고 결과는 당연히 빨간색으로 글자가 표현됩니다. ● 4. 그럼 같은 속성만 무시되는 거 아니냐고 하실 텐데요 이번에는 뒤에 스타일 속성에 display를 none으로 해보겠습니다. ● 5. 결과는 역시 빨간색 글자만 나오네요. (앞에 이미지 복붙 아니고 결과 값 캡쳐했습니다.!) 알고 있던.. 2019. 7. 4.
HTML - Div를 화면 중앙 가운데 반응형 노출 DIV로 안내 페이지 만들기 안녕하세요. 고코더 입니다. 오늘은 DIV를 화면 가운데 중앙에 위치 하게 하는 방법을 알아보겠습니다. ● 1. 제가 만든 모니터 체크 사이트에서 사용한 HTML 입니다. http://monitor.gocoder.net 안내 페이지로 반응형으로 DIV를 화면 가운데로 노출하였습니다. ● 2. HTML을 웹에서 실행 해보세요. 123456789101112131415161718192021222324252627282930313233343536 .layer { position: absolute; text-align: center; width: 100%; height: 100%; top: 0; left: 0; font-size: 50px; } .layer .content { displ.. 2019. 6. 21.
CSS - 책 제목 처럼 왼쪽에 색 기둥 만들기 왼쪽에 색상 있는 제목 형식 안녕하세요. 고코더 입니다. 가끔 블로그나 홈페이지를 보다보면 책의 소제목처럼 왼쪽에 네모 박스에 색이 입혀진 디자인을 볼 수 있습니다. ● 1. 오늘은 이 모양과 같은 CSS를 만들어 보겠습니다. ● 2. 아래 코드를 HTML로 실행해보세요. 123456789101112131415161718192021222324252627282930313233343536 .div_gocoder_point_1 p { padding: 0px 5px 0px; border-bottom: 0px solid #000; border-left: 10px solid #000; color: #000; } .div_gocoder_point_2 p { padding: 0px 5px 0px; border-bott.. 2019. 6. 20.
티스토리 - 방문자 현황 노출 하지 않게 하기 TISTORYT 방문자 수 감추기 안녕하세요. 고코더 입니다. 블로그를 개설하면 기본적으로 셋팅 되는 부분중에 하나가 바로 메인 화면에 방문자 현황입니다. 기본적으로 블로그라면 노출되고 있지만 사실 자신의 방문자를 보여줄 필요가 없는 경우도 존재합니다. 오늘은 그래서 방문자 현황을 감추는 방법을 소개할려고 합니다. ● 1. 우선 자신의 블로그 관리자에서 HTML 편집으로 이동 합니다. ● 2. 그리고 아래 문자를 찾아보세요 : 오늘 방문자 수 : 어제 방문자 수 : 전체 방문자 수 ● 3. 각 블로그의 스킨마다 모습은 다르지만 해당 코드는 다 동일 합니다. 저같은 경우는 이렇게 방문자 통계들이 나타나고 있습니다. ● 4. 이제 여기서 주석 처리를 합니다. 주석 처리 하는 방법은 : 이걸 뒤로 채워주면 됩.. 2019. 6. 17.
jQuery UI - 이미지 드래그, 리사이징 / resizable() draggable() 제이쿼리 이미지 드래그 드랍, 사이즈 조절 안녕하세요. 고코더 입니다. jQuery UI를 쓸때 가장 많이 활용하게 되는 기능이 두가지가 있습니다. 바로 이미지 드래그와 리사이징 입니다. 레이어 팝업을 만들거나 사용자에게 크기를 조절하게 편의를 제공 하는 기능은 많이 씁니다. 그래서 이번 시간에 제이쿼리를 이용해 드래그와 리사이징을 동시에 배워보겠습니다. ● 1. 아래 소스를 웹사이트에서 실행해보세요. 1234567891011121314151617 $( document ).ready(function() { $('#GoCoderImg1').resizable(); $('#GoCoderImg2').draggable(); }); Colored by Color Scriptercs ● 2. 하나는 사이즈 조절이 가.. 2019. 6. 11.
JavaScript - 사파리에서 body, HTML에 클릭(click) 이벤트가 바인딩 되지 않는다. safari click 에 되지 않네요 안녕하세요. 고코더입니다. 브라우저는 제조사 마다 웹사이트를 분석하는 각자의 특징을 가지고 있습니다. 개발시에 크로스브라우징을 체크하지 않으면 클레임에 걸리게 됩니다. 최근에 모니터 불량화소 체크 사이트를 만들면서 (monitor.gocoder.net)특이한 케이스를 발견했습니다. 상식이었는데 제가 모르던 사실일 수도 있지만 ▼ 아래 소스를 우선 확인해보겠습니다. 1234567891011121314151617181920212223 $('html').on('click', function(){ alert('사파리에서 안됨'); }); $('body').on('click', function(){ alert('사파리에서 안됨'); }); $('body > div').on(.. 2019. 5. 22.
HTML - image maps 이미지맵 만들기 사이트 / image-maps.com 이미지맵 코드 생성 사이트 안녕하세요. 고코더 입니다. 이미지맵을 작성할때 머리가 비상한 분이면 이미지의 좌표를 바로 분석하고 코드를 기입하겠지만 보통은 프로그램이나 사이트의 도움을 받아 작성을 하는게 보통입니다. 그런데 프로그램은 귀찮고 사용해본 결과 이사이트가 가장 손쉽게 사용이 가능합니다. ▼ 이미지맵스는 "익스플로어"에서만 작동이 됩니다. (크롬에서 작동이 안되요!!!) http://www.image-maps.com/ 이미지 URL을 입력하고 start Mapping을 입력 합니다. ▼해당 이미지가 맞다면 click to continue 를 클릭해주세요. ▼새로 생긴 창에서 마우스 오른쪽 버튼을 누르면 사이트 기능이 뜹니다. 우린 가장 많이 사용하는 네모 "create rect"를 클릭해보겠습니다.. 2019. 3. 24.

티스토리툴바