전체보기
HTML
CSS
JAVASCRIPT
PYTHON
REACT
VueJS
JQUERY
LINUX
PHP
DATABASE
LODASH
WEBDEVETC
Game
Life / Health
ETC
Search
JSON Pretty
Close
CATEGORIES
JSON Pretty
HTML
CSS
React
VueJS
Javascript
jQuery
Lodash
Python
Database
Linux
WEBDEVETC
Game
Life / Health
ETC
Search
Contact Us
LATEST POSTs
최근 등록된 포스팅 목록
최신순
인기순
html
[HTML] 태그에 사용자 임의 속성의 입력
상황에 따라 태그에 사용자 임의의 속성을 넣고 싶을때가 있죠. class나 id값을 사용하기도 하지만 data가 많거나 복잡하면 다른 방법을 찾아야합니다.자주 사용되는 예는 게시판에 번호나 특정 style을 부여하려는 경우입니다. 사용자 속성의 경우 속성 이름을 짓는데 제한은 없지만 W3C의 권고사항으로 "data-" 형의 이름을 사용하면 좋죠.data-user="..." //user와 관련된 속성을 넣을 경우data-product="..." //produc
View :
4134
/
2014-01-22
js
[자바스크립트] 텍스트에서 찾는 문자의 위치(순서) 불러오기, search()
문자열에서 특정 텍스트의 위치를 알고싶을때 search() 함수를 사용합니다. 해당 함수는 특정 문자열의 위치를 숫자로 반환하여 줍니다. 자세한 내용은 아래 예제를 참고하세요.# search() 예제소스 코드보기&
View :
3490
/
2014-01-21
js
[JavaScript] 모바일 접속시 모바일 페이지로 변경
요즘 모바일 페이지는 필수라고 생각합니다. 모바일 접속자가 급성장하는 추세에 요즘 모바일 사용자가 워낙 많기 때문에 모바일 페이지를 개발 할 수밖에 없습니다. 만약 모바일로 접속한 사용자를 모바일 페이지에 이동시키려면 어떻게 할까요? 우선 navigator객체를 통해 userAgent 속성 사용하면 사용자의 접속환경을 확인할 수 있고 그 후 사용자의 접속환경 (디바이스 또는 브라우저)에
View :
2682
/
2014-01-21
webdevetc
웹표준이란? 웹표준은 반드시 필요한 것일까... 웹표준이 어려운 이유는?
우선, 웹표준이란 무엇일까요? 먼저 Wikipedia의 글을 인용하면...! 웹표준이란?1. 웹 표준은 월드 와이드 웹의 측면을 서술하고 정의하는 공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어이다. 최근에 이 용어는 웹 사이트를 작성하는 데 중요도가 높아지고 있으며 웹 디자인, 개발과 관계가 있다.2. 수많은 상호 의존성이 있는 표준들과 규격들 가운데 일부는 단지 월드 와이드 웹으로만 끝나는 것이 아니라, 인터넷의 관리 측면이기도
View :
822
/
2014-01-21
html
[HTML] textarea 태그의 특징 및 기본 속성 알아보기
textarea 태그는 홈페이지를 만들때 많이 사용되는 태그 중 하나입니다. 사용자의 입력을 받아 처리할 수 있는 입력폼으로 일반적인 레이아웃에 관련 속성외에 이벽값에 대한 추가적인 속성을 가지고 있습니다.입력폼의 경우 자주 사용되는 태그는 보통 짧은 글이나 문장에 input 태그가 사용되고 긴 글 또는 띄어씌기를 보여줘야하는 경우는 대부분 textarea 태그가 사용됩니다.아래는 textar
View :
9113
/
2014-01-21
js
[자바스크립트] 날짜 데이터에 불러오기(년, 일, 월), Date객체
자바스크립트를 사용하여 날짜 데이터에 접근하기 위하여는 Date 객체를 통해서 접근이 가능하다. Date 객체는 날짜 및 시간에 관련된 정보를 가지고 있다.날짜 정보를 사용할 경우 일반적으로 Date 객체를 사용하여 새로운 인스턴스를 아래와 같이 생성하여 사용한다. 간단한 사용방법은 아래와 같다. 만약 현재 날짜를 date_value 변수에 저장한다고 한다면 다음과 같이 사용할 수 있
View :
5480
/
2014-01-20
html
[HTML] Meta viewport 제어, 뷰포트 변경, 모바일 환경
meta 태그중 viewport 속성은 특히 모바일 웹페이지가 있는 경우 사용됩니다. 뷰포트는 사용하는 디바이스에서 웹페이지를 열었을 때 보여줄 화면의 크기와 부가적인 옵션을 제어할 수 있도록 도와줍니다~ 아래 예를 보시면...<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><br
View :
3413
/
2014-01-17
css
[CSS] 미디어 쿼리, 외부 또는 내부 코드로 사용하는 방법
CSS media query의 스타일을 지정하는 방법입니다. 다만 다양한 방법으로 지정할 수 있습니다. 아래를 바주세요.CSS에 미디어쿼리(mediaquery)를 적용하는 방법은 크게 두 가지가 있습니다. <link media="..."> 처럼 직접 screen 속성을 지정하여 외부 파일을 import하는 방법이 있구요 @screen을 사용해 style 내부에 추가해 사용하는 방법이 있습니다.- <link>태그를 사용하여 설정하는 방법- style 태그 내부에
View :
2659
/
2014-01-14
css
[CSS] 속성 선택자를 사용해 특정 속성을 가진 요소에 스타일 부여방법
CSS의 선택자 지정 방법을 알아봅니다. 여기서는 엘리먼트의 속성을 선택하는 경우 사용 가능한 선택자 방법입니다.# CSS 속성을 선택자로 지정하는 방법DOM 엘리먼트, 태그 요소는 여러가지 어트리뷰트, 속성을 가지고 있습니다. 이 값을 가지고 CSS에서 선택하는 방법으로 속성 선택자를 사용하는 방법입니다 키워드는 []를 사용하고 이를 사용하여 해당하는 속성을 가진 요소에만 스타일 지정을 할 수가 있죠. 그럼 아래를 봐주세요.<b
View :
4344
/
2014-01-14
css
[CSS] CSS 적용방법 중 외부 CSS를 불러오는 방법
웹페이지를 만들때 CSS를 적용하는 방법을 알아봅니다. 어떻게 CSS를 적용할 수 있을까요?CSS 파일을 적용하기 위해서는 파일내에서 직접 코드를 작성하는 인라인(inline) 방식과 외부 파일을 불러오는 방법으로 link 태그와 rel속성, 또는 @import를 사용하는 방법 두 가지가 있습니다. 그럼 외부 파일을
View :
4432
/
2014-01-14
css
[CSS] 테두리 및 요소에 그림자 효과 부여하기, box-shadow
CSS를 사용하여 엘리먼트 요소에 그림자 효과를 부여하는 방법을 알아봅니다. 어떻게하면 그림자(shadow)를 만들 수 있을까요? 그리고 언제 사용할까요?! 그림자 효과 사용하는 경우엘리먼트에 그림자 효과를 사용하는 경우는 웹페이지를 만들때 특히 아래의 경우에 많이 사용됩니다.<b
View :
22100
/
2014-01-14
css
[CSS] 대,소문자 변경하기, text-transform
웹페이지에서 텍스트를 출력해 화면에 보여줄 때 대문자 또는 소문자로 변경한 뒤 보여줄 경우가 존재합니다. 때로는 텍스트의 모든 앞글자만 대문자로 변경하거나 아니면 전부 소문자나 대문자로 변경이 필요하죠.! 편리한 CSS 대소문자 변경하기이런 경우 서버에서 변환하거나 아니면
View :
5074
/
2014-01-12
js
[자바스크립트] 백그라운드(background) 경로, 주소 불러오기, getComputedStyle()
이미지 태그를 사용하지 않고 백그라운드를 사용한 이미지의 경우 이미지 경로를 확인하려면 아래의 함수를 사용해 불러올 수가 있습니다. 그 외에도 다른 속성들 예를 들어 display나 margin등의 속성이 가진 값을 확인할 때도 아래 함수를 사용해 어떤 값이 지정되었는지 알 수 있습니다.<img src="/static/uploads/2017/1782_js
View :
8051
/
2014-01-12
css
[CSS] transform 속성을 이용하여 회전, 이동, 크기, 기울기 등 효과 주기
CSS를 사용하여 다양한 시각적 효과, 애니메이션을 구현할 수 있는 transform 속성에 대하여 알아보려합니다.# CSS transform 알아보기먼저 trans
View :
59515
/
2014-01-12
css
[CSS] font-smoothing 속성 사용방법, 폰트 부드럽게 만들기
웹페이지의 폰트를 부드럽게 사용하기 위해서 css의 font-smoothing 속성을 사용할 수 있습니다. 아래는 이를 적용하는 방법과 효과에 대하여 알아봅니다.# CSS의 -webkit-font-smoothing 속성 알아보기CSS의 스타일 속성 중 하나로 -webkit-font-smoothing 속성이 있습니다. 이 속성을 적용하면 브라우저에 표현되는 텍스트가 렌더링
View :
13169
/
2014-01-12
css
[CSS] display와 visibility 속성을 사용해 특정 요소 사라지게 만드는 방법 및 팁
CSS를 사용해 특정 콘텐츠 및 요소를 사라지게 만들어야 할 경우가 있습니다. 이때 사용가능한 속성이 바로 display와 visibility입니다. 이 둘 속성은 매우 자주쓰이는데요... 사라지게 한다는 점에서는 같으나 둘의 차이점은 무엇일까요? <span data
View :
8483
/
2014-01-12
js
[JavaScript] Select 태그의 값을 순서, Index로 찾기, selectedIndex
select 태그에서 선택된 값이 있는 경우 몇번째 해당하는지 값을 알려면 어떻게 알 수 있을까요? 아래 방법은 선택된 값을 얻는 자바스크립트 방법입니다.# selectedIndex를 사용한 select 태그의 선택값 알아내기<b
View :
22952
/
2014-01-12
html
[CSS] media query에서 screen과 only screen의 차이점
CSS의 미디어 쿼리 @media를 작성하는 경우 웹페이지에서 두가지 코드 타입을 볼 수 있습니다. 바로 @media screen 그리고 @media only screen입니다. 과연 이 둘의 차이점은 무엇이고 왜 다르게 사용하는 걸까요? 그 이유에 대하여 알아보고자 합니다.# Example 1@media screen (min-width: 1024px) { color: #000
View :
4399
/
2014-01-11
js
[Ajax] 전달받은 responseText의 데이터를 객체로 변환 및 출력하기
Ajax등의 비동기 통신으로 받은 데이터가 문자열이나 객체 구조를 띄는 경우가 있습니다. 실제로 데이터베이스 또는 로컬에 저장할때 문자열로 변환 후 저장하기도 하는데 이런 경우 다시 객체 구조로 변환해야 사용할 수 있죠. 이 방법으로 JSON.parse()를 사용합니다.<h4 data-custom-style="
View :
8713
/
2014-01-10
js
[Ajax] 비동기식 처리, XMLHttpRequest
자바스크립트를 사용하여 비동기 방식(ajax)으로 처리하는 웹사이트가 많이 늘어나고 있습니다. 그 이유는 역시 비동기식 방식(asynchronous way)이 가진 많은 장점 때문인데요...아래는 자바스크립트를 사용하여 비동기 방식의 네트워크(ajax)를 구현하는 방법에 대하여 자세히 알아보고자합니다. 그럼 우선적으로
View :
7070
/
2014-01-09
js
[JQuery] Input, Textarea 활성화 또는 비활성화 변경
제이쿼리를 사용하여 input 태그 그리고 textarea 태그를 활성화 또는 비활성화로 변경하는 방법을 알아봅니다. 입력폼인 위 태그를 활성화 또는 비활성화 할 경우 글 입력(작성)이 가능 또는 불가능하게 변경할 수 있습니다. 그렇다면 아래는 이를 바꾸는 방법입니다. $(ele).attr('disabled', 'disabled');# 제이쿼리 a
View :
14584
/
2014-01-09
js
[자바스크립트] replace() 문자 변환, 치환
자바스크립트를 사용해 특정 문자를 다른 문자로 치환하는 방법에 대하여 알아볼까합니다. 먼저 사용할 메소드는 replace() 입니다. 사용방법은 아래와 같습니다. str_text.replace("찾을 문자열", "변경할 문자열") 자바스크립트의 replace()함수
View :
173832
/
2014-01-09
sql
[SQL] 복수개의 필드로 정렬하기, 다수의 필드로 정렬
데이터베이스의 테이블 안에서 오름차순 또는 내림차순으로 정렬을 원할 경우가 있습니다. 그런데 정렬 할 조건의 필드가 하나가 아닌 두 개 이상인 경우 어떻게 쿼리문을 적용할까요? 그럼 아래 예제를 봐주세요.# 데이터베이스 정렬, so
View :
12192
/
2014-01-07
php
[PHP] 변수의 자료형을 숫자, 문자로 변환하기
PHP에서 타입을 변경하는 방법에 대하여 알아봅니다. 어떻게 하면 숫자를 문자로 아니면 문자를 숫자 타입으로 바꿀 수 있는지 아래에서 자세히 알아보세요.# PHP 문자 숫자타입 또는 숫자를 문자타입으로 바꾸기php에서 문자를 숫자 또는 숫자를 문자로 타입을 변경하는 방법은 매우 간단합니다. 사용하려는 변수명 앞에 간단한 키워드 (int) 또
View :
60638
/
2014-01-03
js
[JQuery] 이벤트 통합 메서드의 활용, on(), off()
우선, 이벤트 통합 메서드는 JQuery 1.7 이후 버젼부터 사용이 가능합니다. 기존의 이벤트의 핸들러 함수로는 bind(), live(), delegate()가 있죠. 이 방법들 역시 사용이 가능하나 기능이 축소 및 변경되었기 때문에
View :
26368
/
2014-01-03
js
[JQuery] 클릭 이벤트의 반복실행, toggle()
클릭 이벤트를 구현할 때 똑같은 기능이 반복되게 하려면 어떻게할까요? 마치 스위치를 누를때처럼 말이죠. 버튼을 누를때 마다 다른 함수를 실행하거나 아니면 스위치를 켜고 끌때와 같이 딱 두개만 반복해서 계속 실행하려면 아래의 방법을 사용합니다.(아래에 나와 있지만 현재 이 기능의 대부분은 Deprecated되어 현재 예제대로 구현되지 않을 수 있습니다. 최신 버전의 jQuery에서는 다른 기능으로 toggle()이 사용되니 이 점 알아두세요!)
View :
35941
/
2014-01-03
js
[JQuery] 이벤트의 강제 실행, 커스텀 이벤트, trigger()
커스텀 이벤트를 만들려고 합니다. 이벤트를 실행하기 위해서는 이벤트 핸들러가 필요하죠. 클릭이나 스크롤 이동, 브라우저 사이즈 등등 몇몇의 핸들러가 작동하게 될 경우 브라우저에 이를 알리고 함수를 실행하지만 이런 이벤트 핸들러 없이도 동작이 가능하게 하려면 trigger()메소드가 필요합니다.<s
View :
41211
/
2014-01-03
sql
[SQL] 해시 함수로의 변환, SHA(), SHA1()
PHP는 길이가 다른 문자열을 똑같은 길이로 변환할 수 있도록 해쉬 함수(해시 함수)를 제공합니다. 그 중 가장 넓리 쓰이는 함수 중 아래 SHA()와 SHA1()이 있습니다.SHA('변환할 내용');또는 SHA1('변환할 내용')<img src="/static/uploads/2015/e25bb9a1_hash.jpg"
View :
5407
/
2014-01-03
php
[PHP] while 반복문 사용하기
반복문 중에서 가장 많이 쓰이는 반복문을 뽑으라면 while, 그리고 for문이겠죠... 그중에서도 특히 while 반복문은 for 문과 비슷하나 더 간단하기 때문에 많이 쓰입니다. 특히 데이터베이스를 불러올때 많이 사용합니다.[ 1 ] while 반복문 사용 방법 <
View :
7902
/
2014-01-02
php
[PHP] DB에서 Data 가져오기, mysql_fetch_array(), mysql_fetch_row()
데이터베이스(이하 DB)에 담겨진 내용을 불러오기 위한 함수에 대하여 알아보고자 합니다. 먼저 가장 많이 사용되는 함수는 아래와 같습니다.mysql_fetch_array()mysql_fetch_row()mysql_fetch_assoc()위 세가지 모두 데이터베이스(Database)를 가져오는 기능은 동일하나 어떤 방법으로 가져오는가의 차이가 있습니다.
View :
6794
/
2014-01-01
First
Prev
...
60
61
62
63
64
Next
Last