html5 input type number maxlength 설정 ( 모바일 )에 대해서 알아본다. input 에는 maxlength 속성이 있다. 이는 value 속성의 값을 maxlength 속성 값 이하로 제한하는 것이다. 대부분 아래와 같이 사용한다. 1 cs 그런데 type="number" 에서는 maxlength 속성이 먹히지 않았다. 1 cs 위 코드 실행 시 maxlength 가 적용되지 않음 그래서 이유를 찾아보다 다음과 같은 정보를 발견했다. [이미지1] [이미지1] 에서 알 수 있듯이 number 키워드 사용 시 maxlength 를 사용할 수 없다. * number 키워드에서 maxlength 를 대체할 방법 중 2가지 1. oninput 이벤트를 사용하여 별도의 스크립트로 처리 *..

HTML 5 javascript 에서 업로드한 file 을 썸네일로 만들어 보겠습니다. 모바일 작업을 하는 중에 스마트폰에서 업로드 하는 이미지는 용량이 꽤 크기 때문에 웹 메모리상에 부하가 너무 심해서 썸네일로 줄여볼 방법이 없을까 하다가 찾게 되었습니다. FileReader 객체를 사용합니다. 지원 범위는 다음과 같습니다. 출처 : http://caniuse.com/#feat=filereader Jquery Import는 기본입니다. 먼저 파일 태그와 썸네일을 배치할 div 태그를 만듭니다. 1 2 3 Colored by Color Scripter cs 다음으로 Img File을 업로드한 후 작업 소스입니다. (javascript) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16..

1. CSS 스타일시트 css란 Cascalding Style Sheets 의 약자로 웹문서의 스타일을 지정해 놓은 파일입니다. 다시말해 웹사이트를 꾸미는 style의 정의를 모아 둔 파일이라 생각하면 됩니다. 예를 들면 이 웹사이트는 글꼴을 굴림체를 사용하고 글자크기는 10px이며 색은 파란색이고 등등... 이런 정보들을 새로운 페이지를 만들때마다 설정하려면 그만큼 귀찮고 손도 많이가는데 이를 한곳에 모아 두고 가져다가 쓰는 파일입니다. css를 설정하는 방법은 크게 3가지가 있습니다. 첫번째는 위에서 설명했듯이 css 파일에 정의해 놓고 파일을 불러와서 사용하는 방법이 있습니다. 두번째는 Html 문서에 style 태그 사이에 정의하고 사용할 수 있습니다. 세번째는 각 태그의 style 속성에 정의할..

1. img map 태그 img map(이미지 맵) 기능은 하나의 이미지에 여러가지 모양의 영역을 구성하고 이 모양에 링크를 설정하는 기능을 말한다. 즉, 하나의 이미지에 여러개의 링크를 설정할 수 있다는 말이다. 개인적으로 홈페이지를 만드는 동안에는 사용해 본적도 없고 굳이 사용할 필요도 없는 기능 같다. 홈페이지를 만들 때 링크가 나눠지면 버튼을 나눠서 만들면 된다. 이미지의 좌표를 가지고 링크를 설정한다는 것은 효율적이지도 못하다. 반응형 웹이 대세인 요즘에 이미지의 크기는 변하고 그 변하는 이미지의 좌표도 변하기 때문에 더더욱이 사용할 일은 적어지지 않을까 생각된다. 하지만 이 기능이 사용 될 곳이 분명히 존재 할 것이며 그것을 대비해서 포스팅한다. 거의 쓸일이 없기 때문에 자세한 좌표 구하는 식..

1. Table table 태그는 표라고 생각하면 쉽다. 한글이나 엑셀의 표처럼 그 표를 직접 그린다고 생각하면 이해가 빠를거라 생각된다. 홈페이지에서는 영역을 나눌 때 사용하거나 게시판 목록에서도 table 태그를 많이 사용하고, 내용을 일정한 간격과 모양을 가춰 표현할 때도 사용한다. 원하는 모양의 표를 출력하려면 속성에 대한 이해가 많이 필요하다. 속성이 조금이라도 틀어진다면 그 표는 보기 어려울 정도로 틀어져 있거나 젠가처럼 이빠진 모양으로 출력될 것이다. 홈페이지 제작에 있어서 빠질 수 없는 태그이므로 기본적인 속성과 사용법은 필히 숙지해야 한다. 기본적인 속성들은 다음과 같다. width : table태그에 설정하면 전체 테이블의 너비가 되고, td태그에 설정하면 각 cell의 너비가 된다. ..

