CATEGORIES
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
VueJS에서 라우터(router)를 설정하고 사용하는 방법에 대하여 알아봅니다.! 라우터(Router) 설정이란?다른 프레임워크처럼 vuejs 역시 라우터를 제공합니다. 이때 VueJS에서는 Vue Router를 사용하게되는데요 라우터를 설정하게되면 특정 주소와 접근할 페이지 정보를 설정할 수 있습니다. 즉, /sample/ 이라는 주소로 접근할 경우 원하는 페이지의 정보를 보여줄 수 있도록 설정하는 것이 바로 라우터(router)에서 라우트(route)를 설정한다고 생각하시면 됩니다.SPA(싱글 페이지 어플리케이션)에서는 하나의 페이지로 동작하기 때문에 실제로 다른 주소로 접근하여 웹페이지를 리로드하지 않는 대신에 Router 설정이 반드시 필요하게 됩니다.# Vue Router 설치 및 설정하기가장 먼
Last Modified : 2019-11-18 10:25:40제이쿼리의 after(), before() 메소드를 사용하면 원하는 문서를 쉽게 이동할 수 있습니다. 자바스크립트의 append() 또는 appendTo()를 생각하시면 좀 더 쉽게 이해하실 수 있으실겁니다.$('기준이 되는 요소').after('이동할 요소');$('기준이 되는 요소').before('이동할 요소');사용방법은 위와 같으며 기준이 되는 요소의 앞 또는 뒤에 이동할 요소가 옮겨지게 됩니다. 그럼 좀 더 자세히 알아보기 위해 아래 예제를 참고해보세요.[ 1 ] before() 예제 알아보기; 만약 연속된 3개의 요소가 있다고 합니다. 맨 뒤의 요소를 맨 앞으로 이동시키려면 어떻게 해야할까요? before() 메소드를 사용하면 가능합니다.<html><head><style type="text/cs
Last Modified : 2019-08-07 09:53: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
아래는 자바스크립트 또는 제이쿼리를 사용하여 반복문을 만드는 방법을 알아보려고합니다. 어떻게 반복문을 만들 수 있고 어떤 차이가 있는지 알아보세요.# 자바스크립트 제이쿼리 반복문 만들기자바스크립트에서 반복문(루프)을 만드려고 할 경우 아래와 같이 for문을 사용하는 방법이 가장 많이 사용됩니다. 반복문을 배우는 경우 가장 먼저 for문을 먼저 알고 나머지 방법들을 알아가는 것이 좋습니다.! 자바스크립트에서 반복문을 사용하는 다양한 방법들1. for in을 사용한 반복문2. for length를 사용하는 방법3. 제이쿼리(jQuery)를 사용한 each() 함수 반복문4. do() while 반복문5. while 반복문위 방법들이 먼저 가장 쉽고 빠르게 적용 가능한 for in 반복문을 알아봅니다.! for
Last Modified : 2018-06-06 16:55:34반복문 중에서 가장 많이 쓰이는 반복문을 뽑으라면 while, 그리고 for문이겠죠... 그중에서도 특히 while 반복문은 for 문과 비슷하나 더 간단하기 때문에 많이 쓰입니다. 특히 데이터베이스를 불러올때 많이 사용합니다.[ 1 ] while 반복문 사용 방법 while (참인 조건) { ...}// 변수 n이 참에서 거짓이 될때까지 반복함사용하는 방법은 위처럼 괄호안의 조건이 true(참)에서 false(거짓)가 될 때까지 루프를 반복하게 됩니다. 자세한 예제는 아래를 참조하세요![ 2 ] while 반복문 예제소스 코드보기 아래 예제는 1부터 5까지 더한 결과를 얻기 위한 간단한 예제입니다.<?php$sum = 0;$i = 0;// 변수 $sum과 $i를 0으로 선언하였음while (i=<5)
Last Modified : 2015-11-15 15:03:45
웹사이트에는 다양한 정보를 한께번에 전달하기 위해 수 많은 입력폼이 존재할 수 있다. 예를 들어 회원가입 페이지만 하더라도 개인정보 및 동의 등등 입력해야하는 필드 수만 상당하다. 이런 경우 만약 이 폼들을 그룹화한다면 더욱 편리하게 관리할 수 있을 것이다. 이에 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
Python jinja2(flask)를 사용할 때 표현식에서 for문을 사용하는 경우 index(인덱스)값을 가져오는 방법을 알아봅니다. 어떻게 하면 for문의 순서값인 index를 가져오는지 아래를 봐주세요. # Python for문 표현식 예제보기아래는 배열값을 가지는 items 변수를 가져와 반복문을 실행하는 예제입니다. 만약 items가 3개의 값을 가지는 경우 for문을 사용하여 루프를 실행해보겠습니다.<ul> {% for item in items %} <li> {{ loop.index }} 번째 줄입니다 </li> {% endfor %}</ul>위 코드를 보면 몇 번째 줄인지 나타내기 위해서 {{ loop.idex }}를 사용하였습니다. 출력결과는 아래와 같습니다.1
Last Modified : 2020-04-29 12:04:57
반복문은 for, while 등 몇가지가 존재합니다. 만약 입력할 값이 배열에 존재하는 값이라면? 아래와 같이 간단하게 배열에만 사용하는 반복문 foreach()를 사용할 수가 있습니다. 사용 방법은 매우 간단합니다.foreach (배열명 as 문법에 사용할 배열값) { ... }그럼 간단하게 예를 통해 알아보겠습니다.! foreach() 배열함수 반복문 예제 소스<?php$test = array(1, 2, 3); // 배열의 선언foreach ($test as $value) {echo $value.', ';}?> result 1, 2, 3, // 죄측과 같이 출력됨이렇게 출력됩니다. 참고로 배열을 선언할때 위와 같이 직접 입력할 수도 있지만 array()를 사용할 수도 있죠.$test = array();
Last Modified : 2015-11-15 15:13:45AngularJS에서 객체 또는 배열에 반복문을 사용하는 방법에 대하여 알아봅니다. 많이 사용되는 for문 외에 key, value로 객체의 프로퍼티를 반복하여 실행하는 반복문 사용이 가능한 forEach() 구문을 사용할 수 있습니다. 아래는 간단한 사용방법입니다.forEach(items, function(key, value) { // Code here});# AngularJS 반복문 forEach() 예제보기그럼 간단한 예제를 만들어 알아보겠습니다. 만약 객체 mySite가 있고 그 프로퍼티들을 출력하는 경우 아래와 같이 사용할 수 있습니다.mySite = { 'web': 'a', 'is': 'b', 'free': 'c'}forEach(mySite, function(key, value) { co
Last Modified : 2017-11-03 08:25:35
자바스크립트에서 서버에 데이터를 전달해주는 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
자바스크립트의 반복문 중에서 for문에서 사용 가능한 약식 표기방법에 대하여 알아봅니다. 한줄에 사용할 경우 사용하는 for 반복문입니다.for() {} 문법은 매우 많이 사용되는 반복문으로 루프를 구현하는 방법들 중 하나입니다. while, while in, switch등이 있으나 아마도 for문이 가장 많이 사용되는 방법이죠. 아래에는 for 반복문 사용시 약식으로 표기하는 방법을 알아봅니다.# for를 사용한 약식표기로 1부터 5까지 출력예를들어 아래처럼 약식표기 방법으로 1부터 5까지 출력이 가능하죠. 이 경우 한줄에 반복문을 짧게 표현할 수 있게됩니다.for (var i=0; i<5; i++) console.log(++i);여기서 약식표기된 모습은 if() 문법의 약식 표기와 동일합니다. for()
Last Modified : 2019-08-22 09:32:15
자바스크립트는 in 연산자를 통해 객체가 가진 프로퍼티나 메소드가 맞는지의 여부를 확인할 수 있다. 다시말해 진짜 이 값을 가진 객체인지 판별해주는 연산자이다.먼저 간단한 예제를 통해 알아보자. 만약 장난감이란 객체를 만들고 해당하는 프로퍼티가 장난감 객체에 해당하는지 알아보려면 다음과 같이 수행할 수 있을 것이다.toy = new Object;toy.car = "sonata"toy.plane = "drone"위 예제를 통하여 우리는 toy 객체와 두개의 프로퍼티를 만들었다. 여기서 in 연산자를 사용하여 car 그리고 plane 프로퍼티가 toy 객체의 프로퍼티임을 확인하는 방법은 다음과 같다.# in 연산자를 사용한 특정 객체의 프로퍼티 확인 예제if ('car' in toy) { console.lo
Last Modified : 2016-04-28 12:48:44
이 글은 자바스크립트의 가장 유명한 사람인 더글라스 크락포드의 글을 읽고 적은 내용이다. 더글라스 크락포드는 제이슨(JSON) 형식의 창시자로 아마 많은 분들이 이미 이 글 및 이 책에 대하여 알고 있을 것이다. 그는 '자바스크립트 핵심 가이드'라는 책의 저자이기도 하다."세상에서 가장 잘못 이해되고 있는 언어, 자바스크립트"처음 이 글을 읽던 때도 벌써 몇 년 지났다. 이 글이 전해주고자 하는 바는 자바스크립트는 다른 어떤 언어보다 강력한 기능을 가진 언어임에도 이를 발못이해하여 제대로 사용하지 못하고 있음을 일깨워주는 내용이다.자바스크립트를 공부하거나 관련된 직무를 하고 있다면 반드시 읽어바야 할 필수 글이 아닌가 생각된다. 좀 더 자세한 내용은 그의 웹사이트에서 찾아볼 수 있다. 이 글은 그의 글에
Last Modified : 2019-02-06 05:27:12
Python에서 사용 가능한 range() 함수에 대하여 알아봅니다.! range() 함수는?파이썬의 range() 함수는 연속된 숫자를 반환하는 함수입니다. 매우 간단하게 연속된 수열을 만들 수도 있죠. 아래는 간단한 문법입니다.range(startNumber, stopNumber, stepSize)- startNumber : 시작값을 나타내며 기본값은 0 (선택값)- stopNumber : 연속될 마지막 값을 나타냄. 단 자신은 포함되지 않음 (필수값)- stepSize : 연속될 수의 한 단위 값을 결정함 (선택값)이처럼 연속된 숫자를 쉽게 만들어 주게 됩니다. 그럼 간단한 반복문과 배열에 어떻게 사용되는지 예제와 함께 알아봅니다.# range() 함수 반복문 예제 보기이번 예제는 필수값 stopNum
Last Modified : 2019-08-18 09:16:58세로 저ㅇ렬을 하거나 요소을 이동시키기 위해 다양한 방법이 사용가능하다~ 그중에서도 transform 속성을 사용하는 방법 역시 존재한다.! transform 속성을 이용한 요소의 이동아래와 같은 방법으로 우리는 transform을 사용해 이미지를 비롯한 다양한 요소를 원하는 곳으로 이동할 수 있다.<style>div {transform: translate(x,y);}</style>위 코드는 div 요소를 좌우 x, y 값만큼 이동시키는 방법이다. 이 방법은 요소를 이동시키는 다양한 방법들과 비교할 때 몇가지 이점이 있는데 그 이유가 무엇인지 알아보자...transform 속성을 사용하는 사장 큰 이유는 바로 좌우 상하 이동시 절대값 뿐만 아니라 상대값을 이용한 이동이 가능하다는 점이다... 좀 더 쉽게 설
Last Modified : 2016-03-11 23:03:08
PHP에서 for 반복문을 사용하는 방법에 대하여 알아봅니다. 어떻게하면 for문을 사용할까요?# php for 반복문 알아보기반복문, loop를 만들기 위해서 for문이 많이 사용되죠. php 역시 for문이 존재하면 다른 언어에서의 문법과 대부분 동일합니다. 자바스크립트를 예를들면 변수 선언에 사용되는 $표시가 달라 i를 선언시 $i를 사용하는 차지점 정도입니다. 간단한 문법은 아래와 같습니다.for(변수선언; 조건; 조건이 true일 경우 수행할 코드) { ... }- 변수선언 : 보통 $i를 많이 사용하며 루프 조건을 만드는 데 사용되는 변수 선언입니다.- 조건 : 조건이 true인 경우 다음의 코드를 수행합니다. 반복이 계속되거나 멈추는 조건을 설정합니다.- 수행할 코드 : 조건이 맞는 경우 다음
Last Modified : 2019-08-30 10:24:43검색페이지 초성으로 검색하기 구현하는 방법
Last Modified : 2017-05-01 21:02:51자바스크립트에서 성능향상을 위한 방법으로 무엇이 있을까요? 아래는 필요한 성능 개선 방법들을 요약한 것입니다.- 자바스크립트 엔진에서 마지막 위치를 찾지 않도록 모두 세미콜론(;)을 사용하여 종료할 것- 전역 변수를 피할 것- 메모리 leak를 피할 것- 자식노드의 교체시 메모리 문제 발생할 수 있음- 엘리먼트의 조작이 많은 경우 innerHTML을 사용하는 방법이 DOM 생성시 파싱되므로 더 효율적일 수 있음- 텍스트 노드에 대한 변경일 경우 innerHTML, outerHTML이 아닌 innerText, outerText를 사용할 것- DOM을 조회하는 코드는 가급적 변수를 사용하여 횟수를 줄일 것- 이벤트 버블링, 캡쳐링을 활용하여 해당 요소보다는 부모 요소를 사용하여 호출할 것- for문 switch
Last Modified : 2017-09-21 00:20:45window.performance 객체를 활용하는 방법은?
Last Modified : 2017-09-21 00:21:28python에서 for문 사용하기 및 예제보기
Last Modified : 2017-08-05 17:07:01AngularJS에서 select 태그의 option에 ngFor를 사용하는 경우 기본값을 사용하는 방법을 알아봅니다.# select 태그 ngfor문에 기본값 사용하기먼저 기본값을 사용하기 위해서는 ngFor가 적용된 option 태그에 [selected]를 사용해야합니다.[selected]="조건값"조건이 true인 경우에는 기본값으로 선택되어 나타나게 됩니다.! ngFor selected 예제보기간단한 예제입니다. myDates라는 배열이 [ 1, 7, 30, 90, 365 ]인 경우 만약 value가 365인 경우에 기본값으로 설정하려면 어떻게 할까요? 아래와 같이 사용할 수 있습니다.<select class="custom-select"> <option *ngFor="let date of myDat
Last Modified : 2020-02-22 13:58:44