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