본문 바로가기

IT_Developers/HTML27

HTML5 - input 태그의 formaction 속성 formaction 예제 안녕하세요. 고코더 입니다. ● 1. form을 전송하는 방법은 웹프로그래밍 언어에 기본 입니다. 필요한 데이터를 로직을 처리하는 소스르 넘기는 과정입니다. 그런데 html5부터는 formaction 속성을 이용해 폼 주소를 input 박스에서 수정이 가능합니다. ● 2. 소스를 함께 살펴보겠습니다. 1234567891011121314151617181920 폼 전송 폼 전송2 목록 Colored by Color Scriptercs ● 3. formaction 속성이 없다면 post를 가로채서 스크립트를 작성하여 조건절을 걸었지만 html5에 편리한 기능 때문에 각각 다른 폼으로 전송이 가능합니다. ● 4. "폼 전송" 은 기존에 action 주소로 이동하고 ● 5. "폼 전송2".. 2019. 8. 5.
HTML - required 필수 항목 값을 확인해주는 속성 html5 입력 유효성 확인 안녕하세요. 고코더 입니다. ● 1. HTML5에 새로운 기능들은 개발자에 피로를 많이 덜어줍니다. 그 중에 하나가 바로 required 속성입니다. input이 비어있으면 자동으로 필수값으로 값을 넣으라고 해주는 유효성 체크 항목 입니다. ● 2. 가끔 브라우저에서 이런 메세지 창을 보신적이 있죠? required 속성을 입력한 input은 자동으로 이렇게 메세지 창을 띄워서 입력을 받도록 강제해줍니다. ● 3. 사용법은 간단합니다. 그저 input 태그안에 required만 붙혀주면 됩니다. 그리고 해당 속성은 해당 input은 필수 값이라는걸 알려주는 태그임을 강조하는 역할도 합니다. 마무리 물런 최신 브라우저를 써야 작동하는 기능이라 결국은 일부 유저를 위해 스크립트 .. 2019. 8. 1.
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 - Font Awesome 버전별 아이콘 확인하기 Font Awesome 아이콘 리스트 웹사이트 확인 안녕하세요. 고코더 입니다. 웹 아이콘으로 가장 많이 사용 되는 Font Awesome 제 블로그에도 홈페이지에서도 사용중입니다. 반응형 웹부터 일반 홈페이지까지 필요한 아이콘을 바로 가져다 쓰는게 가능합니다. 오늘은 이 편리한 아이콘 버전별로 어떤 icon들이 있는지 확인하는 방법을 알아보려고 합니다. ● 1. 제 블로그의 Font Awesome 버전은 4.7.0 입니다. 블로그를 꾸미다 보니 해당 버전의 어떤 아이콘들이 존재하는지 확인하는 방법을 찾다가 첫번째는 ● 2. 소스를 열어보면 이렇게 준비된 아이콘들의 이름을 볼 수 있습니다. 하지만 개발자는 효율적으로 일해야겠죠 ● 3. 해당 4.7.0버전의 아이콘 리스트는 아래에서 확인 가능합니다. ht.. 2019. 6. 11.
HTML - image maps 이미지맵 만들기 사이트 / image-maps.com 이미지맵 코드 생성 사이트 안녕하세요. 고코더 입니다. 이미지맵을 작성할때 머리가 비상한 분이면 이미지의 좌표를 바로 분석하고 코드를 기입하겠지만 보통은 프로그램이나 사이트의 도움을 받아 작성을 하는게 보통입니다. 그런데 프로그램은 귀찮고 사용해본 결과 이사이트가 가장 손쉽게 사용이 가능합니다. ▼ 이미지맵스는 "익스플로어"에서만 작동이 됩니다. (크롬에서 작동이 안되요!!!) http://www.image-maps.com/ 이미지 URL을 입력하고 start Mapping을 입력 합니다. ▼해당 이미지가 맞다면 click to continue 를 클릭해주세요. ▼새로 생긴 창에서 마우스 오른쪽 버튼을 누르면 사이트 기능이 뜹니다. 우린 가장 많이 사용하는 네모 "create rect"를 클릭해보겠습니다.. 2019. 3. 24.
폰트- kopubdotum.css CDN URL 오류 KoPubDotum-Regular 는 없네요 안녕하세요. 고코더 입니다. kpub 폰트는 가독성이 매우 좋은 글씨체입니다. 이전에도 제가 다루었던 무료 서체인데요 ->전자책 폰트 - KoPubWorld 서체 무료 다운로드 그래서 스킨을 만들때나 홈페이지를 만들때 Kopub돋음 서체인 아래 CDN 주소를 자주 쓰실거라 생각합니다. https://cdn.jsdelivr.net/font-kopub/1.0/kopubdotum.css 제가 사용하는 flatinum 스킨도 해당 서체를 사용합니다. 그런데 어느날 보니 가독성이 편한 서체가 아닌 일반 서체로 변해 있습니다. ▼ 기본 서체로 변해버린 블로그 오늘에서야 알아챘습니다. ▼ 오류를 보니 Regular 서체들이 인식이 안되고 있습니다. 이런~~~ ▼ 해당 무료.. 2019. 3. 21.
ASP - Ceil 함수 구현 / 문자열 입력시 오류 없게 ASP Ceil() 쉽게 사용하기 안녕하세요. 고코더 입니다. ASP는 오래된 언어라 생략 되어 있는 기본 함수가 몇몇 있습니다. 그 중에 많이 사용하는 소수점 무조건 올림인 Ceil 이 존재하지 않습니다. "네 정말 없습니다." 그래서 예전에 ceil 함수를 구현한걸 공유 해드립니다. ▼ 웹에서 실행해보세요. 12345678910111213141516 cs 예전 프로젝트때 만들어 쓰던 함수라 문제는 없습니다. 감사합니다. ASP 관련 추천 컨텐츠 ASP - 랜덤 수 만들기, 난수 생성ASP - 페이지 로딩 시간 체크하기ASP - xls(엑셀) 연결해서 DB처럼 사용하기ASP - 음수양수 구별하기 (Sgn)ASP - https 주소를 http로 만들어보자ASP - 서버상에 파일 존재여부 확인하기 마무리 .. 2019. 3. 18.
HTML - 사이트 특정 부분만 Iframe 으로 보이게 하기 Iframe으로 사이트 한 부분만 나오게 안녕하세요. 고코더 입니다. 사이트를 개발하다 보면 특정 사이트의 한 부분을 담아오고 싶을 때가 있습니다. 그래서 HTML은 Iframe을 준비해났습니다. 하지만 iframe에 기본속성을 사용하면 전체 화면을 담아오기 때문에 전체화면이 보여줍니다. ▼ 방송의 실시간 화면을 보여주고 싶은데 ifrme에는 전체화면이 주어집니다. 하지만 iframe에 간단한 DIV를 사용하면 사이트의 특정 화면만 iframe에 표현할 수 있습니다. ▼ 해당 HTML 코드를 한번 웹에서 실행해보세요123 Colored by Color Scriptercs▼ KBS 방송의 온에어의 화면을 깔끔하게 해당 실시간 화면만 IFRAME으로 가져왔습니다. 소스 코드 설명 style="position.. 2019. 3. 12.