HTML에서 입력폼을 만들때 사용하는 form 태그에 대하여 자세히 알아봅니다. 언제 그리고 어떻게 사용할까요?# form 태그 알아보기form 태그는 매우 자주 사용되는 중요한 태그인 만큼 하나하나 자세히 알아보도록 하겠습니다.! form 태그를 사용하는 경우는?먼저 form 태그의 기능은 웹페이지의 방문자에게 특정한 정보를 얻고 이를 서버에 전송할 수 있는 기능을 가지고 있습니다. 그래서 입력을 얻을 수 있는 input이나 textarea 등의 태그 요소를 내부의 자식요소로 가지게 되죠. 일반적으로 아래와 같은 모습입니다.<form> <input type="text" value="" name="title" /> <textarea name="description"></textarea></form>그렇다면 form에 적용할 수 있는 속성(attribute)들은 어떤게 있을까요? 다음과 같은 속성들이 사용됩니다.action // form이 submit되는 경우 이동할 페이지 u
2019-02-01 12:51:58클라이언트에서 파일을 업로드할 경우 ajax 즉, 비동기 방식으로 업로드는 하는 방법을 알아봅니다. 어떻게 하면 그리고 왜 비동기식 파일 업로드가 필요할까요?# AJAX를 사용한 파일 업로드 알아보기예전에는 주로 form 태그에 몇 가지 속성을 사용하여 submit 방식으로 파일 업로드를 수행하였습니다. 하지만 최근에는 업로드하는 경우 AJAX 방식을 사용한 비동기식 파일 업로드가 많이 사용됩니다. 특히 SPA(Single Page Application)의 경우 더욱 더 많이 사용되지요. 이 경우 blob 방식으로 변환하는 방법도 있고 아니면 FormData 객체를 사용할 수 있습니다. 아래는 FormData 객체를 사용하는 방법을 알아봅니다.! ajax 방식의 파일 업로드 자바스크립트에서 구현하기파일 업로드를 위해서 FormData 객체를 사용해보겠습니다. FormData는 간편하게 업로드 할 데이터를 추가하거나 관련 Object를 콘트롤할 수 있는 내장객체입니다. 그럼 먼저 예제
2018-02-21 06:35:11웹퍼블리싱 배우기! 키워드를 찾아 검색할 수 있는 기능을 웹에 추가하기 위하여 검색창을 만드는 방법을 알아보겠습니다.# 검색창은 무엇이고 언제 사용되나요검색창은 방문자에게 원하는 웹사이트의 콘텐츠를 좀 더 찾기 쉽도록 도와주는 역할을 합니다. 예를 들어 css에 관련된 블로그 글을 찾는 경우 간단하게 검색창에 css를 타이핑하여 검색결과로 확인 및 이동하게됩니다. 아래에서는 검색창을 구현해보고 아래 사항도 고려하여 만들도록 하겠습니다.서버와 연동하기부트스트랩을 활용한 UI서버와 연동하는 경우 동기식, 비동기식 두가지가 존재합니다. 비동기식 ajax는 별도의 양식에 대한 고민이 크지 않으므로 동기식 방법으로 알아보겠습니다.그리고 부트스트랩을 사용하여 UI를 퍼블리싱하면 더 간단하고 쉽게 만들 수 있습니다. 여기서도 부트스트랩을 활용해보도록 하겠습니다 # Search,검색창 UI 구현먼저 아래는 html과 css를 사용하여 검색하기 편리한 인터페이스를 구현하였습니다.<for
2017-05-18 00:25:41검색페이지 초성으로 검색하기 구현하는 방법
2017-05-01 21:02:51window.performance 객체를 활용하는 방법은?
2017-03-22 18:35:55자바스크립트에서 성능향상을 위한 방법으로 무엇이 있을까요? 아래는 필요한 성능 개선 방법들을 요약한 것입니다.- 자바스크립트 엔진에서 마지막 위치를 찾지 않도록 모두 세미콜론(;)을 사용하여 종료할 것- 전역 변수를 피할 것- 메모리 leak를 피할 것- 자식노드의 교체시 메모리 문제 발생할 수 있음- 엘리먼트의 조작이 많은 경우 innerHTML을 사용하는 방법이 DOM 생성시 파싱되므로 더 효율적일 수 있음- 텍스트 노드에 대한 변경일 경우 innerHTML, outerHTML이 아닌 innerText, outerText를 사용할 것- DOM을 조회하는 코드는 가급적 변수를 사용하여 횟수를 줄일 것- 이벤트 버블링, 캡쳐링을 활용하여 해당 요소보다는 부모 요소를 사용하여 호출할 것- for문 switch문을 사용할 것- for 등의 루프보다는 함수를 반복 호출할 것(호출 횟수가 제한적인 경우)- DOM 파싱을 위해 innerHTML을 활용할 것- 이벤트를 지연시키는 코드를 사용할
2017-03-22 16:54:04웹사이트에는 다양한 정보를 한께번에 전달하기 위해 수 많은 입력폼이 존재할 수 있다. 예를 들어 회원가입 페이지만 하더라도 개인정보 및 동의 등등 입력해야하는 필드 수만 상당하다. 이런 경우 만약 이 폼들을 그룹화한다면 더욱 편리하게 관리할 수 있을 것이다. 이에 html에는 fieldset이라는 태그가 존재하며 이 태그를 사용할 경우 다수의 입력폼들을 그룹화하여 관리 및 콘트롤할 수 있다. 그럼 아래에서 좀 더 자세한 내용을 확인해보자.! fieldset 태그 알아보기fieldset 태그는 아래와 같은 몇 개의 속성들을 지정하여 사용할 수 있으며 각각의 속성들의 특징은 다음과 같다. 아래처럼 이 태그에 사용가능한 태그는 매우 한정적이다.disabled - 해당하는 그룹을 모두 disable 할 수 있음form - 원하는 form을 선택할 수 있음name - 원하는 name 속성을 선택할 수 있음이 태그의 가장 큰 장점 중 하나로 퀀한에 따른 선택 그룹 전체를 비활성화(Disable
2016-06-30 14:23:06세로 저ㅇ렬을 하거나 요소을 이동시키기 위해 다양한 방법이 사용가능하다~ 그중에서도 transform 속성을 사용하는 방법 역시 존재한다.! transform 속성을 이용한 요소의 이동아래와 같은 방법으로 우리는 transform을 사용해 이미지를 비롯한 다양한 요소를 원하는 곳으로 이동할 수 있다.<style>div {transform: translate(x,y);}</style>위 코드는 div 요소를 좌우 x, y 값만큼 이동시키는 방법이다. 이 방법은 요소를 이동시키는 다양한 방법들과 비교할 때 몇가지 이점이 있는데 그 이유가 무엇인지 알아보자...transform 속성을 사용하는 사장 큰 이유는 바로 좌우 상하 이동시 절대값 뿐만 아니라 상대값을 이용한 이동이 가능하다는 점이다... 좀 더 쉽게 설명하자면...transform: translate(10px,10px);transform: translate(10%, 10%);위 보기는 두 가지 방법을 보여주는데 여기서 아래에 위
2016-03-09 15:52:26웹사이트에서 모달(Modal) 및 팝업창을 띄우거나 기타 특정 요소를 가로 또는 세로로 중앙 정렬하기 위한 방법은 몇 가지가 있다. 이때 해당 요소를 스크롤 및 브라우저 크기가 관계 없이 항상 고정된 위치에 중앙 정렬을 가지려면 어떤 방법이 가장 효과적일까...우선 요소를 중앙정렬 시키기는 일반적이면서 가장 간단한 방법으로 left 속성을 사용하며 우리는 아래와 같이 CSS를 사용해 이를 가능하게 할 수 있다.position: fixed;left: 50%;top: 50%;오른쪽(우측)으로 요소를 상대값 50% 만큼 이동시키면 해당하는 엘리먼트의 크기의 절반 만큼 다시 왼쪽으로 이동시킬 필요가 있게된다. 그래서 사용되는 방법이 해당요소의 크기만큼 50%를 다시 반대방향으로 이동하는 것이다. 예를 들어서...만약 요소의 크기가 800px인 경우 좌측으로 -400px 이동시키면 동일한 값을 가지게 된다. 하지만 left 속성은 이미 사용되었기 때문에 왼쪽으로 이동시킬 다른 css속성이
2016-03-09 14:25:40숫자인 원시값을 보여줄 경우 세자리수 마다 콤마를 찍을 때가 있습니다. 파일 용량이나 긴 숫자의 경우 콤마를 사용하면 방문자가 단위를 확인하는데 도움이 많이 되죠 ~ 이럴때 number_format() 함수를 사용할 수 있습니다.number_format(숫자값)# 숫자에 콤마넣기 예제소스 보기<?php$test = 123456789; echo $test; // 123456789를 출력 echo number_format($test); // 123,456,789를 출력?>
2015-09-26 14:15:25우선 애니메이션 구현시 자주 사용하는 transform 속성에 나타나는 문제를 해결하고자 합니다. 대부분의 최신 브라우저는 정상적이나 Safari(사파리)와 익스플로러 예전 버전(8.0 이하)에서 나타나는 문제를 해결하기 위한 방법입니다. 그럼 해당하는 문제가 어떤 브라우저이냐에 따라 아래 내용을 참고해주세요.! 사파리(Safari) 브라우저에서 발생할 경우웹킷엔진인 사파리에서 3d효과를 구현하기 위해 CSS3의 translate 속성을 사용할 경우 유독 Safari에서만 문제가 발생할 수 있습니다. 이 문제를 해결하기 위해 수 많은 구글링이 필요했고 결국 방법은 찾았습니다.# 부모 요소에 -webkit-perspective 속성을 사용할 것-webkit-perspective 속성은 3d 요소가 얼마만큼 나타나게 될지를 결정하는 속성으로 원근감을 표현할 때 사용할 수 있는 속성입니다. 이 속성을 부모요소에 사용하니 사파리에서도 정상 작동됨을 확인하였습니다.!! 익스플로러(IE) 8.
2015-06-03 16:18:46button 태그에 대하여 알아보겠습니다. button 태그는 웹사이트에서 매우 많이 사용되는 엘리먼트 요소 버튼 모양의 레이아웃을 보여주고 특정 기능을 실행하거나 form 태그에 submit하는 등의 용도로 사용됩니다. 그럼 button 태그를 어떻게 사용하는지 아래에서 자세히 알아봅니다.# HTML button 태그의 사용먼저 button 태그는 다음과 같은 모습으로 사용됩니다. 그리고 그 아래는 사용 가능한 속성들입니다.<button>test</button>! button 태그에 사용 가능한 속성보기 button 태그는 다은과 같은 속성을 사용할 수 있습니다.i. typebutton // 단순 버튼 형태로 클릭시 폼태그를 submit하지 않음submit // 클릭할 경우 form 태그의 action 속성의 위치로 submit됨reset // 전송값들을 리셋함(초기화)위 타입값 중에서 form 태그를 리셋하기 위한 방법으로 reset 값을 설정할 수 있습니다. 예를들면 아래의
2015-02-12 10:14:01만약 사이트를 방문하여 로그인이나 어떤 정보를 입력하려고 하는데 이미 자동으로 글이 저장되었다면? 그리고 그 내용이 보안이나 개인적인 정보라면 이 기능을 원하지 않을텐데도... 아래는 자동 완성 기능 사용하지 않는 방법입니다.[ 1 ] 자동 완성 기능은 언제 그리고 왜 사용되나...; 브라우저는 우리가 입력하는 입력폼, input이나 textarea에 입력할 글을 자동으로 저장하게 해주는 자동 완성 기능을 기본으로 가지고 있습니다. 그렇기 때문에 기존에 입력된 글을 앞에 몇글자만 입력해도 모두 입력할 수 있도록 도와줍니다. 매우 편리한 기능이지요. 하지만 이 기능이 항상 필요한 것은 아닙니다. 보안이나, 개인적인 정보일 경우 자동완성 기능은 꼭 꺼두어야 할 필요가 있습니다.[ 2 ] 자동 완성 기능 사용하지 않도록 설정; 사용할 태그에서 autocomplete 속성을 사용합니다. input 또는 textarea 태그안에 자동 완성 기능을 막는 이 속성을 넣어만 주면됩니다. 아래의 예
2014-08-29 23:57:13html 문서에서 css를 사용하여 특정 요소의 크기를 원하는 크기만큼 조절할 수 있는 방법을 알아봅니다.엘리먼트의 크기가 너무 크거나 작은 경우 크기를 조절해야합니다. 하지만 동일한 비율로 크기간 간단하게 조절할 수 있다면 편리할텐데요 이 경우 css의 zoom 프로퍼티를 사용합니다.# CSS zoom Propertycss의 zoom 프로퍼티는 원하는 요소(태그)의 크기를 확대하거나 축소(조절)하게 해줍니다. 사용 방법이 간단하다는 장점이 있는데요 간단하게 원하는 크기를 숫자로 입력하거나 normal 등의 문자 입력만으로 쉽고 빠르게 적용할 수 있죠.div { zoom: 2; }간단한 사용방법 및 문법은 위와 같습니다. div 태그를 2배 크기로 설정하였음을 의미하죠. 이처럼 숫자를 사용하는 방법이 가장 알아보기 쉽죠. 그럼 간단한 예제를 만들어보겠습니다.! css zoom 사용 예제보기만약 엘리먼트의 크기를 현재보다 키우거나 줄이고자합니다. 먼저 텍스트 엘리먼트를 하나 만들겠습니
2014-01-25 14:29:43CSS를 사용하여 다양한 시각적 효과, 애니메이션을 구현할 수 있는 transform 속성에 대하여 알아보려합니다.# CSS transform 알아보기먼저 transform은 css3 속성으로 선택한 엘리먼트의 크기 및 위치, 회전 등등 다양한 시각적인 조작을 가능하게 해줍니다. 또한 css의 transition 속성과 함께 사용할 경우 다양한 애니메이션 및 인터렉션 구현 역시 가능해집니다. 그럼 간단하게 CSS3의 transform 문법과 실제 적용되는 모습의 코드를 보시죠.transform: scale(2)@ 간단한 transform 속성 사용 모습들transform: rotate(30deg)transform: scale(2)transform: translate(100px) 그 아래는 함께 사용될 수 있는 옵션 값들 정보입니다.! transform에 사용 가능한 옵션과 효과transform에 사용가능한 옵션은 다양합니다. 아래와 같이 회전, 크기, 이동, 기울이기와 관련된 다양한
2014-01-12 15:45:51