1. iframe inline frame의 약자이며 다른 문서를 불러와서 페이지 내부에서 보여지게 할 수 있습니다. HTML5 이전에도 이후에도 iframe을 사용하지 않는것을 권고합니다. 하지만 필요할 때가 있을 지도 모르겠지요. 형식은 다음과 같습니다. 속성들은 다음과 같습니다. name : 프레임의 이름을 설정합니다. width : 프레임의 너비를 설정합니다. height :프레임의 높이를 설정합니다. frameborder : 0으로 설정하면 프레임의 테두리선을 보이지 않게 하며, 1을 설정하면 프레임의 테두리선을 나타나게 합니다. scrolling : 스크롤바의 표시 여부를 나타냅니다. (yes, no, auto) 프레임이란 것은 설명보다는 눈으로 보고 직접 클릭해 보는 것이 빠릅니다. ex) i..

1. 링크 연결 링크 연결이란 그림이나 글자와 다른 문서를 서로 연결하는 작업을 말한다. 클릭시 다른 사이트로 이동(네이버로 이동하거나 구글로 이동)하는 것도 링크 연결이 될 수 있으며 메일을 보낼 수도 있고 책갈피 처럼 클릭 시 원하는 위치로 스크롤링 되어지는 것도 링크 연결이라 할 수 있다. 링크 연결은 a 태그를 사용한다. a 태그는 href 속성을 사용하여 설정된 주소로 링크연결 또는 위치 이동을 가능하게 해준다. 1.1 같은 문서 내의 링크 웹페이지에 현재 보고있는 html 강좌들이 하나의 페이지에 모두 나온다고 가정해보자. 인덱스 (목차) 가 없으면 보고 싶은 위치로 이동하려면 스크롤을 내려가며 직접 확인해야한다. 하지만 같은 문서 내에 링크를 걸어두면 원하는 위치로 바로바로 이동할 수 있다...

1. img 태그 웹 페이지에 이미지를 불러와 출력하는 태그입니다. 속성은 다음과 같습니다. src : 이미지의 경로를 설정합니다. width : 이미지의 너비를 설정합니다. height : 이미지의 높이를 설정합니다. width 와 height 중 하나만 설정하면 나머지는 자동으로 비율에 맞춰 크기가 결정됩니다. alt : 이미지가 나오지 않을 경우 이미지 대신 나타낼 문자열을 설정합니다. title : 이미지 위에 마우스 커서를 올려 놓으면 나타나는 문자열을 설정합니다. align : top, middle, bottom 을 지정하면 이미지 기준으로 옆의 글자들의 위치가 변경됩니다. left, right 를 지정하면 이미지 자체가 왼쪽 또는 오른쪽으로 정렬됩니다. border : 이미지의 테두리선의 두..

1. 목록을 나타내는 태그들 ul 태그 : Unoerdered List 의 약자로 순서가 없는 목록이다. 글머리 기호를 붙혀서 목록을 만드는 형식이다. ol 태그 : Ordered List 의 약자로 순서가 있는 목록이다. 번호 형식으로 순서를 매겨 목록을 만드는 형식이다. dl 태그 : Difinition List 의 약자로 정의 목록을 만드는 형식이다. 어떤 용어의 정의를 나열하는 형식이다. li 태그 : List Item 의 약자로 ul 태그와 ol 태그의 내부에서 사용되는 태그이다. 목록의 내용이 되는 실질적인 태그이다. 들여쓰기 및 줄바꿈 기능이 있고 type 속성으로 다양한 기호를 사용할 수 있다. 1.1 ul 태그 글머리 기호를 붙혀서 목록을 만드는 형식이다. - ul 태그의 type 속성 ..

1. hr 태그 hr 태그는 화면에 가로로 선(구분선, 수평선) 을 긋는 태그입니다. 단락의 구분을 할 때 가장 많이 사용하게 됩니다. 그 외에도 문자의 밑줄을 넣을 때도 사용 가능하며 때때로 세로로 선을 넣을 수 도 있습니다. 줄바꿈 효과도 있어 br 태그나 p 태그와 같이 사용할 필요가 없으며 br 태그나 p 태그와 마찬가지로 단독으로 사용합니다. hr 태그의 속성은 다음과 같습니다. size : 태그의 굵기를 설정한다. width : 태그의 가로 길이를 설정한다. align : 태그의 정렬값을 설정한다. left, center, right color : 태그의 색상을 설정한다. noshade : 입체감을 없애고 평평한? 상태로 보여준다. 다음과 같이 코딩합니다. ex) hr태그.html 출력 결과물..