HTML5

  • Touch and Swipe
    HTML5

    7 부트스트랩 – 반응형 이미지

     Head<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3…

  • Touch and Swipe
    HTML5

    7 동그라미 안에 숫자 넣기

      동그라미 안에 숫자 넣기 <style type="text/css"> .circle1 { width:200px; height:200px; border-radius:100px; -moz-border-radius : 100px; -webkit-bor…

  • Touch and Swipe
    HTML5

    5 Bootstrap modal 사이즈 및 위치 조절

     Bootstrap modal 사이즈 및 위치 조절Bootstrap의 자바스크립트 기능 중 하나인 modal 사용법을 간단하게 소개하고 CSS 클래스 조정을 통해 화면 가…

  • Touch and Swipe
    HTML5

    4 1. HTML5의 구조 및 기본 지식 익히기

    1. HTML5의 구조 및 기본 지식 익히기   HTML5를 학습하는데 있어 기본적인 내용을 설명하기에 앞서 먼저 HTML5의 특징을 간략하게 요약하면 다음과 …

  • Touch and Swipe
    HTML5

    4 JSP, HTML 캐쉬 없애기!

      가끔 jsp페이지를 클릭했는데  삭제 하였음에도 불구하고  기존에 존재했던 데이터가 그대로 보여지는  경우가 있다  이같은 …

  • Touch and Swipe
    HTML5

    4 open CDN jsdelivr github 사용으로 트래픽 감소 속도업

               다음예와 같이 적용하면 된다.gh/아이디/프로젝트명@버전/ 파일https://cdn.jsdelivr.net/gh/braverokmc79/easyk@1.0.…

  • Touch and Swipe
    HTML5

    4 HTML/CSS?마우스 커서 모양(스타일) 바꾸기

        HTML/CSS 마우스 커서 모양(스타일) 바꾸기   웹페이지를 HTML과 CSS를 이용해서 만들다 보면  각 상황에 …

  • Touch and Swipe
    HTML5

    4 페이징 화살표

       https://www.toptal.com/designers/htmlarrows/  <ul class="pagination"> <c:if test="${map.pager.curBlock > 1 }"&…

  • Touch and Swipe
    HTML5

    4 textarea 에 데이터를 입력후 웹표준에서 < , 따옴표 등 xss 처리 문제시

      1. input   태그에 데이터를 넣는다.jsp 에서는 escapeXml true 옵션을 주어  처리한다. 2. 자바스크립트로,  \n 는 br 로 변경해 주며,…

  • Touch and Swipe
    HTML5

    4 팝업 빔

       <!doctype html> <html lang="ko"> <head> <style> #web_header_wrap{ z-index: 9999; } .dim-layer { display: block; position: fixed; …

  • Touch and Swipe
    HTML5

    [동영상강의] html01_개발환경설정(이클립스, 톰캣 설치, 이클립스 설정), html의 개요

    * 컴퓨터 초기화 : 개인 데이터 백업 , IP 주소 메모   * 실습에 필요한 프로그램 설치( 원활한 실습을 위해 디렉토리를 통일할 것 )   * JDK…

  • Touch and Swipe
    HTML5

    [동영상강의] html02_html 기본 태그(표 그리기, 이미지, 하이퍼링크 등)

      test.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html > <html> <head> <meta http-equiv="Cont…

  • Touch and Swipe
    HTML5

    [동영상강의] html03_이미지맵, svg 벡터이미지

      * SVG(Scalable Vector Graphics) - XML-벡터 기반의 이미지 포맷 - 1999년에 표준 규격 발표 - 픽셀로 구성된 raster(래스터) 그래픽 방식의 단점인 확…

  • Touch and Swipe
    HTML5

    [동영상강의] html04_form(get, post 방식, request.getParameter, tcp/ip 모니터)

    form.html   <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- form : …

  • Touch and Swipe
    HTML5

    [동영상강의] html05_form(로그인 기능을 jdbc로 구현)

      radiof.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- radio…

  • Touch and Swipe
    HTML5

    [동영상강의] html06_오디오, 비디오 태그, 라디오 버튼, 체크박스

      checkf.html <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Co…

  • Touch and Swipe
    HTML5

    html07_버튼, 이미지 버튼, textarea, select, 다양한 input 태그, progress

    select.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!-- 스타일시트 --> <style type="text/…

  • Touch and Swipe
    HTML5

    [동영상강의] html09_css_선택자, id와 class, css를 사용하는 방법, font 관련 스타일, text 관련 스타일

          <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> /* class 가 type1 인 …

  • Touch and Swipe
    HTML5

    [동영상강의] html10_css_박스모델( border 관련 스타일, padding, margin )

    https://developer.mozilla.org/ko/docs/Web/CSS/border-style         border-style속성은 element's 국경의 네면에 대한 선 스타일을 설정하는 약…